React 的基本使用、脚手架中使用React

React 的安装

安装命令：

npm init
npm i react react-dom
1
2

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

React 的使用

此处使用

“react”: “^16.8.6”,
“react-dom”: “^16.8.6”

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

<script src="./node_modules/react/umd/react.development.js">script>
<script src="./node_modules/react-dom/umd/react-dom.development.js">script>
1
2

2. 创建React 元素

// 创建元素节点
// 1. 元素名称
// 2. 元素属性 传递的是个对象
// 3. 元素内容
const title = React.createElement('h1', { title: '标题' }, 'Hello React')
1
2
3
4
5

3. 渲染React 元素到页面中

// 渲染到页面
ReactDOM.render(title, document.getElementById('root'))
1
2

方法说明

React.createElement() 说明（知道）

// 返回值：React元素
// 第一个参数：要创建的React元素名称
// 第二个参数：该React元素的属性
// 第三个及其以后的参数：该React元素的子节点
const el = React.createElement('h1', { title: '标题' }, 'Hello React')
1
2
3
4
5

ReactDOM.render() 说明

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

React 脚手架的使用

1. 初始化项目，命令：npx create-react-app my-app
2. 启动项目，在项目根目录执行命令：npm start
   

补充
npm init react-app my-app
或 yarn create react-app my-app

yarn 是Facebook 发布的包管理器，可以看做是npm 的替代品，功能与npm 相同

• yarn 具有快速、可靠和安全的特点
• 初始化新项目：yarn init
• 安装包：yarn add 包名称
• 安装项目依赖项：yarn

脚手架中使用React

导入react和react-dom两个包

特别注意react18渲染方式

import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render(<App></App>)
1
2

除此以外版本

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

// 创建元素
const h1 = React.createElement('h1',null,'我是h1标题')

// 渲染元素
ReactDOM.render(h1,document.getElementById('root'))
1
2
3
4
5
6
7
8