5、React开发中HTML、JSX和CSS基础入门

React开发中HTML、JSX和CSS基础入门

1. 运行示例应用

首先，将 src 文件夹中 App.js 文件的内容替换为以下代码：

import React, { Component } from "react";
export default class App extends Component {
    render = () =>
        <h4 className="bg-primary text-white text-center p-2 m-1">
            Component Element
        </h4>
}

确保所有更改都已保存，然后在命令提示符中，于 primer 文件夹中运行以下命令来启动开发工具：

npm start

React开发工具将启动，完成初始准备后，会打开一个新的浏览器窗口并显示相应内容。

2. 理解HTML和DOM元素

在所有React Web应用中，核心是HTML元素，它们用于描述要呈现给用户的内容。在React应用里， public 文件夹中的静态 index.html 文件内容会与React动态创建的HTML元素结合，生成浏览器向用户显示的HTML文档。