React的安装和使用！

头像
Learn_anything
    阅读 6 分钟
    一、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到项目
    1. 新建项目文件夹：test；
    2. 新建并复制下面代码到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>
    1. 在test文件夹下，新建src文件夹；
    2. 在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);
    1. 安装Node.js
    2. 打开terminal，到项目根目录test下，执行下面命令安装babel
    npm init -y
npm install babel-cli@6 babel-preset-react-app@3
    1. 运行jsx预处理器babel
    npx babel --watch src --out-dir . --presets react-app/prod
    1. 用浏览器打开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服务端，组合的应用。

    3、Gatsby

    用 React 创建 静态网站 的最佳方式，适合内容型的网站，提供最快的访问速度。项目部署发布时，只需要上传编译后的 public 文件夹到Nginx服务器，即完成部署发布。

    五、参考文档：
    reactnpm
    Learn_anything
    7 声望0 粉丝

    收集互联网优质资源！

    « 上一篇
    React的Reducer Hook让state有了状态！
    下一篇 »
    React的受控组件用法详解！

    引用和评论

    推荐阅读
    头像
    学习Git和Github，从这里开始！

    Learn_anything阅读 433

    头像
    浏览器标签页之间通信之 -- Localstorage+IndexedDB

    lllllxt_in_sf赞 3阅读 3.8k

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 3阅读 3.5k评论 1

    头像
    解决windows下安装electron 8.0.0 在node install.js卡住的问题

    lllllxt_in_sf赞 2阅读 5.9k

    头像
    vue3使用百度地图

    兔子先森赞 1阅读 1.4k

    头像
    Taro 源码揭秘：4. 每次 npm run dev:weapp 开发小程序，build 编译打包是如何实现的？

    若川阅读 4.6k

    头像
    认识包管理工具： npm、yarn和pnpm

    specialcoder赞 3阅读 1.8k

    0 条评论
    得票最新