React由Facebook开源的前端框架

React是目前前端比较流行的一个框架，由Facebook开发出来的。React有着良好的性能，目前在国内大厂很流行。话不多说我们就从一个todoList小案例来开始上手吧。

创建项目

首先我们要选择一个创建项目的位置，在集成终端打开，然后输入npm init vite，按照一系列的操作选择React，JavaScrpit等，最终看到如下，就说明你已经成功创建了一个React项目。

项目结构

我们使用vite创建了一个脚手架项目，项目对应的结构如下。我们作为开发者，主要就是在src目录下进行开发。

组件开发

在React中是强调组件开发的，我们不可能把所有的代码放在一个文件里面。随着代码的变多，以后维护起来也会很麻烦。而组件化开发的优势就能够很好体现，把一个大项目拆分成一个个小部分组件。这样就从大的代码里面抽离出来，便于以后的维护以及复用。在todoList里面，我们可以拆分成头部组件，主体组件两个部分。

在头部中，用一个h1标签包裹一个大标题，然后就是一个输入框了。在这个输入框和按钮中里面有很多细节要注意，首先就是要去除按钮点击的默认行为，每当点击按钮都会默认刷新页面提交数据，这对我们的功能是有很大影响的。其次，我们要绑定输入框的值进行双向绑定。随着输入进输入框，我们要改变输入框的状态。最终，点击按钮通知父组件更改todoList。在React中，数据是单向流的，即子组件不能更改父组件传递的数据。每当子组件想要更改数据，只能够利用父组件传递的函数，来通知父组件更改数据确保数据的单向流动。在主体部分，主要的任务就是把todoList列表渲染出来，这很简单就不多说了。

样式优化

在React中，我们可以选择自己习惯的预编译语言Sass或Less在对应的CSS文件编写，然后将其引入至对应的组件文件中。

Ending

以上内容就是React的初体验了，React总体上比Vue难一点。但是二者都是基于JavaScrpit开发的，所以核心还是要对JS有深刻的理解并需要懂得Vue和React的设计理念，这样我们就能很好的掌握二者，便于以后在面试中脱颖而出。