第一天接觸react

2021-09-28 22:11:00 字數 1828 閱讀 6988

很明顯的感覺到它與vue的相似之處,但目前我發現一點不同,vue在改變其data中的值後立馬就能查到值的改變,而react是在render後其值才改變。

在我了解最基礎的部分後,想著實踐一下,於是出現了以下**。其功能是類似**的功能。其中有一點值得注意。在react中使用行內樣式時,如transform的使用,不是用

style=deg)`}}

而是應該這樣

style=deg)`] }}

查詢資料後,好像是復合屬性應該這樣用。可以多嘗試一下

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

transition:

.5s;

}<

/style>

<

/head>

>

<

/div>

"./node_modules/react/umd/react.development.js"

>

<

/script>

"./node_modules/react-dom/umd/react-dom.development.js"

>

<

/script>

"./node_modules/babel-standalone/babel.js"

>

<

/script>

"text/babel"

>

let i =0;

class

hello

extends

react.component

}handelclick

=(el)

=>

)this

.setstate()

}else);

i++;if

(i>

this

.state.data.length-1)

},500)

settimeout((

)=>

)this

.setstate()

cleartimeout

(this

.state.time1)

},math.

round

(math.

random()

*(this

.state.data.length*2)

+1)*

1000);

}}render()

deg)`]}

}>

<

/div>

>開始<

/div>

<

/div>

<

/div>)}

}const element =

(<

/hello>

) reactdom.

render

( element,

document.

queryselector()

)<

/script>

<

/body>

<

/html>

react學習第一天筆記

繫結屬性注意 class要變成classname for要換成htmlfor style要轉換成 我是紅色的div 行內樣式 其他的屬性和其他的寫法是一樣的 引入本地 import logo from assets images logo.jpg class news extends compone...

React基礎學習(第一天)

概述 特點 基於元件 學習一次,隨處使用 我們現在做的是web頁面 ios android殼子 前端 包管理器 工具 npm cnpm yarn npm 最火的 映象 cnpm 國內 demo ok 專案 cnpm 不要弄 yarn facebook 使用前必須安裝 yarn 的執行模組npm i ...

react 踩坑第一天

1 搭建專案 安裝node.js環境 cd my project npm start 2 建立子元件的幾種方式 1 函式式定義 函式式定義的無狀態元件 負責根據傳入的props來展示,不涉及到要state狀態的操作 特點元件不會被例項化,整體渲染效能得到提公升 因為元件被精簡成乙個render方法的...