React example(18.x)

發表於 更新於 分類於 Disqus：
文章字數： 3.4k 所需閱讀時間 ≈ 3 分鐘

基本

useState : 更新新值, React 就會 re-render

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

// ===== run click count =========
function ClickCount() {
  // 更新新值, React 就會 re-render
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ClickCount />);
// ===== run click count =========

useEffect : 在 render 後做一些事情

show title
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

// ===== useEffect show title =========
function ClickCount() {
  // 更新新值, React 就會 re-render
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You click ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ClickCount />);
// ===== useEffect show title =========
條件執行 useEffect
1
2
3
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 僅在計數更改時才重新執行 effect

example

1st

install and run
1
2
3
4
5
6
7
8
9
10
11
# insatll create-react-app
npm install -g create-react-app

# install react app
create-react-app hello-world

# run react server
cd hello-world
npm run start

# browser http://localhost:3000/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

function App() {
	return (
		<h1> Hello world!</h1>
	)
  }

// create after root - (if create by create-react-app)
// const root = ReactDOM.createRoot(document.getElementById('root'));

// create after body
const rootElement = document.createElement('div')
document.body.appendChild(rootElement)
const root = ReactDOM.createRoot(rootElement)

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}