O efeito a ser alcançado:

Personalize dois componentes e exiba-os na página. Como mostrado abaixo:

Crie um novo projeto:

Se você não sabe como criar um projeto, pode consultar Create a new React project using scaffolding .

Após a criação bem-sucedida, você pode excluir todo o conteúdo inicial no diretório src e o diretório público na pasta do projeto.

Criar componentes:

Crie um novo diretório de componentes no diretório src da pasta do projeto, que contém dois componentes personalizados. O diretório é o seguinte:

Olá, conteúdo do componente:

index.jsx：

import React, { Component } from 'react'
import hello from './index.module.css'

export default class Hello extends Component {
	render() {
		return <h2 className={hello.title}>Hello,React!</h2>
	}
}

index.module.css：

.title{
	background-color: rgb(127, 98, 255);
}

Conteúdo do componente de boas-vindas:

index.jsx：

import React, { Component } from 'react'
import './index.css'

export default class Welcome extends Component {
	render() {
		return <h2 className="title">Welcome React!</h2>
	}
}

index.css：

.title{
	background-color: rgb(102, 251, 9);
}

Crie o componente shell:

Crie um novo App.jsx no diretório src, importe os componentes Hello e Welcome que criamos e exponha-os.

Código completo do App.jsx:

//创建“外壳”组件App
import React, { Component } from 'react'
import Hello from './components/Hello'
import Welcome from './components/Welcome'

//创建并暴露App组件
export default class App extends Component {
	render() {
		return (
			<div>
				<Hello />
				<Welcome />
			</div>
		)
	}
}

Importe o componente shell e renderize:

Crie um novo arquivo index.js no diretório src, importe o componente shell para ele e renderize-o em index.html.

O código completo de index.js:

//引入react核心库
import React from 'react'
//引入App组件
import App from './App'

//渲染App到页面
import {
    createRoot
} from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render( < App/> );

Crie um novo index.html na pasta pública:

O código completo de index.html: (index.html está no diretório público)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <title>666</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

O diretório completo do projeto:

correr:

Digite npm start no terminal do projeto.

Reagir à primeira experiência de renderização de componentes personalizados