React新手入门

之前用React几乎是从零开始敲了一个比较简单的可视化系统，所以决定在这里整理一些相关的知识点，讲就不展开讲啦，但是会附上链接。同样也是新手友好。

因为我自己也是新手+菜鸟，所以讲错的地方希望大佬们轻喷。。

预备知识

首先用React之前还是建议大家掌握最基本的html、JavaScript还有Css。会让整个过程舒服很多。当然我自己也是边敲边熟悉的，就是用到什么了才去搜关键词细看。

这里推荐几个个人觉得讲得不错的链接~

RUNOOB
W3School

开发环境

我是通过npm来安装react，用create-react-app开发环境，然后在vscode里写的。

对于完全不了解前端的人来说（比如之前的我），一开始容易被一大串脚手架啊开发环境啊npm啊cnpm之类的东西看懵，但后来发现其实也差不多就是这些固定流程，只要一开始熟悉了（背住这些指令），后面就基本不用动脑子。

具体安装步骤，我觉得下面这个链接就写得不错，基本差不多~

npm以及create-react-app安装

在vscode里，也可以安装react相关的tool，我自己的那个就叫react。

在命令行里创建完工程后，用vscode打开那个项目就可以编辑了。不过每次要保存一下，才能在网页上看到更新。

注意一点，npm对含中文、空格的路径是不友好的，所以大家在workspace目录、文件名设置的时候注意一下命名规范。

React学习

我觉得react官方文档实在是太美好的学习手册了！这个宝藏资源大家一定要码住！

官方文档里有很细的知识点，也有一个边做边学的项目。我个人是觉得最开始可以跟着边做边学的项目走一遍，但是还是把细碎的知识点都掌握好了，后面写自己的项目的时候才不会踩很多非常基础的坑却不自知。

react新手教程

一定要把这个网址翻透！讲解超级细！界面超级好看！交互很友好！

别的react学习网站我就没啥特别推荐的了。但是有一个问题那就是，看完官方文档以后可能不一定很清楚具体一个项目要怎么handle~所以建议自己再找些react项目看看它们的文件结构，看它们都是怎么封装组件，怎么把css和js友好协调起来的。github上应该有很多，我这里就不单独列啦。

组件网站

有几个神仙组件网站，如果本身对UI的要求不是特别苛刻，这些UI组件基本够用。使用方法的话，就是把它代码展开，然后复制到自己的工程下面就好。

它们都是支持个性化样式修改的，个人感觉material-ui的个性化修改比antd的简单。

在使用这些ui库之前，记得用npm安装相关依赖，具体怎么安装，在这些ui库的官网上都有，照抄就行~

material-UI

antd

如果是图表的话用这个（虽然我觉得echarts具体怎么用也可以单独开一个文章来讲）：

echarts

开发小tips

这个也是我看大佬操作时学的。就是很多时候不知道怎么debug，就可以在代码里写console.log("123",my_test_variable)，输出my_test_variable的值来检查。

这时在网页界面上，通过按F12就可以看到这个输出结果了。就是下面这个界面，蓝色的右箭头后面会看到输出（我没有打开工程所以没有输出~）。

其中“123”太重要了，因为工程越来越大，console.log的东西越来越多的时候，靠肉眼找会很麻烦，所以在上面那张图那个眼睛的右边，line2ITEM，这个关键词就是我设置的过滤词，它存在的意义和"123"一样，就是为了快速筛选出我们想测试的变量值。

还有一个就是查看每个元素的大小。在网页界面上，右键，按检查，就可以方便地对元素大小进行检查，也能很清晰地看到页面布局。比如我之前写代码的时候就遇到了元素遮挡，于是对鼠标点击事件不响应的问题，就是通过检查，看每一个元素的大小，才找到了遮挡源头。

---

emmm基本上react开发入门的话好像就是这些知识啦。感觉最有用的还是ui库（笑

大家加油哇！！