手动创建react项目

项目结构

1. 创建项目，目录结构如下：

- public
  - index.html(添加根元素<div id="root"></div>)
- src 
  - App.js
  - index.js

2. 进入项目目录，执行 npm init -y 或者 yarn init -y命令

3. 安装项目依赖

npm i react react-dom react-scripts -S
或
yarn add react react-dom react-scripts -S

4. 运行启动命令

npx react-scripts start

5. 配置package.json,添加启动命令

"script": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

配置好启动命令后就可以通过我们设置的命令运行

npm start  启动项目

npm build  打包,会生成build目录

目录结构：

使用脚手架创建react项目

create-react-app 是基于 webpack + ES6创建的

安装 create-react-app

npm i create-react-app -g
或
yarn add create-react-app -g

通过create-react-app创建项目

create-react-app react_webpack  // 这里react_webpack为自定义项目名称

执行完毕后，进行项目根目录启动项目

cd react_webpack

npm start

目录结构