react 组件连动效果_React 快速教程（1）：初始化项目

由于即将参加项目的缘故，需要了解学习 React 这个库。所以今天开始了 React 的学习之旅。由于我有着 Angular 和 Vue 的背景，相信学习 React 不会有太大的困难。

React 不同于 Angular，React 仅仅是一个构建动态 UI 的库。但是早有听说它的代码构建方式有点古怪，而且是典型的函数式编程，所以就认真的研究了一下其中的奥秘。

Step 1：安装Create-react-app工具并初始化开发环境

create-react-app 工具可以结合npm 和 node.js 非常方便的构建出一个 React 应用。这里不建议直接在你的HTML文件里通过 的方式导入 react 的js文件，因为那样会使得你的代码结构非常混乱，而且也不符合目前现金的MVC的开发架构。

关于 create-react-app的安装方式和说明，请参阅 React的官方文档，地址为：

https://zh-hans.reactjs.org/docs/create-a-new-react-app.html

Step 2：了解项目的文件结构

当完成第一步的安装后，会得到一个初始化的项目，里面含有很多文件，下面是初始项目的目录结构

注意：你的页面文件其实是在 public 文件夹下的 index.html

React 这个库其实是用来构建数据驱动的动态的UI界面，一般不要用react去写一些静态页面，有点大材小用。

React 去开发动态UI界面时，主要的思想是通过JSX语法定义元素，然后将元素放置在组件中，最后配合 ReactDOM 类的 render 方法来渲染该元素，将渲染后形成的动态的DOM添加到 html 里的某个div中去。

运行初始化项目后，会看到一个 React 的logo

而且明显的看到这个页面是有 CSS 效果的。那么它是怎么被渲染出来的呢？我在研究了项目的文件和代码之后，发现了一些线索。下面就让我们一起来顺通摸瓜。

我将原有的代码删除掉了，这样做是为了能够更加清晰的，一点一点的通过代码来了解 React的运行机制。

Step 3：小试牛刀

src / App.js

在这个js文件中，分别定义了元素和组件。可以从代码看出来，元素是用来定义页面的内容或者显示的元素的。而组件的基本构成是需要元素来帮忙的，即组件中如果没有明确指明元素，那么程序则无法运行。还要注意在代码的最后一行，一定到通过 export 这句话将函数式组件导出，这样其他文件才能看到这个组件，并使用。

src / App.css

这个CSS文件与普通的CSS没有什么不同。要注意的地方就是里面的类选择器或者 id 选择器需要与元素里的 className相对应，否则效果没法生效。

src / index.js

注意在这个文件的顶部，需要从 App.js 文件导入 App 这个组件。在 <>标签中可以写入组件名，React 约定自定义的组件名称第一个字母必须大写，比如这里的 。还有就是通过 document.getElementById() 方法去 index.html 文件中找到 ID 是 root 的标签。这就是渲染的最后过程，即将组件渲染为最终的html，然后加入到 root 这个根 DOM 里面去。

public / index.html

这里在 body 标签里面应该有一个 id 为 root 的 div 标签，这样 index.js 文件里的 render 才能够找到这个标签，并将渲染好的内容添加进去。

注意在 src 里的 index.js 必须与 public 里的 index.html 名称一致。

最后的结果如下

心得体会

通过这次的小试牛刀，彻底打消了我对React技术的排斥情绪。以前稍微解除过这个React，发现它的这种构建网页的方式有些古怪。但是有了 Angular 和 Vue 的经验后，回过头来再看React，发现这三个前端技术有着很多的相似之处。它们都是将视图与数据或者状态进行了分离，都是通过组件化的风格来构建页面，有了组件化的思想和代码设计风格，日后的组件复用就可以轻松的实现了。

再谈一谈我对React的感觉吧。这次构建的组件仅仅是展示了内容而已，并没有涉及到State、事件处理、表单的数据处理等方面，这是以后要了解的东西。React关注的点我感觉其实是页面上能够与用户交互的部分，比如动态数据显示、表单、不同条件下呈现不同的内容。更多的是在开发Web应用，而不仅仅是一个页面或者网站。