react demo
生活随笔
收集整理的這篇文章主要介紹了
react demo
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.項(xiàng)目結(jié)構(gòu)
2.創(chuàng)建 app / App.js 文件，這是一個組件
/*** 定義組件 class* 文件名 必須大寫*/ import React, { Component } from 'react'; /*** 繼承 extends* 繼承一個類*/ // 我們定義一個叫做App的組件,在HTML中可以用<App></App>來使用它 // React要求自定義組件必須是大寫字母開頭 // React要求自定義組件的類必須繼承于React.Component類 class App extends Component {// 組件中最重要的方法就是render方法,render是渲染的意思render() {// 返回一個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 使用、掛載組件,兩個參數(shù) // 第一個參數(shù)是 jsx 語法 // 第二個參數(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ān)持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的react demo的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机器学习-有监督-SVM
- 下一篇： spring加载配置文件