- 环境配置
1.两点支持:JSX支持、ES6支
2.这里我用的是vscode Mac版:
首先安装:
1.VSCode:https://code.visualstudio.com/
2.Node.js:https://nodejs.org/en/
3.yarn:https://yarnpkg.com/zh-Hans/docs/install#mac-stable
安装说明https://www.jb51.net/article/95630.htm
3.修改npm为淘宝镜像cnpm:(指令如下)
查看镜像地址:npm get registry
设置成淘宝镜像:npm config set registry http://registry.npm.taobao.org/
还原镜像地址设置:npm config set registry https://registry.npmjs.org/
参考https://www.jianshu.com/p/eb85ec1a1e10
(注意只需要查看镜像地址,如果不是淘宝镜像输入指令设置,无需输入还原指令,之后不使用时,可通过还原指令将镜像设置回来)
- 构建demo项目
1.终端输入指令yarn global add creat-react-app 安装react的脚手架creat
(如果返回command not found时,用命令npm init react-app my-app创建)
2.打开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
3.输入create-react-app demo,创建名为demo的项目;
Vscode打开demo项目;
终端或者vscode自带的终端输入cd demo 切换到项目;
输入yarn run start或者yarn run build运行项目
输入yarn run watch 刷新项目(刷新项目修改内容)
- JSX支持
1.JSX是一种JavaScript的扩展语法,理解为可以在JavaScript代码里面可以编写类似HTML标签结构的语法;编译的过程会把类似HTML的JSX结构转换为JavaScript的对象结构。
未完待续。。。