目錄

React 安裝

React基本使用

React腳手架

腳手架使用React

JSX基本使用

JSX清單渲染

JSX條件渲染

JSX模闆精簡

JSX樣式控制

JSX綜合案例

React 安裝

1. npm i react react-dom
2. npm init -y（生成基礎目錄檔案）

<!-- 引入js檔案 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
           

React基本使用

1. 建立react元素

// 建立react元素
const title = React.createElement(元素名稱, 元素屬性（可以是對象）, 元素子節點);
// 進階使用
const title = React.createElement(
    "h1",
    { title: "标題", id: 01 },
    "束帶結發",
    React.createElement("span", null, "span節點")
);
           

1. 渲染元素

ReactDOM.render(要渲染的react元素, 挂載點);
           

React腳手架

1. 初始化項目

npx create-react-app my-app
           

1. 啟動項目

npm start|| yarn start
           

腳手架使用React

1. 導入react和react-dom包

// 1、導入react
import React from "react";
import  ReactDOM  from "react";
           

JSX基本使用

1. 使用JSX建立react元素

// 使用JSX建立react元素
const title = <h1>使用JSX建立react元素</h1>
           

1. 渲染react元素

/ 渲染react元素
ReactDOM.render(title,document.getElementById('root'))
           

JSX清單渲染

1. 技術方案：return，map重複渲染的模闆；
2. 注意事項：周遊清單時需要一個類型為number/string不可重複的key，送出diff性能
3. key僅在内部使用，不會出現再真實的dom中

const songs = [
  { id: 1, name: '癡心絕對' },
  { id: 2, name: '像我這樣的人' },
  { id: 3, name: '南山南' }
]
function App() {
  return (
    <div className="App">
      <ul>
        {songs.map(song=><li key={song.id}>{song.name}</li>)}
      </ul>
    </div>
  );
}
           

JSX條件渲染

1. 技術方案:三元表達式-滿足條件-渲染一個span
2. &&

// 技術方案:三元表達式-滿足條件-渲染一個span
const flag = true
// &&
function App() {
  return (
    <div className="App">
      {flag ? <div>
        <span>span</span>
      </div>:null}
      {true && <span>spantow</span>}
    </div>
  );
}
           

JSX模闆精簡

1. 原則：模闆中的邏輯盡量保持精簡
2. 複雜的多分支邏輯，收斂為一個函數，通過一個專門的函數來寫分支邏輯，模闆中隻負責調用

// 一個狀态type 1 2 3
// 1-> h1
// 1-> h2
// 1-> h3
// 原則：模闆中的邏輯盡量保持精簡
// 複雜的多分支邏輯，收斂為一個函數，通過一個專門的函數來寫分支邏輯，模闆中隻負責調用
const getHtag = (type)=>{
  if(type === 1){
   return <h1>h1</h1>
  }
  if(type === 2){
    return <h1>h2</h1>
   }
   if(type === 3){
    return <h1>h3</h1>
   }

}
function App() {
  return (
    <div className="App">
      {getHtag(1)}
      {getHtag(2)}
      {getHtag(3)}
    </div>
  );
}
           

JSX樣式控制

1. 行内樣式：在元素身上綁定一個style屬性
2. 類名樣式：在元素身上綁定className屬性
3. 動态類名控制

// 樣式控制
// 行内樣式：在元素身上綁定一個style屬性
// 類名樣式：在元素身上綁定className屬性
import './app.css'
const style = {
  color:'red',fontSize:'30px'
}
// 動态類名控制
const activeFlag = true
function App() {
  return (
    <div className="App">
      <span style={{color:'red',fontSize:'30px'}}>span</span>
      <span style={style}>span</span>
      <span className="active">span</span>
      <span className={activeFlag ? 'active': ''}>動态span</span>
    </div>
  );
}
           

JSX綜合案例

1. 技術方案：map周遊清單
2. 動态類名的控制

import './index.css'
import avatar from './images/avatar.png'
// 依賴的資料
const state = {
  // hot: 熱度排序  time: 時間排序
  tabs: [
    {
      id: 1,
      name: '熱度',
      type: 'hot'
    },
    {
      id: 2,
      name: '時間',
      type: 'time'
    }
  ],
  active: 'hot',
  list: [
    {
      id: 1,
      author: '劉德華',
      comment: '給我一杯忘情水',
      time: new Date('2021-10-10 09:09:00'),
      // 1: 點贊 0：無态度 -1:踩
      attitude: 1
    },
    {
      id: 2,
      author: '周傑倫',
      comment: '哎喲，不錯哦',
      time: new Date('2021-10-11 09:09:00'),
      // 1: 點贊 0：無态度 -1:踩
      attitude: 0
    },
    {
      id: 3,
      author: '五月天',
      comment: '不打擾，是我的溫柔',
      time: new Date('2021-10-11 10:09:00'),
      // 1: 點贊 0：無态度 -1:踩
      attitude: -1
    }
  ]
}
function formatTime(time){
  // 時間格式化 2022-02-28
  return `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`
}
function App () {
  return (
    <div className="App">
      <div className="comment-container">
        {/* 評論數 */}
        <div className="comment-head">
          <span>5 評論</span>
        </div>
        {/* 排序 */}
        <div className="tabs-order">
          <ul className="sort-container">
            {state.tabs.map(item => <li key={item.id} className={item.type === state.active ? 'on' : ""}>按{item.name}排序</li>)}
          </ul>
        </div>

        {/* 添加評論 */}
        <div className="comment-send">
          <div className="user-face">
            <img className="user-head" src={avatar} alt="" />
          </div>
          <div className="textarea-container">
            <textarea
              cols="80"
              rows="5"
              placeholder="發條友善的評論"
              className="ipt-txt"
            />
            <button className="comment-submit">發表評論</button>
          </div>
          <div className="comment-emoji">
            <i className="face"></i>
            <span className="text">表情</span>
          </div>
        </div>

        {/* 評論清單 */}
        <div className="comment-list">
          {state.list.map(item=>(
          <div className="list-item" key={item.id}>
            <div className="user-face">
              <img className="user-head" src={avatar} alt="" />
            </div>
            <div className="comment">
              <div className="user">{item.author}</div>
              <p className="text">{item.comment}</p>
              <div className="info">
                <span className="time">{formatTime(item.time)}</span>
                {/* 動态類名控制 */}
                <span className={item.attitude === 1 ? 'like liked' : 'like'}>
                  <i className="icon" />
                </span>
                <span className={item.attitude === 1 ? 'hate hated' : 'hate'}>
                  <i className="icon" />
                </span>
                <span className="reply btn-hover">删除</span>
              </div>
            </div>
          </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default App