一、React库阐明
React库蕴含两局部：1、React蕴含了所有基本功能；2、ReactDOM只蕴含了操作DOM的性能。
1、加载React库
# 1、用<script>加载开发版：<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>公布版：<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script># 2、ES5 和 npm 环境中用requirevar React = require('react')# 3、ES6 和 npm 环境中用importimport React from 'react'2、加载ReactDOM库
# 1、用<script>加载开发版： <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>公布版：<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script># 2、ES5 和 npm 环境中用requirevar ReactDOM = require('react-dom')# 3、ES6 和 npm 环境中用importimport ReactDOM from 'react-dom'二、HTML中应用React
只用浏览器原生反对个性来加载应用React，此种形式适宜我的项目演示和学习用。
1、HTML配置React环境
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Add React in One Minute</title></head><body> <!-- 第一步：设置父容器 --> <div id="like_button_container"></div> <!-- 第二步：加载开发版本的React --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- 部署时，请用上面链接代替下面 --> <!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> --> <!-- 第三步：编写React组件代码 --> <script src="like_button.js"></script></body></html>2、编写React组件
// like_button.js'use strict';const e = React.createElement;class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); }}const domContainer = document.querySelector('#like_button_container');ReactDOM.render(e(LikeButton), domContainer);3、查看成果
把下面html文件和js文件放在同一个文件夹内，可用浏览器关上html文件，查看成果。
三、HTML中应用React和JSX
jsx是js的扩大语法，用标签式形式编写UI元素，无奈被浏览器间接反对，须要预处理器把jsx转为浏览器反对的html标签，这个预处理器就是babel， React没有强制要求应用JSX，但应用JSX编写UI，的确带来很多便当。
法一：脚本加载babel
把上面代码存储为html文件，关上即可看到成果，此法适宜我的项目演示和学习，不适宜公布我的项目。
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello World</title> <!-- 第一步：加载开发版本的React --> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <!-- 部署公布时，请用上面链接代替下面 --> <!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> --> <!-- 第二步：加载开发版本的babel --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script></head><body> <div id="root"></div> <script type="text/babel"> // 第三步：应用JSX编写UI ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script></body></html>法二：装置babel到我的项目
- 新建我的项目文件夹：test；
- 新建并复制上面代码到test/index.html文件；
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Add React in One Minute</title></head><body> <!-- 第一步：设置父容器 --> <div id="like_button_container"></div> <!-- 第二步：加载开发版本的React --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- 部署公布时，请用上面链接代替下面 --> <!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> --> <!-- 第三步：加载React组件 --> <script src="like_button.js"></script></body></html>- 在test文件夹下，新建src文件夹；
- 在src文件下，新建并复制上面js代码到like_button.js
'use strict';// 第三步：编写组件class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return ( <button onClick={() => this.setState({ liked: true })}> Like-babel </button> ); }}let domContainer = document.querySelector('#like_button_container');ReactDOM.render(<LikeButton />, domContainer);- 装置
Node.js - 关上terminal，到我的项目根目录test下，执行上面命令装置babel
npm init -ynpm install babel-cli@6 babel-preset-react-app@3- 运行jsx预处理器babel
npx babel --watch src --out-dir . --presets react-app/prod- 用浏览器关上index.html，即可看到运行成果。可批改src/like_button.js内容，babel会主动转化src/like_button.js，在我的项目根目录test生成一个浏览器反对的like_button.js，浏览器刷新index.html，即可看到批改后成果。
五、创立React我的项目
1、Create React App
可疾速创立单页面利用并主动配置好React的开发环境，提供良好的开发体验。然而必须装置 Node >= 14.0.0 和 npm >= 5.6。举荐作为学习实际我的项目或者单页面我的项目。
单页面利用(single-page application) 是指加载单个页面，并下载所有必要资源（ JavaScript 、CSS等），后续页面的任何交互，都不再须要向 server 申请资源，即页面不会从新加载。
# 装置完Node后，在terminal中创立React的单页面利用npx create-react-app my-app# 运行此单页面我的项目cd my-appnpm start# 编译我的项目作为production版本公布npm run build2、Next.js
Next.js 是联合了 Node.js 和 React 的轻量级框架，适宜场景：动态前端页面+Nodejs服务端，组合的利用。
- Next.js - 官网文档
3、Gatsby
用 React 创立 动态网站 的最佳形式，适宜内容型的网站，提供最快的访问速度。我的项目部署公布时，只须要上传编译后的 public 文件夹到Nginx服务器，即实现部署公布。
- Gatsby - 官网文档
五、参考文档：
- React的装置和应用！