初识React

与Vue对战

与Vue相比，React更注重View层，更接近原生的javaScript，所以对js的要求就更高一些。在API方面，React没有像Vue一样有很多需要记忆的地方，所以在初次上手时React会相对简单一些。

React和Vue最大的不同之处就是模板的编写。React使用JSX语法，一种基于JavaScript和XML的扩展语法。那么何为JSX？它是JavaScript和Html的语法糖，以前我们用js代表行为，html代表内容，分别在不同的文件实现，使用JSX可以在同一文件运用js编写像html一样的代码，这就使我们更直观的可以看到dom结构。而Vue是通过HTML模板进行编写，使用起来更接近标准的HTMl，然后通过一些指令来修改模板。

所以两者各有千秋，如非要在这场博弈中争个输赢，就个人而言还是更喜欢React的编码风格，毕竟少记很多API呢。

从Hello World了解create-react-app脚手架

众所周知，如今前端项目最大的特性就是模块化，而使用模块化就不得不用脚手架。React.js项目可以通过Create React App快速生成，即开即用，不需要再使用npm包管理进行依赖安装。

安装并启动

项目启动，就会自动开启3000端口。如果正在使用3000端口则会问你是否开启一个新的端口，就会顺延依此往下开启。如下就是创建好的react.js的项目目录：

src文件夹下index.js为项目的入口文件，此文件不可删除。除此之外都可以删除，但需要注意的是index.js中需要一个根组件挂载到root上，所以同时还需要一个根组件，通常我们以App.js命名。

效果图：

就这样一个简单的hello world就通过react.js项目展现出来了。

独立的redux

如果问一个前端项目主要的核心是什么，我觉得对数据的状态管理应该占绝大部分。对于React而言，没有单独的状态管理库，即使是React-redux也需要配合着redux使用。所以说redux是一个独立的JavaScript状态管理库，它可以和react一起使用，也可以和其他界面库一起使用。

状态管理库的三大作用：初始化数据、存储数据、修改数据。针对这三大作用，redux分别提供了state、reducer、action和store仓库来对数据进行管理。

如何通过react-redux在react.js项目中使用redux?

引入

使用

useSelector用于获取state, useDispatch用于获取dispatch, useStore提供了5个函数用于获取和操作store，但一般很少用到。

精髓之react-router-dom

要使单页面应用在本地运行并跳转，Router在其中起到了决定性的作用。在react.js项目中实现router,可以直接使用React Router库。React Router基于Web和Native两种不同环境提供了不同的路由库。基于Web提供了react-router-dom路由库，基于Native提供了react-router-native。这次主要介绍react-router-dom。

根据不同切换机制，react-router-dom提供了不同的组件。

无论哪种机制，都需要在根组件最外层进行包裹。如何将页面和路由进行正确匹配？react-router-dom提供了Router组件将view与url配对。

如要使用route中的props，就不能使用component属性来指定页面，而需要使用render函数通过参数routeProps来指定渲染页面

<Routerpath="/b/:id"render={(routeProps)=>{

return<BPage{...routeProps}/>

}}/>

需要注意Router组件中path是模糊匹配，即当path分别为'/','/a'时，如果请求的页面是'/a'，那么也会跳转到'/'页面。所以要使得url精确匹配需要加上属性exact。

react-router-dom提供了Link、NavLink组件进行跳转

NavLink和Link一样，都使用to进行页面切换。NavLink提供了更多的属性来展示tab: ativeStyle和activeClassName都是用与激活的样式展示，isActive函数可以用于自定义激活条件。

页面与页面间的跳转可以通过函数组件的props属性实现。