react安装
React可以直接下载使用,下载包中也提供了很多学习的实例。
本教程使用了 React 的版本为 15.4.2,你可以在官网 http://facebook.github.io/react/ 下载最新版。
你也可以直接使用 BootCDN 的 React CDN 库,地址如下:
- <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
- <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
- <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
使用实例
- <!DOCTYPE html>
- <html>
- <head>
- <Meta charset="UTF-8" />
- <title>Hello React!</title>
- <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
- <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
- <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/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>
react.min.js - React 的核心库 react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React
代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime
包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。
使用 create-react-app 快速构建 React 开发环境
第一步、安装全局包
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目:
- $ cnpm install -g create-react-app
- $ create-react-app my-app
- $ cd my-app/
- $ npm start
- //项目目录
- |____my-app
- |____README.md
- |____node_modules/
- | |____package.json
- |____.gitignore
- |____public
- | |____favicon.ico
- | |____index.html
- |____src
- | |____App.css
- | |____App.js
- | |____App.test.js
- | |____index.css
- | |____index.js
- | |____logo.svg
在浏览器中打开 http://localhost:3000/ ,即可显示