React的理解

React的理解总结在以下公式中。 UI=render(data )式表达的含义可以理解如下。 用户正在查看的接口) ui应该是名为render的函数的结果，它只接受数据作为输入) data )。 这是纯函数。 纯函数是指没有副作用，完全依赖于参数的函数。 如果两次函数调用的输入相同，则得到的结果页绝对相同。 因此，如果确定了render函数，最终的用户界面将完全依赖于输入数据。 对开发者来说，重要的是区分哪个属于data，哪个属于render，如果想要更新用户界面，就会更新data，用户界面自然会做出响应，所以react说“ 下面的截图是一个简单的组件结构，可以看到里面只有一个render函数。 它返回一个DOM元素，可以得出组件中可以没有其他东西，但render一定要有。 稍后将介绍data数据的由来。 。

组件的基本屏幕快照

create-react-app脚手架

create-React-app是业界最好的react APP开发工具之一，本文在使用create-react-app创建的项目中使用了antd组件，并使用了各种引擎1、安装webstorm Noje.js (全球安装)

具体的安装步骤请参阅官方网站

2、在全局安装create-react-app支架，执行以下命令即可

1.1 NPM安装-----全球创建-即时-应用程序安装以上的支架

1.2执行指令create-react-app my-react-demo执行指令和项目名称

1.3打开生成的项目，运行npm start启动项目。 默认的访问目标为http://localhost:3000

注：这里可以使用cnpm代替npm

NMP安装插件从NPM的官方网站下载对应的插件软件包。 这个网站的服务器在国外，经常下载慢，或者发生异常。 在这种情况下，需要找到其他提供稳定下载的方法。 这个方法就是CNPM。 阿里巴巴淘宝团将NMP官网的插件同步到中国服务器上，为我们提供了从该服务器稳定下载资源的服务。

CNMP也是NMP的插件，必须在CMD命令行控制台上运行以下命令才能进行安装：

npminstallcnpm--注册=https://注册. NPM.Taobao.org

安装完成后，可以使用cnpm -v命令显示版本号。 要使用cnmp命令，建议在安装后重新打开CMD命令行控制台。 CPM的使用方法与npm的使用方法一致，但执行命令时将npm变更为cnpm。

执行工程指令效果图的制作

效果图

初始化工程结构

node_modules是所有依赖组件库的集合，类似于后端Java的外部库。 以下idea屏幕截图 )。

电子地图

日本航空运输公司

公共/索引. html是项目开始后页面的入口，数据的旋转渲染也是基于其入口的id=root的节点DOM元素SRC /索引. JS是react组件挂载的入口，

工序图

如

package.json结构解析

右图所示，package.json的主要结构是，我们主要

了解 dependencies 和 scriptsdependencies里面主要是添加的依赖，key为依赖包名，value为依赖包的版本；开发者可以在这里面配置好后执行npm install 命令后就可以下载对应的依赖，当然也可以选择直接用命令添加依赖，命令为 npm install xxx –save ，执行后工程在下载完后，也自动将依赖添加到 dependencies，这里注意一点，命令所添加的依赖版本都是最新版本。scripts 为脚本对象集，react-scripts 是create-react-app 添加的一个npm包，所有的配置文件都隐藏在node_modules/react-scripts 目录下。这里除了npm自带的命令之外，开发者还可以自定义脚本命令；工程初始化是主要为以下几个命令1.start 为启动命令，执行 npm start 时工程会调用 react-scripts start 这个命令启动工程 2.build为构建命令，当工程需要发布上线时，一般会执行 npm build 这个命令，工程中调用 react-scripts build 命令进行构建生成压缩文件 3.test 为测试包命令，用于单元测试 4.eject （弹射），这个命令比较有意思，执行它时所做的就是把隐藏在react-scripts中的一系列技术栈配置都“弹射”到应用的顶层，然后我们就可以研究这些配置细节了，还可以更灵活地定制应用的配置 注意： eject 命令是不可逆的，就想驾驶员“弹射”出驾驶舱，就等于放弃了飞机的驾驶权，是不可能在回到驾驶舱继续驾驶的，所以在使用该命令是，最好做一份备份 5.其他命令感兴趣的小伙伴可以自己百度了解一下以下为总结截图

package.json图

eject命令

执行cnpm run eject 命令，进行技术栈的“弹出”，工程的结构变化如右图；我们可以看到左侧导航栏多了config目录和scripts目录；右侧package.json 配置文件中，scripts 里面的命令映射也发生了改变，都映射到csripts目录下的三个文件，而dependencies里面多了很多依赖，这是因为eject命令将底层的依赖都移动到了应用的顶层，让开发者可以自由选择在未执行以上命令之前，工程启动的端口号为默认的3000，我们在工程是找不到该端口号的，执行eject命令后，我们可以在scripts/start.js文件中找到了该端口号，并将之改为3030

端口号图

config 目录下均是一些工程初始化的配置文件，我们暂时无需关系以下为总结截图

eject命令后的package.json图