[React]Day08—使用create

[React]Day08—使用create

[React]Day08—使用create-react-app创建react应用

• • • • 一、创建项目并启动
      • 二、 react脚手架项目结构
      • 三、功能界面的组件化编码流程（通用）

一、创建项目并启动

第一步，全局安装：npm i -g create-react-app

第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

第三步，进入项目文件夹：cd hello-react

第四步，启动项目：npm start

Mac 第一步需要加上 sudo，不然会报错 [permission denied]

sudo npm i -g create-react-app

webpack 版本不对，要根据提示安装对应的版本，报错请看这篇

下面是完全卸载webpack，再重新安装

1. 安装 在全局下安装：npm install webpack -g

   安装指定版本：npm install webpack@<version> -g

   例如：npm install webpack@3.4.1 -g

   如果只是用来练习全局安装就可以了，一开始装了个4.8.3版本的，node也是最新的npm也好着，一做项目就出现错误，4.*.*版本以上还需要安装另外一个东西，具体的可去webpack官网看。

   最后只能把webpack删除，重新装了一个指定版本的，才没有什么问题了。

2. 删除在全局下删除 npm uninstall webpack -g

   最好将项目目录下的node-modules一起删除，否则会有残留文件影响下一次的结果。

原文链接：

二、 react脚手架项目结构

• public ---- 静态资源文件夹
  • favicon.icon ------ 网站页签图标
  • index.html -------- 主页面
  • logo192.png ------- logo图
  • logo512.png ------- logo图
  • manifest.json ----- 应用加壳的配置文件
  • robots.txt -------- 爬虫协议文件
• src ---- 源码文件夹
  • App.css -------- App组件的样式
  • App.js --------- App组件
  • App.test.js ---- 用于给App做测试
  • index.css ------ 样式
  • index.js ------- 入口文件
  • logo.svg ------- logo图
  • reportWebVitals.js （ 页面性能分析文件，需要web-vitals库的支持)
  • setupTests.js（组件单元测试的文件，需要jest-dom库的支持)

三、功能界面的组件化编码流程（通用）

1. 拆分组件:
   拆分界面，抽取组件
2. 实现静态组件:
   使用组件实现静态页面效果
3. 实现动态组件
   动态显示初始化数据，数据类型，数据名称，保存在哪个组件? 实现交互(从绑定事件监听开始)