基本使用

1 React 的安装

安装命令：npm i react react-dom

react 包是核心，提供创建元素、组件等功能react-dom 包提供 DOM 相关功能等

1. 引入 react 和 react-dom 两个 js 文件

2. 创建 React 元素 3. 渲染 React 元素到页面中

2 方法说明

React.createElement() 说明（知道）

// 返回值：React元素

// 第一个参数：要创建的React元素名称

// 第二个参数：该React元素的属性

// 第三个及其以后的参数：该React元素的子节点

const el = React.createElement('h1', { title: '标题' }, 'Hello React')

ReactDOM.render() 说明

// 第一个参数：要渲染的React元素

// 第二个参数：DOM对象，用于指定渲染到页面中的位置

ReactDOM.render(el, document.getElementById('root'))

脚手架使用

1 React 脚手架意义

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

2 使用 React 脚手架初始化项目

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

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

npx 命令介绍

npm v5.2.0 引入的一条命令目的：提升包内提供的命令行工具的使用体验原来：先安装脚手架包，再使用这个包中提供的命令现在：无需安装脚手架包，就可以直接使用这个包提供的命令

补充说明

推荐使用：npx create-react-app my-appnpm init react-app my-appyarn create react-app my-app

yarn 是 Facebook 发布的包管理器，可以看做是 npm 的替代品，功能与 npm 相同yarn 具有快速、可靠和安全的特点初始化新项目：yarn init安装包： yarn add 包名称安装项目依赖项： yarn其他命令，请参考yarn文档

3 在脚手架中使用 React

导入 react 和 react-dom 两个包。

import React from 'react'

import ReactDOM from 'react-dom'

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

参考阅读

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：