npm install -g live-server live-server

理解 HTML 文件在 live-server 中如何运行 React 的过程，可以通过以下步骤进行解释：

浏览器请求 HTML 文件：

浏览器通过 live-server 请求 index.html 文件。 浏览器加载 HTML 文件：

浏览器接收到 index.html 文件并解析 HTML 结构。 浏览器加载 React 和 Babel：

浏览器按照 HTML 文件中的 <script> 标签依次加载 React、ReactDOM 和 Babel 的脚本。 这些脚本被加载后，会在浏览器中提供 React 和 Babel 的功能。 编译和执行 JSX：

浏览器遇到 <script type="text/babel"> 标签时，Babel 会将其中的 JSX 代码实时编译为普通的 JavaScript 代码。 编译后的 JavaScript 代码被执行，调用 ReactDOM.render 方法，将 React 组件渲染到指定的 DOM 节点中。 下面是这个过程的图示：

javascript 复制代码 +---------------------------+ | 1. 浏览器请求 HTML 文件 | | ----------------------> | | | | | | live-server | +---------------------------+ | v +---------------------------+ | 2. 浏览器加载 HTML 文件 | | | | | | | | <script src="react.js"></script> <--- 3. 加载 React 和 Babel | <script src="react-dom.js"></script>| | <script src="babel.js"></script> | | | | | |

| | <script type="text/babel"> | | ReactDOM.render(

Hello world

, document.querySelector("#app")); | | </script> | | | | | +---------------------------+ | v +---------------------------+ | 3. 浏览器加载 React 和 Babel 脚本 | | | | - React 和 ReactDOM 脚本被加载 | | - Babel 脚本被加载 | +---------------------------+ | v +---------------------------+ | 4. 编译和执行 JSX | | | | - Babel 编译 JSX 为 JavaScript | | - ReactDOM.render 被调用 | | - React 组件被渲染到 #app 节点 | +---------------------------+ 通过这个图示，你可以看到 live-server 只是简单地提供静态文件，而浏览器负责加载、解析和执行 HTML 和 JavaScript 代码。React 和 Babel 的功能通过加载 CDN 脚本在浏览器中实现，最终实现 React 组件的渲染。

npm init -y npm install react react-dom react-scripts --save-dev "scripts": { "start": "react-scripts start" }, npm start

---

30 Days of React

✨ An Introduction to React - in 30 Bite-Size Morsels ✨

Written by Fullstack.io and friends

---

🚀 Introduction

Over the next 30 days, we'll walk through everything you need to know to work with React. From the very beginning through testing and deployment of our first app.

This repository contains the entire source and content for the article series of 30 Days of React hosted by the Fullstack React team.

👀 What's inside?

What is React?	What is JSX?	Our First Components	Complex Components	Data-Driven
State	Lifecycle Hooks	Packaging and PropTypes	Styles	Interactivity
Pure Components	create-react-app	Repeating Elements	Fetching Remote Data	Introduction to Promises
Displaying Remote Data	Client-side Routing	Introduction to Flux	Data Management with Redux	Redux actions
Redux Middleware	Introduction to Testing	Implementing Tests	Testing the App	Better Testing with Enzyme
Integration Testing	Deployment Introduction	Deployment	Continuous Integration	Wrap-up and More Resources

👩‍🏫 How to use this repository

Each day contains a full React application, following the same procedure used to create the article series. Most days can be run using the same basic steps (and for the days that require a bit more work, check out the tutorial series on the blog).

The steps run any 30 Days of React project are:

We can run these steps using the following commands:

# install the dependencies
yarn install

# start the project
yarn start

Since all of the days are built using the fantastic create-react-app tool, all of the commands are available from that project in every day.

Contributors

Ari	Nate Murray	Peter Ho Yeung Chan	Aaron

---

Fullstack React Book

This repo was written and is maintained by the Fullstack React team. In the book we cover many more projects like this. We walk through each line of code, explain why it's there and how it works.

30 Days of React covers only the early basics of React. If you're looking to learn how to build real-world React apps, including libraries from the React ecosystem, there's no faster way than by spending a few hours with the Fullstack React book.