React 菜鳥學習筆記(一)

2022-02-05 23:58:10 字數 1891 閱讀 6255

新公司的專案前端架構用的是react.js 之前孤陋寡聞並沒聽說過,想著後期開發和維護多少要會點前端的東西,就簡單研究一下。個人的學習習慣能寫**的就不寫文字,必要的地方加兩行注釋,**一行行敲下去,執行過有問題及時發現,存檔當作日後小問題備查的工具。感覺前端尤如玄學,標點啥的處處要留心,乙個後台的多少懂點吧。

**如下:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>hello react!

title

>

<

script

src=""

>

script

>

<

script

src=""

>

script

>

<

script

src=""

>

script

>

head

>

<

body

>

<

div

id="example"

>

div>

<

script

type

="text/babel"

>/**

function tick()

setinterval(tick, 1000);

*//*

自定義方法標籤 < clock date = />, date為其中一引數,可理解為屬性

*//*

*function clock(props)

function tick()

setinterval(tick, 1000);

*//*

自定義類標籤 < clock date = />, date為類物件

*//*

*class clock extends react.component

}

function tick() />,

document.getelementbyid('example')

)

}setinterval(tick,1000)

*//*

當element有多個標籤時,多個標籤放在div標籤內部

react 推薦使用內聯樣式。我們可以使用 camelcase 語法來設定內聯樣式. react 會在指定元素數字後自動新增 px

新增mystyle內聯樣式

*/vari =

3;varmystyle =;

const element =(

<

div>

<

h1>

hello, world

!<

/h1>

<

h1 style

=>

hello, world

!<

/h1>

<

h1>

hello, world

!<

/h1>

<

/div> )

reactdom.render(

element,

document.getelementbyid(

'example')

);

script

>

body

>

html

>

React 學習筆記(一)

the api via extends react.component is similar to react.createclass with the exception of getinitialstate.instead of providing a separate getinitialst...

React 學習筆記(一) JSX

jsx 本質上來說,jsx只是react.createelement component,prop,children 方法的語法糖 header content 等價於 react.createelement myheader type props header content children j...

React學習筆記

專案需要使用react進行開發,故從vue與react的異同切入學習,記錄一下學習筆記 react整體的思路就是函式式,所以推崇純元件,資料不可變,單向資料流 單向繫結 當然需要雙向的地方也可以做到,比如結合redux form vue是響應式的思想,認為資料可變,通過watcher監聽每乙個屬性,...