1.React設計的核心思想

一切皆是元件，最小可以化到一個元素 --在react開發中，所有都是基於元件開發和封裝（因為react沒有html、所有的東西都是js物件；在底層原理是v層“框架”--僅僅用於檢視的庫框架裡的虛擬dom和diff演算法-實現的檢視資料驅動，由內部資料setState使用才能更新頁面）

所有的資料都是資料單向流 -- 單向流，資料改變是可以追溯的，使用複雜 -- state資料、扭轉方法；

雙向資料流，使用非常簡單，資料問題不可追溯。

2.React開發特性

社群開發 - -react中很多的庫都是社群維護（改變性很多，不穩定性更多）；

react只有react核心庫是官方維護，其它都是社群維護（就需要獨立安裝）

3.腳手架的安裝

可以使用本地的腳手架，也可以使用線上的腳手架

create-react-app這個腳手架的名字有一個簡寫：cra

cra4.x在2021年12月份已經更新用不了，因為5.x版本剛剛釋出，

使用5.x版本有硬性要求：1.node.js必須高於或等於14.x（nodejs的單版本號不要使用）

2.webpack不要安裝全域性的，如果是全域性有安裝，推薦解除安裝（npm uninstall -g webpack webpack-cli和npmcache clean -f）清除快取 ，一定要用全域性webpack，唏噓使用5.x這個版本

本地：cnpm i -g create-react-app

網路：npx命令->npx create-react-app my-app (不用全域性安裝cra腳手架)

3.腳手架的使用

推薦不要本地安裝cra，使用線上：npxcreate-react-app my-app

4.認知react原生webpack配置

在react中經常需要些測試程式碼 --單元測試，使用“test” : “react-scriptstest”命令進行單元測試

“eject”：“react-scripts eject”釋放腳手架的所有整合功能 --只能釋放，不能返回（如果有架構師，或則webpack學習非常好，可以釋放否則最好不要釋放，一般都是使用社群來進行配置webpack）

執行釋放命令：npm run eject

一、編寫第一個react應用

react開發沒有html這樣的模板，所有的程式碼都是js，所有的元件都是js檔案（.jsx - -這個是以前的老版本的react元件檔案，如果是ts開發，檔名為：tsx）

所有的react檔案第一行都是引入React框架

//引入react框架
import React from 'react'
//在React專案中，例項入口檔案必須呼叫render(react-dom庫)方法把虛擬dom，元件掛載到真實dom
import ReactDom from 'react-dom'
//把元件渲染到頁面上 - - 這方法只有兩個引數，順序不能亂
//render(element:React.DOMELement,container:ReactDom.Container)
//element -> 需要傳遞一個元素
//container->頁面容器
ReactDom.render(
  <h1>Hello React</h1>,
  document.getElementById('root')
)

還可以建立虛擬dom物件來進行渲染物件

//呼叫react中的方法來建立一個虛擬dom
//createElement(type:"input",props?:React.InputHTMLAttributes,...children:ReactNode[])
//第一個引數為標籤名
//第二個引數為元素的屬性
//...children:React.ReactNode[]=>從第三個引數開始為虛擬dom的子節點
//在react中可以使用creactElement來建立虛擬dom
let node =React.createElement(
   'div',
   {style:{background:'#f8f8f8',padding:'16px',border:'solid 1px #ddd'}},
  React.createElement(
   'h1',
   {}，
   'Hello React...'
)
)

//然後在render上渲染node物件就可以了

因為react在開發中只能使用js來編寫頁面，把頁面程式碼當做js物件來寫。(!!!在開發也是經常用對這段頁面程式碼插入 這些是重點)

所以React團隊創造了一種語法：JSX（把html程式碼節點作為一個js物件來進行編寫- -JavaScript XML）

const node=<div><h1>好好學習！！！</h1></div>

上例子就是頁面程式碼編寫物件，還可以編寫樣式style只是需要注意物件的命名

因為在js裡宣告物件它後面賦值就是一個程式碼塊

所以可以使用一個圓括號（）來包起來這樣簡潔好看裡面還可以放花括號在放變數定義函式這些使用。

//[].map(it=>{id:10,name:20})說明花括號不是一個物件，是一個模組

//[].map(it=>({it:10,name:20}))可以使用（）來宣告花括號是一個物件所以宣告物件時可以直接帶花括號

//編寫物件html的dom程式碼時或者其他建議加上圓括號來簡潔好看
const node=(
  <div>
    <h1>好好愛react</div>
    <h2>天天向上,寫寫react的js程式碼</div>
  </div>
)

//因為程式碼是模組以後也會編寫邏輯，所以最起碼是一個方法 ，這就是函式方法的函式式jsx的由來

const node=function(){
//也可以這樣寫 function node(){
//所以這就是一個（函式）元件
//函式元件：在React中一個函式返回了一個JSX物件，那麼這個函式就是一個函式元件
//函式元件將是以後的重點發展方法（推薦買一本吃灰的書 -- 函數語言程式設計）
  return (
   <div>
   <h3>編寫第一個html的函式物件</h3>
</div>
 )
}
//渲染函式元件時，使用node()這是匿名函式的元件渲染來渲染方法render引數
//元件使用時
//因為在html中的標籤都是小寫字母，所以元件小寫會報錯是有一個硬性要求元件
<Node/>
//在react中要求：是所有元件的首字母必須要大寫才能使用

在函式元件裡列印不了this是為未定義。所以是很簡單，別名為：無狀態元件

類元件：React一直在用的元件，老系統幾乎都是類元件，直到React16.8版本釋出，開始有函式元件

//起一個類，可以整合元件物件，然後成為一個類元件
//整合（繼承）了Component物件，就必須實現它的render方法，在render方法中必須返回一個虛擬dom(JSX物件)
class Node extends React.Component{
   render(){
    console.log(this)
   return(
    <div>
        <h2>我愛編寫react類元件this</h2>
     </div> 
)
}

}
//然後渲染類元件物件名就行 <Node/>

//類元件->它有this物件，千萬不要把this物件搞丟就好，類元件的一個別名：狀態元件

//在其他元件匯入直接引入