[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 };
```
:-: 
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request