携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

1. react 概述

1.1 什么是react

是一个用于构建用户界面的 JavaScript 库。

起源于 Facebook 的内部项目，Instagram 就是用 react 架设的网站，于2013年5月开源。

1.2 react特点

1.2.1 声明式

只需要描述 UI 看起来是什么样，react 就写成什么样，其实就是在 react 中写 HTML 代码，react 负责渲染这些 UI 并在数据变化时更新 UI。

const jsx = <div className="app">
    <h1>hello  world!动态变化数据：{count}</h1>
</div>

1.2.2 基于组件

组件是 React 中重要的内容。

组件表示页面中的部分内容。我们可以把一个页面抽象成各种各样的组件，然后通过组合、复用多个组件，实现完整的页面功能。

1.2.3 学习一次，随处使用

可以开发 Web 应用
可以开发移动端原生应用（react-native）
可以开发 VR （虚拟现实）应用（react 360）

2. react 的基本使用

前提条件：已安装 node，npm 等

2.1 react 的安装

进入项目所在目录，执行以下命令：

npm i react react-dom

react 包是核心，提供创建元素、组件等功能
react-dom 包提供 DOM 相关功能等（负责渲染）

执行完命令后，会生成 package.json 文件，有以上两个包即安装成功。

企业微信截图_16589922616484.png

2.2 react 的使用步骤

在HTML 文件中引入 react 和 react-dom 包
创建 react 元素
渲染 react 元素到页面中

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react的基本使用</title>
</head>

<body>
    <div id="root"></div>

    <!-- 1.引入js文件 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

    <script>
        // 2.创建react元素
        // 参数1：元素名称
        // 参数2：元素属性
        // 参数3：元素的子节点
        const title = React.createElement(
            'h1',
            { title: '我是标题', id: 'first' },
            'Hello React!',
            React.createElement('span', null, '我是span节点')
        )

        // 3.渲染react元素
        // 参数1：要渲染的react元素
        // 参数2：挂载点
        ReactDOM.render(title, document.getElementById('root'))
    </script>
</body>

</html>

2.3 方法说明

React.createElement() 说明（了解就行，用起来较复杂）

// 返回值：react元素
// 参数1：元素名称
// 参数2：元素属性
// 参数3：元素的子节点
const title = React.createElement(
     'h1',
     { title: '我是标题', id: 'first' },
     'Hello React!',
     React.createElement('span', null, '我是span节点')
)

ReactDOM.render() 说明

// 要渲染的react元素
// 参数1：要渲染的react元素
// 参数2：DOM 对象，用于指定渲染到页面中的位置
ReactDOM.render(title, document.getElementById('root'))

3. react 脚手架的使用

3.1 react 脚手架的意义

是开发现代 Web 应用的必备
充分利用 Webpack、Babel、ESLint 等工具辅助项目开发
零配置，无需手动配置繁琐的工具即可使用
关注业务，而不是工具配置

3.2 使用 react 脚手架初始化项目

初始化项目，命令：npx create-react-app 项目名称

启动项目，在根目录执行命令：npm start

3.3 补充说明

npx 命令介绍

npm v5.2.0 引入的一条命令，目的是提升包内提供的命令行工具的使用体验，

这句话的意思是，在没有 npx 命令之前，先要全局安装脚手架（npm install -g create-react-app），然后才能初始化项目，

这会导致安装的脚手架如果长期不用就没有意义，所以就提供了 npx 命令。

3.4 在脚手架中使用 react

导入 react 和 react-dom 两个包

import React from 'react'
import ReactDOM from 'react-dom'

调用 React.createElement() 方法创建 react 元素。
调用 ReactDOM.render() 方法渲染 react 元素到页面中。

1. React 基础