Создайте простую демонстрацию React

1. Создайте проект

npm init react-app my-app
cd my-app
npm start

npm init react-app my-app Выполнение этой команды создаст каталог с именем my-app
в текущем каталоге . Примечание. Путь к проекту не может содержать китайские или специальные символы! cd my-app означает вход в проект npm start означает запуск проекта, после завершения браузер автоматически откроется для просмотра страницы проекта

2. Создайте новый компонент Hello World

Удалите все файлы в src и создайте новый index.js

Последняя версия, выпущенная командой React — 18.0.В версии 18.0 React больше не поддерживает ReactDOM.render.Если использовать ReactDOM.render, консоль сообщит об ошибке, но это не влияет на нормальную работу программы.

// // 旧版本
// // 1.引入模块
// import React from 'react'
// import ReactDOM from 'react-dom'
// // 2.将组件挂载到指定元素上
// ReactDOM.render(
//    <h1> hello world！</h1>
//     , document.getElementById('root')
// )

// 新版本
import React from 'react'
import {
    
    createRoot} from 'react-dom/client'

const root = createRoot(document.getElementById('root'));
root.render(  <h1> hello world！</h1>);

Откройте страницу браузера прямо сейчас, обновите и обнаружите, что страница значка React только что изменилась на привет, мир ! страница

3. Компонентная разработка

Создайте новый App.js в каталоге src.

//1、导入React核心模块
import React from 'react'

//2、定义组件类
class Hello extends React.Component{
    
       //类
    render(){
    
         //函数
        return (   //返回值 ,只能有一个根元素,但根元素内部可以有多个元素,类似于template
            <h1>
                Hello XiaoCheng !
            </h1>
        )
    }
}
// 导出组件
export  default Hello

Обратите внимание, что в ответ может быть только один корневой элемент, но внутри корневого элемента может быть несколько элементов, подобно шаблону.

В index.js, который должен ввести этот компонент, импортируйте его, и вы можете использовать этот компонент напрямую:


// 1.引入模块
import React from 'react'
import {
    
    createRoot} from 'react-dom/client'
import Hello from './App'//从具体文件引入组件
// 2.将组件挂载到指定元素上
const root = createRoot(document.getElementById('root'));
root.render(<Hello/>);

Обратите внимание, что первая буква компонента должна быть заглавной! Привет вместо привет.