React 脚手架与react的使用

react脚手架的使用

目标：掌握如何使用react脚手架创建react项目

内容

• create react app（CRA）是FaceBook的React团队官方出的一个构建React应用的脚手架工具
• 命令：npx create-react-app react-basic
  • react-basic 表示项目名称，可以修改
• 启动项目：yarn startor npm start

• npx是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用
  • 原始：1 全局安装npm i -g create-react-app 2 在通过脚手架的命令来创建 React 项目
  • 现在：npx 调用最新的 create-react-app 直接创建 React 项目

总结

• create-react-app是react官方提供一个脚手架工具，用于创建react项目
• 通过npx create-react-app react-basic命令可以快速创建一个react项目

react 的基本使用

目标：掌握react的基本使用功能步骤

内容

1. 导入react和react-dom
2. 创建react元素(虚拟DOM)
3. 渲染react元素到页面中

核心代码

//第一步 导入react和react-dom两个包
import React from 'react'
import ReactDOM from 'react-dom'

//第二步 创建 react元素
//参数1 要创建标签名称  参数2 元素自身的属性 没有null 有则传对象
//参数3 表示元素的子节点
const h1 = React.createElement('h1', { title: '我是标题' }, 'hello react')

//第三步 渲染 react元素
ReactDOM.createRoot(document.querySelector('#root')).render(h1)

总结

1. react脚手架已经安装了react和react-dom的依赖包，不需要额外安装依赖包