React学习（二）：编写 React 组件并成功挂载

阿里云服务器0元试用，首购低至0.9元/月起
【开发云】年年都是折扣价，不用四处薅羊毛
前置内容阅读 React学习（一）：web开发框架react工具的安装与第一个应用的创建
npm 版本: 8.5.5
node 版本: v16.15.0

1. 选用习惯的编辑器打开创建好的 my-project 项目文件夹

a. 进入项目文件夹启动 my-project 项目

npm start

b. 使用编辑器打开项目文件夹
c. 在项目 src 目录下新建 Welcome.js 文件并编写以下代码

// 编写 Welcome 组件
// 引入依赖 使用的是ES6语法
import React from "react";

// 新建类
class Welcome extends React.Component {
    // 该方法表示该组件最终渲染出来的结果
    render() {
        return <h1> Hello React</h1>
    }
}

// 导出整个类
export default Welcome

d. 改写 index.js 文件 将编写的 Welcome 组件挂载到 root 节点下

// 主入口文件，编写的所有组件均需要在这里进行挂载
import React from 'react';
// ReactDOM 库用于处理 React 和 DOM 之间的相关事宜
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 引入编写的 Welcome 组件
import Welcome from './Welcome';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Welcome />
  </React.StrictMode>
);

// ReactDOM.render 方法用于将编写的组件挂载到 root 节点上面
// ReactDOM.render(<App/>, document.getElementById('root'))

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

e. 保存页面并刷新浏览器查看结果，出现该页面则表示该组件运行成功