React应用--基于React脚手架

使用前需要安装 node.js

官网：下载 | Node.js 中文网

安装 yarn   npm install --global yarn

官网：安装 | Yarn 中文文档

使用create-react-app创建react应用

react脚手架

• xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
• 包含了所有需要的配置（语法检查、jsx编译、devServer…）
• 下载好了所有相关的依赖
• 可以直接运行一个简单效果
• react提供了一个用于创建react项目的脚手架库: create-react-app
• 项目的整体技术架构为: react + webpack + es6 + eslint
• 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

创建项目并启动

第一步，全局安装：npx create-react-app my-app（要是失败后可以重试一下，可能网络的原因）

npx是一个工具，npm v5.2.0引入的一条命令（npx），一个npm包执行器，指在提高从npm注册表使用软件包时的体验 ，npm使得它非常容易地安装和管理托管在注册表上的依赖项，npx使得使用CLI工具和其他托管在注册表。它大大简化了一些事情。

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

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

第四步，启动项目：npm start

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库的支持)

PS：

1.package.json  主要描述当前应用

• 1.标识
• 2.依赖
• 3.运行/打包

2.index.js  index.html  app.js

• index.js 入口js
• index.html    document.getElementById('root') // root的标签在index.html中
• app.js 具体的组件

3.动态初始化列表，如何确定将数据放在哪个组件的state中？

• 某个组件使用：放在其自身的state中
• 某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）

​ 4.关于父子之间通信：

• ​ 【父组件】给【子组件】传递数据：通过props传递
• ​ 【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数