React 的安装
安装命令:
npm init
npm i react react-dom
- react 包是核心,提供创建元素、组件等功能
- react-dom 包提供 DOM 相关功能等
React 的使用
此处使用
“react”: “^16.8.6”,
“react-dom”: “^16.8.6”
- 引入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>
- 创建React 元素
// 创建元素节点
// 1. 元素名称
// 2. 元素属性 传递的是个对象
// 3. 元素内容
const title = React.createElement('h1', { title: '标题' }, 'Hello React')
- 渲染React 元素到页面中
// 渲染到页面
ReactDOM.render(title, document.getElementById('root'))
方法说明
React.createElement() 说明(知道)
// 返回值:React元素
// 第一个参数:要创建的React元素名称
// 第二个参数:该React元素的属性
// 第三个及其以后的参数:该React元素的子节点
const el = React.createElement('h1', { title: '标题' }, 'Hello React')
ReactDOM.render() 说明
// 第一个参数:要渲染的React元素
// 第二个参数:DOM对象,用于指定渲染到页面中的位置
ReactDOM.render(el, document.getElementById('root'))
React 脚手架的使用
- 初始化项目,命令:npx create-react-app my-app
- 启动项目,在项目根目录执行命令: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>)
除此以外版本
import React from 'react'
import ReactDOM from 'react-dom'
// 创建元素
const h1 = React.createElement('h1',null,'我是h1标题')
// 渲染元素
ReactDOM.render(h1,document.getElementById('root'))