建站
咨詢
售后
建站咨詢
新聞中心
新手如此入門React，我覺得你應(yīng)該從下面幾點(diǎn)開始入手學(xué)習(xí)，今天給大家分享的是第一期，后續(xù)還會(huì)不斷的更新和實(shí)戰(zhàn)的分享。
為硚口等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及硚口網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站建設(shè)、做網(wǎng)站、硚口網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
一，了解React
1.聲明式(React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應(yīng)用的每一個(gè)狀態(tài)設(shè)計(jì)簡(jiǎn)潔的視圖，當(dāng)數(shù)據(jù)改變時(shí) React 能有效地更新并正確地渲染組件。以聲明式編寫 UI，可以讓你的代碼更加可靠，且方便調(diào)試)
2.組件化(創(chuàng)建擁有各自狀態(tài)的組件，再由這些組件構(gòu)成更加復(fù)雜的 UI。組件邏輯使用 JavaScript 編寫而非模版，因此你可以輕松地在應(yīng)用中傳遞數(shù)據(jù)并使得狀態(tài)與 DOM 分離。
3.高效(React通過和DOM的模擬，很大限度的減少與DOM的交互)
4.JSX(javascript的拓展語言，建議在React開發(fā)中使用JSX)
5.靈活(React可以和已知的庫(kù)或者是框架完美的配合)
6.單向響應(yīng)的數(shù)據(jù)流(React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡(jiǎn)單的原因)
無論你現(xiàn)在正在使用什么技術(shù)棧，你都可以隨時(shí)引入 React 來開發(fā)新特性，而不需要重寫現(xiàn)有代碼。React 還可以使用 Node 進(jìn)行服務(wù)器渲染，或使用 React Native 開發(fā)原生移動(dòng)應(yīng)用。
二，第一個(gè)React實(shí)例
頁面如下
Hello React!
說明：
html的頁面引入三個(gè)庫(kù)，
- react.min.js(React的核心庫(kù))
- react-dom.min.js(提供與DOM相關(guān)的功能)
- babel.min.js (ES6代碼轉(zhuǎn)換為ES5代碼，還支持JSX)
三，React的元素操作
元素在React應(yīng)用中最小的單位，主要作用就是為了描述屏幕上輸出的內(nèi)容。
- const = element =
n你好，hello world
不過我們?cè)谝隦eact的時(shí)候都是如下操作，
定義一個(gè)跟節(jié)點(diǎn)，div的所有內(nèi)容都將屬于 example的 React DOM來管理，我們也把這個(gè)稱為“根”DOM節(jié)點(diǎn)。
下一步就是將React的元素， const渲染到DOM節(jié)點(diǎn)中，方法如下：
- const element =
Hello, world!
;- ReactDOM.render(
- element,# 元素
- document.getElementById('example') # 節(jié)點(diǎn)
- );
說明：采用的方法為：ReactDOM.render()，此方法的兩個(gè)重要點(diǎn)就是 元素和節(jié)點(diǎn)。
這個(gè)時(shí)候我們就會(huì)產(chǎn)生一個(gè)問題，我們需要在同一個(gè)節(jié)點(diǎn)顯示多個(gè)元素該怎么辦?
其實(shí)在React的特性中，元素都是不可改變的，但是我們可以通過更新的方式來達(dá)到我們需要實(shí)現(xiàn)的目的，比如重新創(chuàng)建一個(gè)元素再渲染到同一個(gè)節(jié)點(diǎn)，這樣元素的內(nèi)容就更新了。
- const element = (
Hello, world!
我是前端工程師小A.
- );
- ReactDOM.render(
- element,
- document.getElementById('example')
- );
- }
空口無憑，我們可以通過一個(gè)實(shí)際例子來總結(jié)React的第一章學(xué)習(xí)
Hello React!