1
import React, { Children } from "react";
2
import ReactDOM from "react-dom";
3
import "./index.css";
4
import App from "./App";
5

6
const element = <h1>你好，世界！</h1>;
7
// <App /> 普通對象
8

9
let root = document.getElementById("root");
10

11
ReactDOM.render(element, root);

1
function clock() {
2
  let time = new Date().toLocaleTimeString();
3
  let element = <h1>Current Time: { time }</h1>;
4
  let root = document.querySelector('#root')
5
  ReactDOM.render(element, root)
6
}
7

8
clock();
9

10
// 間隔函數
11
setInterval(clock, 1000);

1
// react 函數式組件
2
// 組件開頭必須大寫
3
function Clock(props) {
4
  return (
5
    <h1>Current Time: { props.date.toLocaleTimeString() }</h1>
6
  );
7
}
8

9
function run() {
10
  // date 傳參
11
  ReactDOM.render(
12
    <Clock date={ new Date() } />,
13
    document.querySelector('#root')
14
  )
15
}
16

17
setInterval(run, 1000);

1
// 駝峰命名
2
// style 中如果存在多個單字的屬性組合，第二個單字開始，首字母大寫。
3
// 可以不首字母大寫，但要換寫法
4
let exampleStyle = {
5
  background: "skyblue",
6
  borderBottom: "1px solid red",
7
  // 不用首字母大寫的方法 e.g.
8
  // "background-img": "url(https...)"
9
}
10
let element = (
11
  <div>
12
    <h1 style={exampleStyle}>Hello World</h1>
13
  </div>
14
)
15

16
// class 在 Js 中是關鍵字，所以要改成 className
17
// className 和 style 等屬性不能是 string，必須是對象參數
18
// 不能有多個 className 或是多個 style，會被自動刪掉剩一個
19
// className 可以用 string 相加的方式
20
let classStr = "abc"
21

22
let element1 = (
23
  <div>
24
    <h1 className={"cba " + classStr}>Hello World</h1>
25
  </div>
26
)
27

28
// react 中 className array 無法像 Vue 一樣可以自動拆解
29
// 所以要加上 join 去做間隔
30
let classArray = ['abc', 'cba'].join(" ");
31
let elementArrayClass = (
32
  <div>
33
    {/* 在 HTML 寫註釋 */}
34
    <h1 className={classArray}>Hello World</h1>
35
  </div>
36
  // 在 JS 寫註釋
37
)
38

39
ReactDOM.render(
40
  element1,
41
  document.querySelector('#root')
42
)

1
// React event
2
// 綁定事件使用駝峰命名法
3
// {} 傳入一個函數，不是 String
4

5
// 原生 js 阻止默認行為時，可以直接返回 return false
6
// react 中，阻止默認必須使用 e.preventDefault();
7
class ClickCom extends React.Component {
8
  render() {
9
    return (
10
      <div>
11
        <form action="https://www.google.com" target="_blank">
12
          <button onClick={this.preventEvent}>submit</button>
13
        </form>
14
        {/* es6 箭頭函數 */}
15
        <button
16
          onClick={(e) => {
17
            this.preventEvent1("msg: 123", e);
18
          }}
19
        >
20
          submit
21
        </button>
22
        {/* 不使用 es6 箭頭函數傳遞多個參數的方式 */}
23
        <button
24
          onClick={function (e) {
25
            this.preventEvent1("msg: 123", e);
26
          }.bind(this)}
27
        >
28
          submit
29
        </button>
30
      </div>
31
    );
32
  }
33

34
  preventEvent = (e) => {
35
    console.log(e.preventDefault);
36
    e.preventDefault();
37
    // js 原生寫法
38
    // return false
39
  };
40

41
  preventEvent1 = (msg, e) => {
42
    console.log(msg);
43
    // js 原生寫法
44
    // return false
45
  };
46
}
47

48
ReactDOM.render(<ClickCom />, document.querySelector("#root"));

1
// React 條件渲染
2

3
// 1. 直接通過條件運算返回要渲染的 JSX 對象
4
// 2. 通過條件運算得出 JSX 對象，將對象渲染到模板
5

6
// 情況一
7
function UserGreet(params) {
8
  return (<h1>welcome to sign in</h1>)
9
}
10

11
function UserLogin(params) {
12
  return (<h1>請先登入</h1>)
13
}
14

15
class ParentCom extends React.Component {
16
  constructor(props) {
17
    super(props)
18
    this.state = {
19
      isLogin: false
20
    }
21
  }
22

23
  render() {
24
    if(this.state.isLogin) {
25
      return (<UserGreet/>)
26
    } else {
27
      return (<UserLogin/>)
28
    }
29
  }
30
}
31

32
ReactDOM.render(<ParentCom />, document.querySelector("#root"));
33

34
// 情況二
35
// 自己類推

1
// List 渲染
2

3
let array = ["banana", "apple", "peach"];
4

5
let arrayHTML = [<li>banana</li>, <li>apple</li>, <li>peach</li>]
6

7
class Welcome extends React.Component {
8
  constructor(props) {
9
    super(props)
10
  }
11

12
  render() {
13
    return (
14
      <div>
15
        <ul>
16
          {array}
17
          {arrayHTML}
18
        </ul>
19
      </div>
20
    )
21
  }
22
}
23

24
ReactDOM.render(<Welcome />, document.querySelector("#root"));

1
// 作為模板
2
function ListItem(props) {
3
  return (
4
    <li key={props.index}>
5
      <h3>
6
        {props.index} : {props.data.title}
7
      </h3>
8
      <p>{props.data.content}</p>
9
    </li>
10
  );
11
}
12

13
// 有動態事件的方式
14
class ListItem2 extends React.Component {
15
  constructor(props) {
16
    super(props);
17
  }
18

19
  render() {
20
    return (
21
      <li
22
        key={this.props.index}
23
        onClick={(event) => {
24
          this.clickEvent(this.props.index, this.props.data.title, event);
25
        }}
26
      >
27
        <h3>
28
          {this.props.index} : {this.props.data.title}
29
        </h3>
30
        <p>{this.props.data.content}</p>
31
      </li>
32
    );
33
  }
34

35
  clickEvent = (index, title, event) => {
36
    alert(index + " - " + title);
37
  };
38
}
39

40
class Welcome extends React.Component {
41
  constructor(props) {
42
    super(props);
43
    this.state = {
44
      list: [
45
        {
46
          title: "NO1 111",
47
          content: "11111",
48
        },
49
        {
50
          title: "NO2 222",
51
          content: "222",
52
        },
53
        {
54
          title: "NO3 333",
55
          content: "333",
56
        },
57
      ],
58
    };
59
  }
60

61
  render() {
62
    // 最原始方法
63
    // let listArr = [];
64
    // for(let i = 0; i < this.state.list.length; i++) {
65
    //   let item = (
66
    //     <ul>
67
    //       <li><h3>{this.state.list[i].title}</h3></li>
68
    //       <li><h5>{this.state.list[i].content}</h5></li>
69
    //     </ul>
70
    //   )
71

72
    //   listArr.push(item);
73
    // }
74

75
    // 使用數組 map 方法，對每一項數據進行 JSX 的形式進行加工，
76
    // 最終得到 1 個每一項都是 JSX 對象的數組，將數組渲染到模板。
77
    // Key 需要放入每一項中
78
    let listArr = this.state.list.map((item, index) => {
79
      return (
80
        // <li key={index}>
81
        //   <h3>{index} : { item.title }</h3>
82
        //   <p>{ item.content }</p>
83
        // </li>
84
        // <ListItem data={item} index={index} key={index} />
85

86
        <ListItem2 data={item} index={index} key={index} />
87
      );
88
    });
89

90
    return (
91
      <div>
92
        {/* 最原始方式 */}
93
        {/* {listArr} */}
94
        <ul>{listArr}</ul>
95
      </div>
96
    );
97
  }
98
}
99

100
ReactDOM.render(<Welcome />, document.querySelector("#root"));

1
// 可以解構
2
// 這樣就不用每次都寫 react.Component
3
import { Component } from 'react'
4

5
class ComLife extends Component {
6
  constructor(props) {
7
    super(props) // 調用繼承 Component 的 構造函數
8
    this.state = {
9
      msg: "hello world msg"
10
    }
11
    console.log("constructor 構造函數")
12
  }
13

14
  componentWillMount() {
15
    // 已過時
16
    // 通常用來 ajax 請求
17
    // 添加動畫前的類
18
    console.log("ComponentWillMount  組件將要渲染")
19
  }
20

21
  componentDidMount() {
22
    // 用來渲染動畫
23
    console.log("ComponentDidMount   組件渲染完畢")
24
  }
25

26
  componentWillReceiveProps() {
27
    // 已過時
28
    // 用來查看 props 內容是什麼
29
    console.log("ComponentWillReceiveProps  組件將要接受 props 數據")
30
  }
31

32
  componentWillUpdate() {
33
    // 已過時
34
    console.log("ComponentWillUpdate   組件將要更新")
35
  }
36

37
  componentDidUpdate() {
38
    console.log("ComponentDidUpdate   組件已經更新完畢")
39
  }
40

41
  componentWillUnmount() {
42
    console.log("ComponentWillUnMount   組件將要卸載")
43
  }
44

45
  render() {
46
    console.log("render 渲染函數")
47
    return (
48
      <div>
49
        <h1>hello</h1>
50
      </div>
51
    )
52
  }
53
}

1
// 組件中寫入內容，這些內容可以被識別和控制。React 需要自己開發支持插槽功能
2
// 原理：組件中寫入的 HTML，可以傳入到 props 中
3

4
class ParentCom extends React.Component {
5
  constructor(props) {
6
    super(props);
7
    this.state = {
8
      arr: [1, 2, 3],
9
    };
10
  }
11

12
  render() {
13
    console.log(this.props);
14
    return (
15
      <div>
16
        <h1>組件插槽</h1>
17
        {this.props.children}
18
        <ChildCom>
19
          <h1 data-position="header">這是放置到頭部的內容</h1>
20
          <h1 data-position="main">這是放置到主要的內容</h1>
21
          <h1 data-position="footer">這是放置到尾部的內容</h1>
22
        </ChildCom>
23
      </div>
24
    );
25
  }
26
}
27

28
class ChildCom extends React.Component {
29
  render() {
30
    let headerCom, mainCom, footerCom;
31
    this.props.children.forEach((item, index) => {
32
      if (item.props["data-position"] === "header") {
33
        headerCom = item;
34
      } else if (item.props["data-position"] === "main") {
35
        mainCom = item;
36
      } else {
37
        footerCom = item;
38
      }
39
    });
40
    return (
41
      <div>
42
        <div className="header">{headerCom}</div>
43
        <div className="main">{mainCom}</div>
44
        <div className="footer">{footerCom}</div>
45
      </div>
46
    );
47
  }
48
}
49

50
class RootCom extends React.Component {
51
  render() {
52
    return (
53
      <ParentCom>
54
        {/* 插槽 */}
55
        {/* 添加 data 屬性可以傳參，data- 後面接想要取的屬性名 */}
56
        <h2 data-name="a" data-index={this.state.arr[0]}>
57
          子組件一
58
        </h2>
59
        <h2 data-name="b" data-index={this.state.arr[1]}>
60
          子組件二
61
        </h2>
62
        <h2 data-name="c" data-index={this.state.arr[2]}>
63
          子組件三
64
        </h2>
65
      </ParentCom>
66
    );
67
  }
68
}
69

70
ReactDOM.render(<RootCom />, document.querySelector("#root"));

1
// hash 模式
2
// as 是取別名
3
// import { HashRouter as router, Link, Route } from 'react-router-dom'
4

5
// History 模式 / 後端匹配使用
6
import { BrowserRouter as Router, Link, Route } from "react-router-dom";

1
function Home(params) {
2
  return (
3
    <div>
4
      <h1>admin首頁</h1>
5
    </div>
6
  );
7
}
8

9
function Me(params) {
10
  console.log(params);
11
  return (
12
    <div>
13
      <h1>admin個人頁面</h1>
14
    </div>
15
  );
16
}
17

18
function Product(params) {
19
  return (
20
    <div>
21
      <h1>admin產品頁面</h1>
22
    </div>
23
  );
24
}
25

26
function News(params) {
27
  console.log(params)
28
  return (
29
    <div>
30
      新聞頁
31
      新聞 id: {params.match.params.id}
32
    </div>
33
  )
34
}
35

36
class App extends React.Component {
37
  render() {
38
    // 這裡的 search 是 query string
39
    // 可以傳 state
40
    let meObj = {
41
      pathname: "/me", // 路徑
42
      search: "?username=admin", // get 請求參數
43
      hash: "#abc", // 設置 hash 錨值
44
      state: { msg: "helloWorld" }, // 傳入組件的數據
45
    };
46
    return (
47
      <div id="app">
48
        {/* 全局 */}
49
        <div>所有頁面都顯示的內容</div>
50
        {/* Router 可以在一個組件中寫多個 */}
51
        {/* <Router>
52
          <Route path="/" exact component={() => (<div>首頁</div>)}></Route>
53
          <Route path="/me" component={() => (<div>me</div>)}></Route>
54
          <Route path="/product" component={() => (<div>product</div>)}></Route>
55
        </Router> */}
56

57
        {/* Router 設置基礎路徑 basename */}
58
        <Router basename="/admin">
59
          <div className="nav">
60
            <Link to="/">首頁</Link>
61
            <Link to="/product">產品</Link>
62
            {/* Link 可以設置 to 屬性進行頁面跳轉，to 屬性可以直接寫路徑的字符串，也可以通過 1 個對象，進行路進的配置 */}
63
            {/* replace 屬性 將新地址制換成歷史訪問紀錄的原地址 */}
64
            <Link to={meObj} replace>個人中心</Link>
65
            {/* 動態路由 */}
66
            <Link to="/news/456789">news</Link>
67
          </div>
68
          <Route path="/" exact component={Home}></Route>
69
          <Route path="/product" exact component={Product}></Route>
70
          <Route path="/me" exact component={Me}></Route>
71
          {/* 動態路由 */}
72
          <Route path="/news/:id" component={News}></Route>
73
        </Router>
74
      </div>
75
    );
76
  }
77
}
78

79
export default App;

1
// 重定向組件
2
// 如果訪問某個組件時，如果有重定向組件，那麼就會修改頁面路徑，使得頁面內容顯示為所定向路徑的內容
3

4
// Switch 組件
5
// 讓 Switch 組件內容的 Route 只匹配一個，只要匹配到了，剩餘的規則就不再匹配
6

7
import { Redirect, Switch } from "react-router-dom";
8

9
function LoginInfo(params) {
10
  // params.loginSuccess = 'success'
11
  // params.loginSuccess = 'fail
12
  if (params.location.state.loginState === "success") {
13
    return (
14
      // 重定向組件
15
      <Redirect to="/admin"></Redirect>
16
    );
17
  } else {
18
    return <Redirect to="/login"></Redirect>;
19
  }
20
}
21

22
let formCom = () => {
23
  let pathObj = {
24
    pathname: "/loginInfo",
25
    state: {
26
      loginState: "success",
27
    },
28
  };
29
  return (
30
    <div>
31
      <h1>表單驗證</h1>
32
      <Link to={pathObj}>登入後表單驗證</Link>
33
    </div>
34
  );
35
};
36

37
class ChildCom extends React.Component {
38
  constructor(props) {
39
    super(props);
40
  }
41
  render() {
42
    return (
43
      <div>
44
        <button onClick={this.clickEvent}>跳轉到首頁</button>
45
      </div>
46
    );
47
  }
48

49
  clickEvent = () => {
50
    console.log(this.props);
51
    // 可以傳值
52
    // this.props.history.push("/", {msg: "這是由 ChildCom 發給首頁的數據"})
53
    // this.props.history.replace("/", {msg: "這是由 ChildCom 發給首頁的數據"})
54

55
    // 前進
56
    this.props.history.go(1);
57
    this.props.history.goForward();
58
    // 後退
59
    this.props.history.go(-1);
60
    this.props.history.goBack();
61
  };
62
}
63

64
class App extends React.Component {
65
  render() {
66
    return (
67
      <div>
68
        <Router>
69
          <Switch>
70
            <Route
71
              path="/"
72
              exact
73
              component={(props) => {
74
                console.log(props);
75
                return <h1>首頁</h1>;
76
              }}
77
            ></Route>
78
            <Route path="/form" exact component={formCom}></Route>
79
            <Route
80
              path="/login"
81
              exact
82
              component={() => <h1>登入頁</h1>}
83
            ></Route>
84
            <Route path="/loginInfo" exact component={LoginInfo}></Route>
85
            <Route path="/admin" exact component={() => <h1>Admin</h1>}></Route>
86

87
            {/* Router 會全部匹配，所以如果有兩個相同的 path 會兩個都匹配 */}
88
            {/* 所以需要用到 Switch 去匹配，匹配到一個成功就不會繼續匹配 */}
89
            <Route path="/abc" exact component={() => <h1>abc1</h1>}></Route>
90
            <Route path="/abc" exact component={() => <h1>abc2</h1>}></Route>
91
            <Route path="/child" exact component={ChildCom}></Route>
92
          </Switch>
93
        </Router>
94
      </div>
95
    );
96
  }
97
}
98

99
export default App;

1
import { createStore } from "redux";
2

3
// 用於通過動作，創建新的 state
4
// reduce 有兩個作用，一個釋初始化數據，第二個是通過獲取動作，改變數據
5
const reducer = function (state = { num: 0 }, action) {
6
  switch (action.type) {
7
    case "add":
8
      state.num++;
9
      break;
10
    case "decrement":
11
      state.num--;
12
      break;
13
    default:
14
      break;
15
  }
16
  return { ...state }; // 相當於對象的 COPY
17
};
18

19
// 創建倉庫
20
const store = createStore(reducer);
21

22
function add() {
23
  // 通過倉庫的方法 dispatch 進數據修改
24
  // dispatch 觸發 reducer
25
  store.dispatch({ type: "add" });
26
  console.log(store.getState());
27
}
28

29
function decrement() {
30
  store.dispatch({ type: "decrement" });
31
  console.log(store.getState());
32
}
33

34
const Counter = function () {
35
  let state = store.getState();
36
  return (
37
    <div>
38
      <h1>計數數量：{state.num}</h1>
39

40
      <button onClick={add}>+1</button>
41
      <button onClick={decrement}>-1</button>
42
    </div>
43
  );
44
};
45

46
ReactDOM.render(<Counter />, document.querySelector("#root"));
47

48
// 監聽數據變化，重新渲染
49
// 當數據改變時觸發
50
store.subscribe(() => {
51
  ReactDOM.render(<Counter />, document.querySelector("#root"));
52
});