一.环境准备:
1.下载安装VSCode,Node.js,Yarn
网址如下:1.VSCode:https://code.visualstudio.com/
2.Node.js:https://nodejs.org/en/
3.yarn:https://yarnpkg.com/en/docs/install
2.将npm镜像改为淘宝cnpm:
1.得到原本的镜像地址:
npm get registry
> https://registry.npmjs.org/
2.设置成淘宝的(超级管理员):
npm config set registry http://registry.npm.taobao.org/
3.换成原来的:
npm config set registry https://registry.npmjs.org/
二.开始构建项目:
3.打开终端,输入yarn global add create-react-app 安装react的脚手架create-react-app
4.打开VSCode的Extensions搜索下列插件,安装插件
必要:ESLint、DocumentThis、EasyLess、Complete JSDoc Tags、vscode-flow-ide、React native Tools、vscode- wechat、npm、babel-javascript、debugger for chrome、git lens、node debug
可选:javascript (ES6) code snippets、reactjs code snippets、react-native/react/redux snippets for es6/es7、highlight bad chars、color highlight、Path Intellisense、partial diff
5. 利用VSCode新建第一个React项目
1、VSCode编辑器中使用快捷键ctrl+`打开终端
2、在终端输入create-react-app demo,自动创建名称为demo的项目
3、cd demo进入demo项目中
4、yarn start或yarn build运行项目
5.此时,一个React项目就搭建成功。使用VScode搭建React要简单很多,配置信息都可以省去。直接开始编写组件就可以 了。
三.React基础巩固:
7.react入门教程:
1.快速上手:http://www.runoob.com/react/react-tutorial.html
2.ES6学习:http://es6.ruanyifeng.com/#docs/intro
3.视频入门
百度传课,腾讯课堂,网易课堂,盘多多直接搜百度网盘(http://www.panduoduo.net/)
需要简单的了解ES6:https://study.163.com/course/courseMain.htm?courseId=1003594007
####参考文献:
1. https://blog.csdn.net/qq_35938548/article/details/79107160 ——VSCode使用教程
2.https://www.cnblogs.com/zycbloger/p/6210049.html ——npm改成cnpm
3.https://blog.csdn.net/github_squad/article/details/57452333 ——第一个react项目
4.https://www.jb51.net/article/138067.htm ——手动搭建React项目
5.https://blog.csdn.net/u012805132/article/details/80537319 ——创建第一个react项目