React脚手架-从零开始创建项目

创建方式1

1. 先全局安装脚手架工具包

   命令：npm i -g create-react-app

2. 用脚手架工具来创建项目

   命令：create-react-app your-project-name

创建方式2 

 直接使用npx来创建项目

命令：

npx create-react-app your-project-name

解释：

• npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称

• your-project-name 表示项目名称，可以修改

 方式2创建优点在于你下载的包都能保证是最新的

拓展

1. npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用

2. 没有npx之前：

   1. 全局安装npm i -g create-react-app

   2. 在通过脚手架的命令来创建 React 项目

3. 有了npx之后

   npx 调用最新的 create-react-app 直接创建 React 项目

下包 

npm i axios 

npm i redux  //  集中式存储和管理应用的状态

npm i react-redux // 依赖redux  优化redux 

npm i eslint typescript -D // eslint 需要额外配置可以看我另外一篇

npm i redux-thunk // redux-thunk 中间件允许redux处理函数形式的 action。

npm i redux-devtools-extension -D  // 通过chrome开发者工具调试跟踪redux状态 需要安装react开发者工具（chrome浏览器插件）

React脚手架-了解项目的工作方式

启动项目

npm start

目录src

 

说明：

• src 目录是我们写代码进行项目开发的目录

• index.js是入口文件

• 查看 package.json 两个核心库：react、react-dom（脚手架已经帮我们安装好，我们直接用即可）

调整

1. 删除 src 目录下的所有文件

2. 创建src/index.js, 内容如下：

console.log('我的第一个react项目跑起来啦') 

工作原理

webpack会实时自动打包，并把代码嵌入到public/index.html文件中，并执行。