React.js下载与使用
一、React.js下载
GitHub:https://github.com/facebook/react/releases
可以直接使用 Staticfile CDN 的 React CDN 库,地址如下:
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>
react.js目录如下:
* react.min.js - React 的核心库
* react-dom.min.js - 提供与 DOM 相关的功能
* babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。
二、React.js的使用
在html中引入文件
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>
三、第一个案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
四、通过npm使用React
前提:已经安装好node.js和npm/cnpm
create-react-app 自动创建的项目是基于 Webpack + ES6 。
安装命令:npm install -g create-react-app
创建react项目
进入想要创建项目的目录
cd ReactProgram
创建react项目
create-react-app demo
出错:
原因: 或许是因为国内npm拉去资源,拉去不到的问题,可以试着从解决创建create-react-app慢的方法着手。
解决方法
重新创建项目
create-react-app demo
创建成功!
进入项目
cd demo
运行项目
npm start
会在默认浏览器中看到:
项目目录:
更多web前端知识,请查阅 HTML中文网 !!