react学习—搭建脚手架和开发环境配置

一、搭建脚手架

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元素。

接着是安装插件

最后是谷歌插件
科学上网后安装谷歌插件。

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！