React环境初始化

环境初始化

学习目标： 能够独立使用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
1
2
3

2.项目目录说明调整

• 目录说明
  1. src目录是写代码进行开发的目录
  2. package.json中有两个核心库：react、react-dom
• 目录调整
  1. 删除src目录下的自带文件，只保留app.js根组件和index.js以及index.css
  2. 创建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')
)
1
2
3
4
5
6
7
8
9
10
11
12