1. react 起始 | 2020 年前端再入门系列连载



2020年准备用实现一个点子做个demo，才发现原来前端那一套都已经变了。什么AngularJS、grunt、gulp都不推荐使用了，于是只能重头再来学习react框架，这才有了这个系列，希望完整记录从开始到搭建demo完毕的全过程。这个系列适合有一定前端开发经验的人阅读，一些基本概念不会进行普及讲解。

一、开发环境搭建

1、 安装 vscode

2、安装 nvm、安装nodejs和npm

3、安装 git

二、项目起始

1、包管理 yarn vs npm

推荐使用npm，可以直接使用npx来执行 create-react-app 脚手架，该框架会安装react、react-dom和react-scripts。其中yarn是与npm无关的包管理工具，需要单独安装哦。

由于npm国内实在太慢，建议改用cnpm来安装，可以执行

echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \ --cache=$HOME/.npm/.cache/cnpm \ --disturl=https://npm.taobao.org/dist \ --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc



现在就可以开始搭建项目啦，当然还缺少必要的redux状态管理

2、编译打包 webpack与babel

其中react-scripts会配置webpack和babel，用来编译打包，可以运行npm run eject来启用自定义配置。执行后会把隐藏的config和scripts文件夹暴露出来，比较关键的是config文件夹中的webpack.config.js集中配置。

比较奇怪的是babel为啥不需要配置？原来是写到了package.json里面，规定babel使用了预设模板presets: react-app

另外用于单元测试的框架 jest 也配置了。

一切已经就绪，运行npm start即可自动打开浏览器运行程序进行调试咯。