一、搭建脚手架
1、使用脚手架搭建工程
react常用搭建方式有两种:
官方:create-react-app
第三方:next.js
、umijs
这里我们刚开始接触react,所以使用官方的脚手架。
2、创建项目
使用yarn create react-app ***
即可创建react项目,如果未安装yarn,可使用npm install -g yarn
命令先安装yarn。
接着使用yarn start
启动我们的react工程。
其中index.js就是我们的入口文件。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>hello world</h1>, document.getElementById('root'));
我们在index.js中使用jsx语法,创建一个h1的react元素;(甚至将index.js改成index.jsx一样可以)
二、开发环境配置
由于在react开发中,需要经常在js中书写html一样的代码,所以我们需要对开发环境进行配置。
博主这里使用的是vscode编辑器。
首先设置vscode
打开vscode的首选项——》设置——》搜索emmet。
输入该配置即可,这样我们可以快速创建react元素。
接着是安装插件
最后是谷歌插件
科学上网后安装谷歌插件。
博主开始运营自己的公众号啦,感兴趣的可以关注“飞羽逐星”微信公众号哦,拿起手机就能阅读感兴趣的博客啦!