前言

好的姿势可以让学习更愉快，下面教大家怎么搞一个舒服的姿势来学React。包含了自动编译jsx、自动热更新

目录说明

创建一个文件夹里面包含以下的文件夹：
src----下面每个文件夹是一个知识点
dist----babel打包后的js文件

在src下按照学习阶段来新建文件夹，比如：1-setup，这个文件夹里面再放你的代码，比如index.html、index.jsx等等

开始

使用最原始的方法直接在html中引入js的方法来引入react文件。
jsx文件需要使用babel来进行编译成js文件才能被使用

<!-- 可自行修改版本号，如：react@18改成react@17、react-dom@18改成react-dom@17 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 加载我们jsx编译后的js文件 -->
<script src="../../dist/1-setup/index.js"></script>

安装babel包

# 安装babel和babel-react预设
npm install -D babel-cli@6 babel-preset-react-app@3

安装live-server热更新

npm install -D live-server

因为要同时开启babel命令来监听jsx文件，还要同时启动live-server来热更新打开的页面，所以需要安装一个npm包来并行执行多条命令

npm install -D concurrently

编写命令

在package.json文件中的scripts加入命令babel --watch src --out-dir dist --presets react-app/prod

参数：
--watch 监听，只要有文件修改就自动编译jsx文件
src 包含jsx文件的目录
--out-dir dist 输出到dist目录下
--presets react-app/prod 配置babel的presets选项

总的：使用babel命令，并配置presets选项的值为react-app/prod 自动监听src目录下的jsx文件并转化成js输出到dist目录下
加入命令live-server --open=src来开启热更新页面
参数：
--open=src默认打开src目录
多个命令同时运行加入命令concurrently 'npm:babel' 'npm:live-server'
解释：同时运行 npm run babel 和 npm run live-server

最终的package.json的scripts：

"scripts": {
  "dev": "concurrently 'npm:babel' 'npm:live-server'",
  "babel": "babel --watch src --out-dir dist --presets react-app/prod",
  "live-server": "live-server --open=src"
},

运行命令npm run dev，运行后会自动在浏览器中打开指定的src目录，找对对应的html文件即可，自动编译babel同时热更新你修改的代码

github源码

初学React的正确姿势

前言

目录说明

开始