关于react.js: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

Next.js 是联合了 Node.js 和 React 的轻量级框架，适宜场景：动态前端页面 +Nodejs 服务端，组合的利用。

Next.js – 官网文档

3、Gatsby

用 React 创立 动态网站 的最佳形式，适宜内容型的网站，提供最快的访问速度。我的项目部署公布时，只须要上传编译后的 public 文件夹到 Nginx 服务器，即实现部署公布。

Gatsby – 官网文档

五、参考文档：

React 的装置和应用！