React是目前前端比較流行的一個框架，由Facebook開發(fā)出來的。React有著良好的性能，目前在國內(nèi)大廠很流行。話不多說我們就從一個todoList小案例來開始上手吧。

創(chuàng)建項目

首先我們要選擇一個創(chuàng)建項目的位置，在集成終端打開，然后輸入npm init vite，按照一系列的操作選擇React，JavaScrpit等，最終看到如下，就說明你已經(jīng)成功創(chuàng)建了一個React項目。

項目結(jié)構(gòu)

我們使用vite創(chuàng)建了一個腳手架項目，項目對應的結(jié)構(gòu)如下。我們作為開發(fā)者，主要就是在src目錄下進行開發(fā)。

組件開發(fā)

在React中是強調(diào)組件開發(fā)的，我們不可能把所有的代碼放在一個文件里面。隨著代碼的變多，以后維護起來也會很麻煩。而組件化開發(fā)的優(yōu)勢就能夠很好體現(xiàn)，把一個大項目拆分成一個個小部分組件。這樣就從大的代碼里面抽離出來，便于以后的維護以及復用。在todoList里面，我們可以拆分成頭部組件，主體組件兩個部分。

在頭部中，用一個h1標簽包裹一個大標題，然后就是一個輸入框了。在這個輸入框和按鈕中里面有很多細節(jié)要注意，首先就是要去除按鈕點擊的默認行為，每當點擊按鈕都會默認刷新頁面提交數(shù)據(jù)，這對我們的功能是有很大影響的。其次，我們要綁定輸入框的值進行雙向綁定。隨著輸入進輸入框，我們要改變輸入框的狀態(tài)。最終，點擊按鈕通知父組件更改todoList。在React中，數(shù)據(jù)是單向流的，即子組件不能更改父組件傳遞的數(shù)據(jù)。每當子組件想要更改數(shù)據(jù)，只能夠利用父組件傳遞的函數(shù)，來通知父組件更改數(shù)據(jù)確保數(shù)據(jù)的單向流動。在主體部分，主要的任務(wù)就是把todoList列表渲染出來，這很簡單就不多說了。

樣式優(yōu)化

在React中，我們可以選擇自己習慣的預編譯語言Sass或Less在對應的CSS文件編寫，然后將其引入至對應的組件文件中。

Ending

以上內(nèi)容就是React的初體驗了，React總體上比Vue難一點。但是二者都是基于JavaScrpit開發(fā)的，所以核心還是要對JS有深刻的理解并需要懂得Vue和React的設(shè)計理念，這樣我們就能很好的掌握二者，便于以后在面試中脫穎而出。