1. 使用脚手架创建项目
• 打开命令行窗口
• 执行命令
npx create-react-app react-basic
说明:
• npx create-react-app 是固定命令,create-react-app是React脚手架的名称
• react-basic表示项目名称,可以自定义,保持语义化
• 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.js文件作为项目的入口文件,在这个文件中书写react代码即可
• 入口文件说明
importReactfrom'react'importReactDOMfrom'react-dom'import'./index.css'// 引入根组件AppimportAppfrom'./App'// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上ReactDOM.render(
<React.StrictMode><App/></React.StrictMode>,
document.getElementById('root')
)