一、環(huán)境安裝

? ? ? ? 第一種：使用原生搭建(可以從國(guó)內(nèi)下載配置鏡像、也可以從國(guó)外下載)

? ? ? ? ? ? ? ? ? ? ? ? 指令：1.國(guó)內(nèi)下載：（1：npm config set registry https://r.npm.taobao.org//

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （2：npm install -g create-react-app:全局安裝react腳手架

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （3：create-react-app 項(xiàng)目名：創(chuàng)建項(xiàng)目?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （4：cd? 項(xiàng)目名：進(jìn)入項(xiàng)目

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （5：npm run start：?jiǎn)?dòng)項(xiàng)目

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.國(guó)外下載：執(zhí)行（2-（5步驟即可，下載速度較慢

????????第二種方式：用vite搭建腳手架（速度較快，建議使用）

? ? ? ? ? ? ? ? 指令：（1.npm init vite@latest：初始化一個(gè)新項(xiàng)目

? ? ? ? ? ? ? ? ? ? ? ? （2：編輯項(xiàng)目名，選擇react，選擇javascript、tscript等等，按需求選擇

? ? ? ? ? ? ? ? ? ? ? ? （3：cd 項(xiàng)目名：進(jìn)入該項(xiàng)目

? ? ? ? ? ? ? ? ? ? ? ? （4：npm init:初始化一個(gè)新的 Node.js 項(xiàng)目

? ? ? ? ? ? ? ? ? ? ? ? ? (5:npm run dev:啟動(dòng)項(xiàng)目

二、JSX相關(guān)語(yǔ)法

src文件夾下的main.jsx文件：是整個(gè)項(xiàng)目的入口文件，不可移除，其他的按自己需求保留

JSX：完整寫(xiě)法：JavaScript XML(標(biāo)記語(yǔ)言)：通俗的講是js語(yǔ)言里面可以插入標(biāo)簽

? ? ? ? XML和HTML的區(qū)別：前者不能直接引入外部文件，后者可以引入外部文件（js、ts、css等）

1.組件，創(chuàng)建組件可以分為三種：純組件、函數(shù)組件、類組件

? ? ? ? 1.1：純組件：通過(guò)創(chuàng)建jsx對(duì)象，包含了多個(gè)元素的div標(biāo)簽（三個(gè)div標(biāo)簽）。可以將jsx對(duì)象當(dāng)作變量使用在標(biāo)簽的括號(hào)中

import React from 'react'
import ReactDOM from 'react-dom/client'

let com = <div>
  <h1>這是純組件部分呀</h1>
  <div>純組件</div>
  <div>函數(shù)組件</div>
  <div>類組件</div>
</div>
//render里面寫(xiě)入com這個(gè)jsx對(duì)象，即可將其里面的元素展現(xiàn)到頁(yè)面中去
ReactDOM.createRoot(document.getElementById('root')).render(com)

????????1.2：函數(shù)組件：通過(guò)聲明一個(gè)函數(shù)來(lái)創(chuàng)建組件

import React from 'react'
import ReactDOM from 'react-dom/client'
// 聲明一個(gè)函數(shù)
function Hanshu(ARG) {
  return <div>
    <h1>這是通過(guò)函數(shù)來(lái)創(chuàng)建的組件呀</h1>
    <div>在main.jsx文件里面操作的嘞</div>
  </div>
}
// 11行和12行以及render中的Hanshu（）等價(jià)
let res = <Hanshu></Hanshu>
let res2 = Hanshu()

ReactDOM.createRoot(document.getElementById('root')).render(Hanshu())

????????1.3：通過(guò)類來(lái)創(chuàng)建組件：

import React from 'react'
import ReactDOM from 'react-dom/client'
//創(chuàng)建一個(gè)Type類并繼承React的組件部分，是為了繼承它的響應(yīng)式數(shù)據(jù)功能
class Type extends React.Component {
  render() {
    return <div>
      <h1>這是通過(guò)class類來(lái)創(chuàng)建的組件呀</h1>
      <div>嘿嘿黑</div>
    </div>
  }
}
// 只能通過(guò)這個(gè)來(lái)實(shí)現(xiàn)咯
let res = <Type></Type>
ReactDOM.createRoot(document.getElementById('root')).render(res)

2.jsx插值表達(dá)式的使用途徑

? ? ? ? （1：變量：直接當(dāng)作變量通過(guò){}來(lái)使用

import { useState } from 'react'
import './test.css'
function test() {
    // 當(dāng)作變量來(lái)使用
    let bianliang = 120
    let arr = ["box1", "box2", "jack", "22歲了", "今天是他生日哦"]
    let obj = { name: "小紅", age: "22", sex: "女", job: "student" }
    return (
        <div className=''>
            <div>變量使用：：{bianliang}</div>
            <div>訪問(wèn)數(shù)組中的成員::{arr[4]}</div>
            <div>訪問(wèn)對(duì)象中的成員::{obj.name}</div>
        </div>
    )
}
export default test

? ? ? ? （2：對(duì)象數(shù)組成員訪問(wèn)

import { useState } from 'react'
import './test.css'
function test() {
    let arr = ["box1", "box2", "jack", "22歲了", "今天是他生日哦"]
    let obj = { name: "小紅", age: "22", sex: "女", job: "student" }
    return (
        <div className=''>
            <div>訪問(wèn)數(shù)組中的成員::{arr[4]}</div>
            <div>訪問(wèn)對(duì)象中的成員::{obj.name}</div>
        </div>
    )
}
export default test

? ? ? ? （3：js運(yùn)算表達(dá)式

import { useState } from 'react'
import './test.css'
function test() {
    let isout = "yes"
    let count = 22
    // 定義一個(gè)變量marry
    let ismarry = true
    return (
        <div className=''>
            {/*相當(dāng)于vue中的v-fi： 如果isout的結(jié)果為yes，則顯示”不出去了吧“，否則顯示”出去呀，散步不“ */}
            <div>{(isout === "yes") ? "不出去了吧" : "出去呀，散步不"}</div>

            {/* 可以將前面的變量進(jìn)行加減乘除計(jì)算 */}
            <div>count+21的結(jié)果為{count + 21}</div>

            {/* 判斷marry是否為true滿足則顯示后面的”已經(jīng)結(jié)婚了哦“信息 ，判斷為false則不顯示*/}
            <div>{ismarry && "邏輯與的部分"}</div>

            {/* 若marry判斷為false，則顯示后面的語(yǔ)句，若為true則顯示前面的語(yǔ)句 */}
            <div>{ismarry || "邏輯或的部分"}</div>
        </div>
    )
}
export default test

? ? ? ? （4：函數(shù)調(diào)用

import { useState } from 'react'
import './test.css'
function test() {
    function diaoyong() {
        console.log("調(diào)用了函數(shù)名為diaoyong");
    }
    return (
        // 直接在標(biāo)簽中將diaoyong函數(shù)當(dāng)作變量使用
        <div className='fa'>111{diaoyong()}</div>
    )
}
export default test

? ? ? ? （5：jsx對(duì)象（給變量賦標(biāo)簽組件）

import { useState } from 'react'
import './test.css'
function test() {
    // 定義一個(gè)jsx對(duì)象，包含了多個(gè)元素的div標(biāo)簽（）h1,h2,h3,p標(biāo)簽
    // 可以將jsx對(duì)象當(dāng)作變量使用在標(biāo)簽的括號(hào)中
    let jsxobj = <div>
        <h1>hello</h1>
        <h2>你好</h2>
        <h3>晚上老好了</h3>
        <p>嘿嘿黑</p>
    </div>
    return (
        // 將jsxobj這個(gè)對(duì)象顯示到頁(yè)面中去
        <div className='fa'>{jsxobj}</div>

    )
}
export default test

? ? ? ? （6：插值{}可以使用途徑

? ? ? ? ? ? ? ? （6.1：數(shù)據(jù)循環(huán)渲染

import { useState } from 'react'
function test() {
    // 想要將arr數(shù)組里面的元素遍歷裝到a標(biāo)簽中去
    // 第一種寫(xiě)法，使用for循環(huán)將其取到的元素當(dāng)作變量放到dive標(biāo)簽中去，再將遍歷的得到的div標(biāo)簽添加到新的數(shù)組中去
    let arr = ["你好", "react", "很高興認(rèn)識(shí)您", "我相信接下來(lái)的時(shí)間", "我們會(huì)相處的很愉快的"]
    let newarr = []
    for (let i = 0; i < arr.length; i++) {
        newarr.push(<div key={i}>{arr[i]}</div>)
    }
    return (
        <div>
            {newarr}
            {/* 第二種(最常用)：直接在標(biāo)簽中使用map函數(shù) ,將各個(gè)元素取出來(lái)放到div標(biāo)簽中當(dāng)作變量使用*/}
            <div >{arr.map((el, index) => <div key={index}>{el}</div>)}</div>
        </div>
    )
}
export default test

小案例：數(shù)組中的元素是對(duì)象，將每個(gè)元素都顯示在頁(yè)面上

import { useState } from 'react'
import './test.css'
function test() {
    // 將數(shù)組arr里面的數(shù)據(jù)取出來(lái)展現(xiàn)到頁(yè)面上
    let arr = [{ title: "電腦", discrbe: "真的不錯(cuò)", price: "1231元", location: "四川", comment: "發(fā)貨快，是正品，下次還來(lái)" },
    { title: "手機(jī)", discrbe: "正品直發(fā)", price: "2313元", location: "廣東" },
    { title: "電話手表", discrbe: "可以聊天的神奇軟件", price: "1231元", location: "廣東" }]
    return (
        // 用map函數(shù)將arr里面的元素取出來(lái)，然后通過(guò)點(diǎn)語(yǔ)法來(lái)取元素中的對(duì)象
        <div className='fa'>{arr.map((el, index) => <div className='big' key={index}>
            <h4>{el.title}</h4>
            <div>{el.discrbe}</div>
            <div>{el.price}</div>
            <div>{el.comment}</div>
        </div>)}
        </div>

    )
}
export default test

????????????????（6.2：標(biāo)簽事件(以點(diǎn)擊事件為例)

import { useState } from 'react'
function test() {
    // 定義一個(gè)函數(shù)dianj（沒(méi)傳參數(shù)）
    function dianji() {
        console.log("觸發(fā)了點(diǎn)擊事件");
    }
    function canshu() {
        console.log("觸發(fā)了傳遞參數(shù)的函數(shù)");
    }
    return (
        <div>
            {/* 點(diǎn)擊事件操作的函數(shù)不能加括號(hào)，加了括號(hào)是不用點(diǎn)擊就立即執(zhí)行 */}
            <div className="box" onClick={dianji}>點(diǎn)擊打印</div>
            <button onClick={canshu}>傳參數(shù)事件</button>
        </div>
    )
}
export default test

? ? ? ? ? ? ? ? （6.3：標(biāo)簽的屬性（className,style,src,href.....）

? ? ? ? ? ? ? ? ?（6.3.1：className:? ? ?

? ? ? ? ? ? ? ? ? ? ? 若只想一個(gè)類名需要在前面聲明一個(gè)對(duì)象obj={one1：”one“,one2:"two",one3:"three"}

????????????????????????????????格式：className={obj.one1}

? ? ? ? ? ? ? ? ? ? ? ? 若想要給一個(gè)標(biāo)簽多個(gè)類名可以聲明一個(gè)數(shù)組變量arr=【box1,box2,box3】

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?className={arr.join(' ')}

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 也可以直接claName={【box1,box2,box3,box4】.join(' ')}

? ? ? ? ? ? ? ? （6.3.2：style:分為全局樣式和局部樣式

? ? ? ? ? ? ? ? ? ? ? ? 全局樣式可以直接在main.jsx中引入作為全局樣式

/*.index.css文件中為 全局樣式 */
.name {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

//app.jsx文件中

import { useState } from 'react'
// 引入組件Box
import Box from './jubu.jsx'
function App() {
  return (
    <div>
      <div className='name'>全局樣式</div>
      <Box></Box>
    </div>
  )
}

export default App

? ? ? ? ? ? ? ? ? ? ? ? 局部樣式：當(dāng)項(xiàng)目中有幾個(gè)組件，組件中的類名重復(fù)時(shí)，則顯示的是后面執(zhí)行的那個(gè)樣式，若想要顯示各自的樣式，需要將各自的樣式設(shè)置為局部樣式（樣式文件后綴名修改為module.css），引入的方式必須為圖中的格式來(lái)引入（第四行），使用必須使用點(diǎn)語(yǔ)法加類名來(lái)使用

//jubu.jsx文件中

import { useState } from 'react'
// 引入局部樣式
import yangshi from './jubu.module.css'
function jubu() {
    return (
        <div className={yangshi.name}>局部樣式的效果</div>
    )
}
export default jubu


//jubu.module.css文件中
/* 局部樣式 */
.name {
    width: 100px;
    height: 50px;
    background-color: yellow;
    border-radius: 10px;
}

? ? ? ? ? ? ? ? （6.3.3：src和href：綁定的是一個(gè)地址或網(wǎng)址文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-738063.html

import { useState } from 'react'
function test() {
    // 點(diǎn)擊跳轉(zhuǎn)到百度首頁(yè)
    let tiaozhuan = "https://www.baidu.com"
    // 圖片顯示的網(wǎng)絡(luò)地址，也可以是本地地址
    let tupian = "https://tse1-mm.cn.bing.net/th/id/OIP-C.De4iKAMeTvWwPQxXNK74ZgHaE8?w=281&h=187&c=7&r=0&o=5&pid=1.7"
    return (
        <div>
            <a href={tiaozhuan}>點(diǎn)擊跳轉(zhuǎn)到百度首頁(yè)</a>
            <img src={tupian} alt="" />
        </div>
    )
}

export default test

到了這里，關(guān)于一、React基礎(chǔ)知識(shí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！