新公司的專案前端架構用的是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監聽每乙個屬性,...