基於React腳手架搭建以及安裝使用

阿新 • • 發佈：2022-03-03

一、react初之體驗

a.理解React設計的核心思想

它是V（view檢視）框架，設計之初僅僅是不滿意Boostrap的頁面設計:

1.一切皆元件，最小化到一個元素

2.只有單向資料流 - -資料可追溯，獲取值和設定值都是一個方法

b.React開發特性

除了核心庫之外，其它的所有庫包括狀態管理器和路由這樣的庫都是社群維護

特性：版本多，更新快，同樣的功能庫很多

c、腳手架的安裝

React的腳手架做了一個硬性的升級，對Node.js版本有要求，一定是14.x版本

Node.js升級，如果是低版本，直接安裝新版本即可 --一定不要使用單版本（例如（雙數可以不是單數）：13.x,15.x）

腳手架因為是社群維護，所以最好不用本地安裝，因為這個版本不可控（所以使用網路安裝cra）

d.腳手架的使用

使用npx這個命令來進行專案初始化：名字為 -> CRA(create-react-app)

國內安裝使用有些慢，需要耐心

npxcreate-react-app react-demo

它根據npm的一些痛點，開發了一個類似於npm的一個庫，這個庫在react中是一個常用庫，以後安裝庫的時候，不再使用cnpm/npm,使用yarn

安裝yarn:cnpm/npm i -g yarn

e.認識React原生webpack配置

執行專案：yarn start

執行腳手架釋放命令，可以把腳手架全部解析出來，這個命令是不可逆：yarn eject --

一般有架構師才會執行這個命令，否則搞不定

安裝命令：yarn add less less-loader

二、編寫第一個react應用

a.React使用的基本規則

標準規定：

每一個元件檔案的第一行是 =>import React from 'react'

在之前的開發中，react元件檔案是jsx檔案（home.jsx），現在開發的時候是直接home.js

b.JSX語法

c.React的createElement方法

d.分類以及實現

e.元件拆分

在進行編寫react時，要安裝VSCode的外掛：ES7 + React/Redux/React-Native/JS snippets

！！！react元件只有兩種

1.函式元件：別名（無狀態元件） --我們現在的程式設計方向是函數語言程式設計（在程式碼中需要去寫邏輯，那麼可以在方法中寫邏輯）

定義一個函式，這個函式需要返回一個JSX物件

//react元件第一行程式碼
import React from 'react'
//在react中必須使用render方法把虛擬元件或則是虛擬節點掛載到真實dom上 -- react-dom庫中的render
import ReactDom from 'react-dom'

//React的creactElement函式接收三個引數，然後返回一個React元素（就是虛擬dom）,使用這個函式的時候有引數順序的注意
//第一個：是元素名字
//第二個：是InputHTMLAttributes 輸入框的html屬性
//第三個引數，都是子元素

// const ElFunc=function(){
//定義一個數據，它的值為一個html片段 - - 在react中稱這個html片段為一個JSX（JavaScript XML 也是react的一個特有語法）物件
//使用js語法，來編寫xml物件的一個格式

/** 括號包所有資料  在js中寫程式碼是一個宣告的物件或者變數引數 ，方法裡寫就需要返回引數來代表函式的使用
* const elObj=(
*  <h2>
*    hello
*</h2>) 
*/
//程式碼內可以寫邏輯，那麼也可以在方法中寫邏輯

function ElFunc(){
     return (
    <h1>
     hello,react
    </h1>
)
}
//render方法接收兩個引數 ：第一個 是react的虛擬dom(可以是js物件，容器，普通方法) =>React.DOMElement,
//第二個是：ReactDom.Container 容器 --需要指到index.html這個頁面上的頂層js物件，root根元素
ReactDom.render(
   //elObj 普通jsx物件
   //elFunc() 作為普通方法呼叫
   // <ElFunc/>  元件寫法 在React中，元件的名字，首字母必須大寫
    ,
    document.querySelector('#root')
)

//帕斯卡語法 ->每一個單詞的首字母大寫，包括首字母MyName
//駝峰語法 ->每一個單詞的首字母大寫，但是第一個字母小寫 myName

2.在React v16.8之前沒有函式元件，只有類元件

定義一個普通類，如何讓一個普通類成為一個元件？繼承

應該去繼承類元件，類聲明當前類成為一個元件物件

在定義一個普通類時然後去繼承Component類成為一個元件，一定要實現render放，方法必須返回一個JSX物件

//定義一個元件
import React from 'react'

class MyClass extends React.Component{
  //可以返回this需要渲染的虛擬dom
  console.log(this)
     render (
     <h1>
       hello
     </h1>
  )
}

//匯出元件
 export default MyClass
//或者引入元件
import MyClass from './MyClass'

ReactDom.render(
  <MyClass/>
)