Erstellen Sie eine einfache React-Demo

Reagieren Sie auf die chinesische Dokumentation

1. Erstellen Sie ein Projekt

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

npm init reagieren-app my-app Wenn Sie diesen Befehl ausführen, wird
im aktuellen Verzeichnis ein Verzeichnis namens my-app erstellt .
Hinweis: Der Projektpfad darf keine chinesischen oder Sonderzeichen enthalten!
cd my-app
bedeutet, das Projekt einzugeben.
npm start
bedeutet, das Projekt auszuführen. Nach Abschluss wird der Browser automatisch geöffnet, um die Projektseite anzuzeigen

2. Erstellen Sie eine neue Hello World-Komponente

Löschen Sie alle Dateien unter src und erstellen Sie eine neue index.js

Die neueste vom React-Team veröffentlichte Version ist 18.0. In Version 18.0 unterstützt React ReactDOM.render nicht mehr. Wenn Sie ReactDOM.render verwenden, meldet die Konsole einen Fehler, der jedoch den normalen Betrieb des Programms nicht beeinträchtigt.

// // 旧版本
// // 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>);

Öffnen Sie gerade die Browserseite, aktualisieren Sie sie und stellen Sie fest, dass sich die React-Symbolseite gerade in „ Hallo Welt“ geändert hat ! Buchseite

3. Komponentenentwicklung

Erstellen Sie eine neue App.js im src-Verzeichnis

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

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

Beachten Sie, dass es im Return nur ein Root-Element geben kann, das Root-Element jedoch mehrere Elemente enthalten kann, ähnlich wie bei der Vorlage.

In index.js, das diese Komponente einführen muss, importieren Sie sie, und Sie können diese Komponente direkt verwenden:

// 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/>);

Beachten Sie, dass der erste Buchstabe der Komponente groß geschrieben werden muss! Hallo statt hallo.