React基础

React的基本使用

React安装

• 安装命令：npm i react react-dom
  • react 包是核心，提供创建元素、组件等功能
  • react-dom 包提供 DOM 相关功能等

React的使用

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>

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

<div id="root"></div>
<script>
const title = React.createElement('h1', null, 'Hello React')
ReactDOM.render(title, document.getElementById('root'))
</script>

使用 React 脚手架初始化项目

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

在脚手架中使用 React

1. 导入 react 和 react-dom 两个包。

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

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