當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

react demo

發(fā)布時(shí)間：2023/12/31 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 react demo 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.項(xiàng)目結(jié)構(gòu)

2.創(chuàng)建 app / App.js 文件，這是一個(gè)組件

/*** 定義組件 class* 文件名必須大寫*/ import React, { Component } from 'react'; /*** 繼承 extends* 繼承一個(gè)類*/ // 我們定義一個(gè)叫做App的組件,在HTML中可以用<App></App>來使用它 // React要求自定義組件必須是大寫字母開頭 // React要求自定義組件的類必須繼承于React.Component類 class App extends Component {// 組件中最重要的方法就是render方法,render是渲染的意思render() {// 返回一個(gè)jsx語法,非常牛逼語法return <h1>我是react,很高興遇見你!說{ 5000 + 5000}次我愛你!</h1>} } // 向外暴露 export default App;

3.使用 App 組件，所以我們來到 app / main.js 文件：

/*** 入口文件*/ import React from 'react'; // 枚舉 import { render } from 'react-dom'; // 引入組件 import App from './App.js';// render 使用、掛載組件,兩個(gè)參數(shù) // 第一個(gè)參數(shù)是 jsx 語法 // 第二個(gè)參數(shù)表示組件掛在哪里 render(<App></App>,document.getElementById('app-container') );

4.主頁面 index.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app-container"></div><script src="dist/all.js"></script> </body> </html>

5.效果圖

轉(zhuǎn)載于:https://www.cnblogs.com/crazycode2/p/8351643.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的react demo的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

demo
React