环境初始化
学习目标: 能够独立使用React脚手架创建一个React项目
1.使用脚手架创建项目
官方文档:(https://create-react-app.bootcss.com/)
- 打开命令行窗口
- 执行命令
npx create-react-app projectName
说明:
1. npx create-react-app 是固定命令,create-react-app
是React脚手架的名称
2. projectName 是项目名称,可以自定义,应保持语义化
3. npx命令会帮助我们临时安装create-react-app包,然后初始化项目完成后会自动删除,所以不需要全局安装create-react-app
- 启动项目
yarn start
or
npm start
2.项目目录说明调整
- 目录说明
src
目录是写代码进行开发的目录package.json
中有两个核心库:react、react-dom
- 目录调整
- 删除src目录下的自带文件,只保留app.js根组件和index.js以及index.css
- 创建index.js文件作为项目的入口文件,在这个文件中书写react代码即可
- 入口文件说明
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 引入根组件APP
import App from './App'
// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
ReactDOM.render(<React.strictSode><App /></React.strictSode>document.getElementById('root')
)