React脚手架的使用

React脚手架意义

1. 脚手架是开发现代 Web 应用的必备
2. 充分利用 webpack, babel, ESLint 等工具辅助项目开发
3. 零配置,无需手动配置繁琐的工具即可使用
4. 关注业务,而不是工具配置

使用React脚手架初始化项目

1.初始化项目,命令:

npx create-react-app my-app

如果初始化项目时出现 ERROR404 错误,尝试将 npm 版本改为 8.4.1

npm i -g npm@8.4.1

2.启动项目,在项目根目录执行命令:

npm start

npx命令介绍

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

补充说明

1. 推荐使用: npx create-react-app 项目名称
2. npm init react-app my-app
3. yarn create react-app my-app

• yarn 是 facebook 发布的包管理器,可以看作是 npm 的替代品,功能与 npm 相同
• yarn具有快速,可靠和安全的特点
• 初始化新项目: yarn init
• 安装包: yarn add 包名称
• 安装项目依赖项: yarn
• 等等

在脚手架中使用React

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

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

2. 调用 React.createELement() 方法创建 react 元素

3. 调用 ReactDOM.render() 方法渲染 react 元素到页面中

在项目根目录的 src 下的 index.js 中,写入如下代码:

// 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 创建 react 元素
const title = React.createElement('h1', null, 'Hello React !')

// 渲染 react 元素
ReactDOM.render(title, document.getElementById('root'))