React的安装和使用！(react项目搭建和使用)
一、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 环境中用require var React = require('react') # 3、ES6 和 npm 环境中用import import 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 环境中用require var ReactDOM = require('react-dom') # 3、ES6 和 npm 环境中用import import 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 -y npm 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-app npm start # 编译项目作为production版本发布 npm run build 复制代码
2、Next.js
伪原创工具 SEO网站优化 https://www.237it.com/
Next.js 是结合了 Node.js 和 React 的轻量级框架，适合场景：静态前端页面+Nodejs服务端，组合的应用。
作者：learn_anything_cn
链接：https://juejin.cn/post/7035126058567335972