React之元件的建立

1.函式(無狀態)元件的建立

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
"node_modules/react/umd/react.development.js"
>
<
/script>
"node_modules/react-dom/umd/react-dom.development.js"
>
<
/script>
"node_modules/babel-standalone/babel.min.js"
>
<
/script>
"demoreact"
>
<
/div>
"text/babel"
>
//建立乙個元件
function
mycom()
//呼叫元件
let com=
>
//呼叫多個元件 則需要div在外圍包裹
// let com=
// 
// 
reactdom.
render
(com,document.
getelementbyid
("demoreact"))
;<
/script>
<
/body>
<
/html>

"text/babel"

>
//三個子元件
function
mycoma()
function
mycomb()
function
mycomc()
//父元件
function
com(
)//渲染父元件com()
reactdom.
render
(com()
,document.
getelementbyid
("demoreact"))
;<
/script>

類元件的建立

"text/babel"

>
//建立類元件 
class
mycom
extends
react.component
}let com =
>
reactdom.
render
(com,document.
getelementbyid
("demoreact"))
;<
/script>

React的元件建立

在react中，元件分為兩種，類元件和函式式元件 簡單的共呢個使用函式式元件複雜功能使用類元件元件名首字母都必須大寫 使用es6建立的方式實現乙個元件 import react,from react export default class classcomponent extends compon...

react元件的建立

最近專案接觸react和rn，之前會一些vue和小程式，起初寫react是很難受的，尤其是jsx的寫法，不過2周過後感覺寫起來有點舒服了。這是早期react元件的建立方式，如果你看的文章是幾年之前寫的，很多都是這種方式 比如阮老師這篇react 入門例項教程 var likebutton react...

react建立元件的方式

react建立元件的方式 工廠 無狀態 函式 最簡潔，推薦使用 function component es6語法，複雜元件，推薦使用 定義的元件類component必須繼承react的核心元件類component,extends是繼承的意思，render 方法是react最常用的方法 class c...