React基礎（一 之基礎介紹及搭建專案

2021-10-02 16:05:15 字數 2378 閱讀 9116

主要內容

1、參考**：

2.介紹描述 

3、react的特點

4.react高效的原因

5.react與vue的對比

react與vue異同對比之處：

6.虛擬dom

1、node.jsnode.js安裝好以後，如果是windows系統，可以使用win+r開啟執行，然後輸入cmd，開啟終端（或者叫命令列工具）。

輸入**：

node -v
如果正確出現版本號，說明node安裝成功了。

然後再輸入**:

npm -v
如果正確出現版本號，說明npm也是沒問題的，這時候我們的node.js安裝就算完成了。

注：npm預設映象源為國外的，可以自行安裝cnpm**映象源，速度快些

1.腳手架安裝

node安裝好之後，你就可以使用npm命令來安裝腳手架工具了，方法很簡單，只要開啟終端，然後輸入下面的命令就可以了。

2、建立第乙個react專案

腳手架安裝好以後，就可以建立專案了，我們在d盤建立乙個reactdemo資料夾，然後進入這個資料夾，建立新的react專案。

d:  //進入d盤


mkdir reactdemo //建立reactdemo資料夾


cd demo01 //等建立完成後，進入專案目錄


npm start //預覽專案，如果能正常開啟，說明專案建立成功
其實這些操作只需要再終端中輸入就可以了。等到瀏覽器可以開啟react網頁，並正常顯示圖示後，說明我們的環境已經全部搭建完成了。

3.腳手架生成的專案目錄介紹

public中資料夾介紹這個檔案都是一些專案使用的公共檔案，也就是說都是共用的

src中檔案介紹這個目錄裡邊放的是我們開放的源**，我們平時操作做最多的目錄。

1.相關的基礎js庫

在頁面中匯入

編碼

2.虛擬dom1）.jsx語法

標籤名任意: html標籤或其它標籤

標籤屬性任意: html標籤屬性或其它

基本語法規則

babel.js的作用

2）.渲染虛擬dom

reactdom.render(virtualdom, containerdom)

3）建虛擬dom的2種方式純js(一般不用)

react.createelement('h1',

, title)

jsx

1、概念

模組

元件

元件化和模組化

模組化：當應用的js都以模組來編寫的, 這個應用就是乙個模組化的應用

元件化：當應用是以多元件的方式實現, 這個應用就是乙個元件化的應用​​​​​​​

React總結之基礎 一

中文官網 英文官網 元件化開發 高內聚,低耦合 一次學習,隨處編寫 通過react實現前端效果 en root 複製 複製 複製 複製 複製 jsx中樣式類必須使用classname屬性,不可以使用class屬性複製 let element jsx表示式 複製 let foo function 複製...

React 基礎知識介紹

react 基礎知識介紹 另外，本教程的 將全部使用 es6 語法，教程中我會介紹一些用到的 es6 語法，但是不會從頭講解了，推薦閱讀es6入門 hello world 以下是乙個最簡單的demo，將乙個最簡單的元件渲染到頁面上。import react from react import fro...

Core Animation之基礎介紹

了解了圖層，現在學習核心動畫。core animation是直接作用在calayer上的，並非uiview。一 使用步驟 1.使用它需要先新增quartzcore.framework框架和引入主標頭檔案 ios7不需要 2.初始化乙個caanimation物件，並設定一些動畫相關屬性 3.通過呼叫c...