来自一位react新手的react入门须知

Posted 2023-03-15

参考技术A

所有的html，css都可以写在js中，这就是jsx的用法。

用于验证数据的类型是否是满足你的需要,不过我在现有的项目中没有特意的指定数据的propTyoe，因为这些都是前后端约定好的。

此用法如下图 ：

这个如同vue组件里面的props中的type：Array这个一样

这个与vue-router差不多，大家可以看文档。

react-router的中文官网 ： 中文官网

因为react与vue一样，都是使用vitural-dom，没有处理dom节点，从而大大提高了页面的渲染效率。

当你想要获取真实的dom节点的时候，可以使用ref，具体的使用，可以看阮一峰的react入门，我下面的todolist的demo里面也会涉及到。

不过在你使用无状态组件申明组件的时候，ref在这个组件中是不能使用的。

可以通过webpack安装各种依赖，我使用的最爽的一个就是react-hot-loader，就是热更新，非常好用。不过热更新其他的工具，比如 browser-sync ,下面是一些文档。

如vue的vue-cli脚手架， create-react-app ]( https://github.com/facebookincubator/create-react-app )，使用以上方法的话，与vue-cli脚手架工具类似

我自己的一些总结，单单学react是不难的，难的是要和一些工具混合来用，往往这个过程的成本最高。比如使用webpack构建，redux管理状态， redux-thunk 或者 redux-saga 来处理异步action。

还有一个很大的趋势就是前端变化很快，拿 react-router 来说，你做了一个项目， react-router@2.0.0 是能完美跑起来的，但是换成了当换成了 react-router@3.0.0 ，基本上就跑不起来了，更何况现在的 react-router 已经出到4.0，

相应的 webpack 也是这样，当时一些开发者基于 webpack1.0 开发的，当webpack升到2.0的时候， webpack.config,js 里面的文件要重新配置了。现在 webpack 已经更新到了3.0。

2， 阮一峰的文档： react的入门 ，webpack的入门， react-router

3，react的一些框架和一些轮子：

4，一个渐进的学react的demo。

里面基本上涉及到了，react入门的所有涵盖的知识，他都是自己搭的，没有使用脚手架工具。里面也涵盖了webpack的一些配置，对于新手学习蛮好的。

​

1，jquery、vue、react的todolist，最简单的

2，基于ant-dedign的一个react简单的demo

3,基于react写的一个简易大众点评的demo，里面用到了redux，mock，fetch，es6