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

用户头像
chaozh
关注
发布于: 2020 年 07 月 14 日



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即可自动打开浏览器运行程序进行调试咯。



发布于: 2020 年 07 月 14 日 阅读数: 61
用户头像

chaozh

关注

还未添加个人签名 2017.10.19 加入

还未添加个人简介

评论

发布
暂无评论
1. react起始 | 2020年前端再入门系列连载