React初始系列教程 1 React初探

2021-09-11 12:05:30 字數 906 閱讀 4891

什麼是react?

react是facebook公司開發的乙個前端框架,是目前三大前端框架之一(react, angular, vue),元件化開發web與傳統web開發專案,確實絲滑很多,它有三大特點

宣告式 - 你只需要專注於描述你的ui,react會幫你做底層更新

元件化 - 所有ui都抽象成元件,大大提高可重用性

除此之外,react是基於node的一種虛擬dom(fiber)的框架,在後續的章節中,會有原始碼分析,敬請期待。。。

環境搭建:

node: 

npx要求npm在版本5.2以上!

一番等待後,就可以看到當前目錄下乙個新的資料夾生成啦!接下來就是啟動專案了

npm start

這樣,你的第乙個react就啟動了!

讓我們一步一步看發生了什麼

public/index.html

在上面的檔案裡,我們定義了乙個程式的掛載點,我們寫的**,最終都會被react轉換成相應的dom結點,然後插入到這個掛載點上,那麼我們的**是在**被掛載的呢?

src/index.js

reactdom.render就是負責把**掛到掛載點,可以看到它接收兩個引數,第乙個是我們寫的react元件**,第二個就是掛載點,它是怎麼掛載的呢?就有點類似與這樣:

const root = document.getelementbyid('root');

這樣我們的**就被掛載到相應的掛載點上了。

接下來看看,我們的**,是怎麼變成相應的dom結點的,

render() }

我大致會出4個系列:

react初始教程系列

react專案實戰系列

深入了解react系列

react原始碼分析系列

react開發教程(十)redux結合react

redux 和 react 之間沒有關係。redux 可以搭配 react angular 甚至純 js。但是 redux 還是比較適合和 react 搭配的,因為 react 允許你以 state 的形式來描述介面,而 redux 非常擅長控制 state 的變化。redux 和 react 的結...

react系列教程

這個系列將從基礎語法講起,把react全家桶都講到,然後到具體的使用,最後完成後,會寫乙個完整的demo。目前已經完成的內容 react系列 零 安裝 react系列 一 jsx語法 元件概念 生命週期介紹 react系列 二 高階元件 hoc react系列 三 元件間通訊 react系列 四 r...

CMake系列教程1 初始CMake

cmake 是乙個跨平台的安裝 編譯 工具,可以用簡單 統一的語句來描述所有平台的安裝或編譯過程。能夠輸出不同編譯器的 makefile 或 project 檔案。cmake 的使用 cmakelists.txt 作為專案組織檔案,cmake 並非跨平台編譯工具,而是專案構建工具,可以在不同的平台上...