[TOC] ## :-: [React官網](https://www.reactjscn.com/) ***** ## :-: 準備工作 ### 使用腳手架搭建工程 - 官方：create-react-app - 第三方：next.js、umijs ### React工具及插件 - React開發者插件(瀏覽器) -- React Developer Tools - 代碼風格檢查 -- ESLint - ES7代碼快 -- ES7 React/Redux/GraphQL/React-Native snippets ### 讓js支持html代碼塊 (jsx) ``` // VSCode 設置中配置 emmet "emmet.includeLanguages": { "wxml": "html", "javascript":"javascriptreact" }, ``` ## :-: 基本命令 ``` -- 全局安裝React腳手架 $ npm install create-react-app -g -- 創建React項目'test-name'為項目名。 $ create-react-app test-name React項目下的命令 - 開啟一個服務 $ npm start - 編譯React項目，上線打包 $ npm run build - 開啟測試環境 $ npm test - 移除所有的工具(謹慎使用) $ npm run eject -- 打開VSCode編輯器 $ code . ``` :-: jsx語法 == js + xml(html) ## :-: Demo :-: index.js ``` import React from "react"; import { render } from "react-dom"; import { topList } from "./data.js"; // 引入css import "./index.css"; function test() { return "Hello World~"; } // <React.Fragment></React.Fragment> -- 包裹標簽 或者可以這樣寫'<>內容區</>' // 在jsx中、 { js } < html > // 關鍵字處理：class -- className 、 for -- htmlFor // class是關鍵字，需要寫成className // for也是關鍵字，需要寫成htmlFor。<label for="inp"></label><input id="inp" type="text"/> const html = ( <div style={{ width: "230px", backgroundColor: "#666", marginTop: "10px" }}> {test()} {JSON.stringify({ a: 123, b: "456", c: true })} {[<p key="0">---------------------</p>, 1, 2, 3]} </div> ), label = ( <> <label htmlFor="inp">激活</label> <input id="inp" type="text" /> </> ); let element = ( <React.Fragment> <div style={{ margin: "20px", border: "1px solid red", padding: "20px", width: "230px" }} > {label} {html} </div> <div className="wrapper"> <div className="search-title-box"> <h5 className="search-title">搜索熱點</h5> <span className="refresh">換一換</span> </div> <ul className="top-list-container"> {topList.map((item, index) => { const indexStyle = {}; switch (index) { case 0: indexStyle.backgroundColor = "#f54545"; break; case 1: indexStyle.backgroundColor = "#ff8547"; break; case 2: indexStyle.backgroundColor = "#ffac38"; break; default: break; } return ( <li className="top-list" key={item.id}> <div className="top-title"> <span className="hot-index" style={indexStyle}> {index + 1} </span> <a href="/" className="topic-title"> {item.title} </a> {item.new && <span className="topic-new">新</span>} </div> <div className="hot-degree"> <span>{item.hot}</span> </div> </li> ); })} </ul> </div> </React.Fragment> ); // 渲染標簽、innerHTML、相當于vue中的 v-html (危險的 設置 HTML) let str = "<span>我是HTML</span>"; let testDom = <div dangerouslySetInnerHTML={{ __html: str }} />; render(element, document.getElementById("root")); ``` :-: data.js ``` const topList = [ { id: 0, title: "老年人才用9鍵", new: true, hot: "46萬" }, { id: 1, title: "人販子張維平死刑", new: true, hot: "44萬" }, { id: 2, title: "全國凍哭預警地圖", new: false, hot: "35萬" }, { id: 3, title: "沈夢辰曬婚紗照", new: false, hot: "33萬" }, { id: 4, title: "戀愛4個月胖50近", new: true, hot: "32萬" }, { id: 5, title: "郭麒麟初中早戀", new: false, hot: "25萬" }, { id: 6, title: "男孩滑雪遭遇雪崩", new: true, hot: "24萬" }, { id: 7, title: "大熊貓玩菜刀", new: false, hot: "24萬" }, { id: 8, title: "姿態宣布退役", new: false, hot: "22萬" }, { id: 9, title: "衛龍辣條吃出蟲子", new: false, hot: "20萬" }, { id: 10, title: "女生被罰抱頭蹲", new: true, hot: "20萬" } ]; export { topList }; ``` :-: