react安装主要有两种方式
1.下载react库或者直接使用cdn库
使用的库说明及案例代码:
-
react.min.js - React 的核心库
-
react-dom.min.js - 提供与 DOM 相关的功能
-
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>react example</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>, document.getElementById('example') );
</script>
</body>
</html>
右键浏览
注意:
在浏览器中使用 Babel 来编译 JSX 效率是非常低的,生产环境中不建议使用
如果我们需要使用 JSX,则 <script> 标签的 type 属性需要设置为 text/babel。
2.通过npm使用react
win+r打开终端,按下面命令依次执行
安装react库 --npm install -g create-react-app 此处笔者以及安装过,就不再执行该命令。如果安装过慢可以换成淘宝的资源安装
创建项目--create-react-app [name]
启动 --npm start