### 1.找到需要创建项目的工作目录:
Shift+右击,运行PS:md/mkdir yarn+webpack+react
PS: cd yarn+webpack+react (可以结合tab使用)
### 2.init
PS:yarn init
PS:...输入项目的相关信息
在文件夹下可以找到package.json文件
### 3.server
>往package里写入server启动相关的依赖
```powershell
PS:yarn add httpster
PS:yarn add opener -D
PS:yarn add webpack
```
注意:我使用的webpack为4.29.0
package中加入命令
```json
"scripts": {
"start": "opener http://localhost:3001 & httpster -p 3001 -d ./dist"
}
```
### 4.index.html
PS: md dist
PS: cd dist
PS: New-Item index.html
打开index.html 放入如下代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<title>init index</title>
</head>
<body>
<div id="react-container">初始化index.html</div>
</body>
</html>
```
### 5启动
PS: yarn start
此处可以打开浏览器,并且同事看到效果
![](https://box.kancloud.cn/491daa66296a740ed786fe329ac921d7_1133x738.png)
- React进阶
- React进阶-组件 & Props
- React进阶-组件 & Props - 代码篇
- 组件扩展-组件生命周期
- 组件扩展-组件生命周期-代码篇
- React-Redux
- Redux入门教程-基本用法
- Redux入门教程-基本用法-代码篇
- Redux入门教程-中间件和异步操作
- Redux入门教程-React-Redux 的用法
- Redux入门教程-React-Redux的用法-代码篇
- ES6-变量的解构赋值
- 数组的解构赋值
- 对象的解构赋值
- React用法
- JSX技巧
- ES6-神奇的...
- yarn+webpack+react零基础创建项目
- 0-init
- 1-webpack.config.md
- 2-react相关依赖
- 3.编写react相关代码
- pnpx-react-config
- pnpx+create-react
- pnpm+react-config
- pnpm+react-antd