├── es6
    ├── sideEffect.js
    ├── App.js
    ├── namedExport.js
    ├── asyncAwait.html
    ├── esModule.html
    ├── arrowFunction.html
    ├── asyncAwaitAdv.html
    ├── promise.html
    ├── destructuringAssignment.html
    ├── forEach.html
    ├── objectReference.html
    └── shorthand.html
├── data
    └── menu.json
├── components
    ├── weatherIcon
    │   ├── 多雲時陰.svg
    │   ├── 多雲短暫雨.svg
    │   ├── 陰短暫雨.svg
    │   ├── 陰有雨.svg
    │   ├── 多雲時陰短暫雨.svg
    │   ├── 陰時多雲短暫雨.svg
    │   ├── 多雲時陰有雨.svg
    │   ├── 陰時多雲有雨.svg
    │   ├── 多雲.svg
    │   ├── 晴時多雲.svg
    │   ├── 多雲時晴.svg
    │   └── 晴午後短暫雷陣雨.svg
    ├── dataMap.html
    ├── propsDestructuring.html
    ├── createLayout.html
    ├── nestComponent.html
    └── createComponent.html
├── index.html
├── intro
    ├── createApp.html
    ├── variables.html
    ├── howToWork.html
    ├── commonProblem.html
    ├── jsType.html
    ├── reactAttr.html
    └── expression.html
├── form
    ├── reactForm.html
    ├── reactForm2.html
    ├── basicHookForm.html
    ├── submitForm.html
    └── formEvent.html
├── hooks
    ├── inputComponent.html
    ├── startHooks.html
    ├── inputUseState.html
    ├── aboutUseState.html
    └── useStateCallback.html
└── hooksAdv
    ├── crossComponent.html
    ├── useCustomHook3.html
    ├── useCustomHook.html
    ├── lifeCycle.html
    ├── useReducerIntro.html
    └── useMemo.html


/es6/sideEffect.js:
--------------------------------------------------------------------------------
1 | (function (global) {
2 |   global.$ = '我是 jQuery';
3 | })(window);


--------------------------------------------------------------------------------
/es6/App.js:
--------------------------------------------------------------------------------
1 | 
2 | const App = () => {
3 |   const myName = '卡斯伯'
4 |   return React.createElement('div', null, `我的名字是 ${myName}`);
5 | }
6 | 
7 | export default App;


--------------------------------------------------------------------------------
/es6/namedExport.js:
--------------------------------------------------------------------------------
1 | export const a = 1;
2 | 
3 | export function b() {
4 |   console.log('1');
5 | }
6 | 
7 | export function c(a, b) {
8 |   return a + b;
9 | }


--------------------------------------------------------------------------------
/data/menu.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "intro": [
 3 |     {
 4 |       "name": "建立 React",
 5 |       "url": "createApp"
 6 |     },
 7 |     {
 8 |       "name": "章節挑戰",
 9 |       "url": "createReactFinal"
10 |     }
11 |   ]
12 | }


--------------------------------------------------------------------------------
/components/weatherIcon/多雲時陰.svg:
--------------------------------------------------------------------------------
1 | <svg height="61.12" viewBox="0 0 94.24 61.12" width="94.24" xmlns="http://www.w3.org/2000/svg"><path d="m81.86 13.49c-.36 0-.73 0-1.09 0-1.65-5.49-6.32-9.42-11.71-9.42a19.58 19.58 0 0 0 -2.14.15 14.37 14.37 0 0 0 -10.1-4.22c-8.14 0-14.76 6.51-16.17 15.67a13.78 13.78 0 0 0 -5.8 10.8c0 7.16 5.29 13 11.8 13h35.21c6.71 0 12.38-5.94 12.38-13s-5.67-12.98-12.38-12.98z" fill="#999"/><path d="m67.42 27.94c-.53 0-1 0-1.57.07a17.72 17.72 0 0 0 -16.79-12.09 28 28 0 0 0 -3.07.19 21.94 21.94 0 0 0 -14.49-5.39c-11.66 0-21.15 8.31-23.18 20-5.04 3.28-8.32 8.58-8.32 13.81a16.78 16.78 0 0 0 16.93 16.59h50.49c9.62 0 17.74-7.6 17.74-16.59s-8.16-16.59-17.74-16.59z" fill="#ddd"/><path d="m77.78 52.54a22.92 22.92 0 0 1 -3.91 5.74 16.35 16.35 0 0 0 7.48-7.51c3.63-7.65.09-16.47-7.92-20.32 6.37 4.42 8.38 13.6 4.35 22.09z" fill="#ccc" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/components/weatherIcon/多雲短暫雨.svg:
--------------------------------------------------------------------------------
1 | <svg height="76.93" viewBox="0 0 91.43 76.93" width="91.43" xmlns="http://www.w3.org/2000/svg"><path d="m72.38 18.5c-.57 0-1.13 0-1.69.06a19 19 0 0 0 -18-13 29.82 29.82 0 0 0 -3.29.2 23.63 23.63 0 0 0 -15.58-5.76c-12.52 0-22.71 8.93-24.89 21.49-5.41 3.45-8.93 9.2-8.93 14.81a18 18 0 0 0 18.17 17.81h54.21c10.32 0 19.05-8.11 19.05-17.81s-8.73-17.8-19.05-17.8z" fill="#ddd"/><path d="m85.34 44.77a23.2 23.2 0 0 1 -4 5.84 16.62 16.62 0 0 0 7.66-7.61c3.7-7.77.09-16.74-8-20.66 6.4 4.47 8.44 13.8 4.34 22.43z" fill="#ccc" fill-rule="evenodd"/><g fill="#00bcd4"><path d="m27.17 46.45c-.06 0-5.66 5.14-6.26 7.32a4.09 4.09 0 1 0 7.89 2.23c.6-2.23-1.56-9.53-1.63-9.55z"/><path d="m42 64.42c-.06 0-5.67 5.14-6.27 7.32a4.1 4.1 0 1 0 7.9 2.18c.55-2.18-1.63-9.48-1.63-9.5z"/><path d="m60.46 52.71c-.06 0-5.66 5.14-6.26 7.32a4.09 4.09 0 1 0 7.89 2.17c.61-2.2-1.56-9.48-1.63-9.49z"/></g></svg>


--------------------------------------------------------------------------------
/components/weatherIcon/陰短暫雨.svg:
--------------------------------------------------------------------------------
1 | <svg height="77.33" viewBox="0 0 91.43 77.33" width="91.43" xmlns="http://www.w3.org/2000/svg"><path d="m72.38 18.5c-.57 0-1.13 0-1.69.06a19 19 0 0 0 -18-13 29.79 29.79 0 0 0 -3.28.2 23.63 23.63 0 0 0 -15.59-5.76c-12.52 0-22.71 8.93-24.89 21.49-5.41 3.45-8.93 9.2-8.93 14.81a18 18 0 0 0 18.17 17.81h54.21c10.32 0 19.05-8.11 19.05-17.81s-8.73-17.8-19.05-17.8z" fill="#999"/><path d="m84.34 44.77a23.2 23.2 0 0 1 -4 5.84 16.67 16.67 0 0 0 7.66-7.61c3.7-7.77.09-16.74-8-20.66 6.4 4.47 8.44 13.8 4.34 22.43z" fill="#777" fill-rule="evenodd"/><g fill="#00bcd4"><path d="m26.85 46.86c-.07 0-5.67 5.13-6.27 7.31a4.1 4.1 0 1 0 7.9 2.18c.6-2.18-1.57-9.48-1.63-9.49z"/><path d="m41.62 64.82c-.06 0-5.66 5.14-6.26 7.32a4.09 4.09 0 1 0 7.89 2.18c.61-2.18-1.56-9.48-1.63-9.5z"/><path d="m60.14 53.11c-.07 0-5.67 5.14-6.27 7.32a4.1 4.1 0 1 0 7.9 2.17c.6-2.18-1.57-9.47-1.63-9.49z"/></g></svg>


--------------------------------------------------------------------------------
/components/weatherIcon/陰有雨.svg:
--------------------------------------------------------------------------------
1 | <svg height="83.27" viewBox="0 0 95.07 83.27" width="95.07" xmlns="http://www.w3.org/2000/svg"><path d="m75.26 19.23c-.58 0-1.17 0-1.75.07a19.78 19.78 0 0 0 -18.75-13.49 32.79 32.79 0 0 0 -3.42.19 24.52 24.52 0 0 0 -16.17-6c-13 0-23.62 9.28-25.88 22.35-5.63 3.59-9.29 9.56-9.29 15.4a18.73 18.73 0 0 0 18.9 18.51h56.36c10.74 0 19.81-8.47 19.81-18.51s-9.07-18.52-19.81-18.52z" fill="#999"/><path d="m87.5 46.13a24.27 24.27 0 0 1 -4.13 6.07 17.27 17.27 0 0 0 7.9-7.94c3.84-8.08.09-17.41-8.36-21.48 6.72 4.67 8.85 14.38 4.59 23.35z" fill="#777" fill-rule="evenodd"/><g fill="#00bcd4"><path d="m23.4 68.46a3.87 3.87 0 0 1 -4.62 2.79 3.85 3.85 0 0 1 -2.6-4.72c1.1-4.13 8.94-18.94 8.94-18.94s-.46 16.15-1.72 20.87z"/><path d="m36.69 80.2a3.74 3.74 0 1 1 -7.22-1.93c1.1-4.13 8.94-18.94 8.94-18.94s-.41 16.15-1.72 20.87z"/><path d="m55.59 68.46a3.74 3.74 0 1 1 -7.22-1.93c1.1-4.13 8.94-18.94 8.94-18.94s-.46 16.15-1.72 20.87z"/><path d="m69.53 80.35a3.74 3.74 0 1 1 -7.22-1.93c1.11-4.13 8.94-18.94 8.94-18.94s-.45 16.15-1.72 20.87z"/></g></svg>


--------------------------------------------------------------------------------
/components/weatherIcon/多雲時陰短暫雨.svg:
--------------------------------------------------------------------------------
1 | <svg height="82.45" viewBox="0 0 93.83 82.45" width="93.83" xmlns="http://www.w3.org/2000/svg"><path d="m81.46 13.49c-.37 0-.73 0-1.1 0-1.65-5.49-6.31-9.42-11.71-9.42a19.42 19.42 0 0 0 -2.13.15 14.39 14.39 0 0 0 -10.11-4.22c-8.13 0-14.75 6.51-16.17 15.67a13.78 13.78 0 0 0 -5.8 10.8c0 7.16 5.3 13 11.8 13h35.22c6.71 0 12.37-5.94 12.37-13s-5.66-12.98-12.37-12.98z" fill="#999"/><path d="m67.05 27.94q-.78 0-1.56.06a17.61 17.61 0 0 0 -16.7-12 30.39 30.39 0 0 0 -3 .19 21.81 21.81 0 0 0 -14.41-5.36c-11.6 0-21 8.27-23 19.91-5.12 3.18-8.38 8.5-8.38 13.7a16.69 16.69 0 0 0 16.83 16.5h50.22c9.57 0 17.65-7.56 17.65-16.5s-8.08-16.5-17.65-16.5z" fill="#ddd"/><path d="m78.14 52.28a21.49 21.49 0 0 1 -3.68 5.42 15.48 15.48 0 0 0 7-7.08c3.42-7.2.09-15.51-7.45-19.14 5.99 4.16 7.93 12.81 4.13 20.8z" fill="#ccc" fill-rule="evenodd"/><g fill="#00bcd4"><path d="m24.87 54.22c-.06 0-5.25 4.76-5.8 6.78a3.79 3.79 0 0 0 7.31 2c.56-2-1.45-8.77-1.51-8.78z"/><path d="m38.56 70.86c-.06 0-5.25 4.76-5.8 6.78a3.79 3.79 0 1 0 7.31 2c.56-2-1.45-8.76-1.51-8.78z"/><path d="m55.71 60c-.05 0-5.24 4.76-5.8 6.78a3.79 3.79 0 1 0 7.31 2c.56-1.99-1.45-8.78-1.51-8.78z"/></g></svg>


--------------------------------------------------------------------------------
/components/weatherIcon/陰時多雲短暫雨.svg:
--------------------------------------------------------------------------------
1 | <svg height="82.28" viewBox="0 0 94.09 82.28" width="94.09" xmlns="http://www.w3.org/2000/svg"><path d="m81.73 13.46c-.36 0-.73 0-1.09 0-1.64-5.46-6.31-9.39-11.64-9.39a19.34 19.34 0 0 0 -2.14.14 14.36 14.36 0 0 0 -10.14-4.21c-8.11 0-14.72 6.5-16.14 15.64a13.78 13.78 0 0 0 -5.79 10.79c0 7.14 5.29 13 11.79 13h35.15c6.7 0 12.36-5.94 12.36-13s-5.66-12.97-12.36-12.97z" fill="#ddd"/><path d="m67.31 27.9c-.52 0-1 0-1.57.06a17.68 17.68 0 0 0 -16.74-12.07 30.56 30.56 0 0 0 -3.06.19 22 22 0 0 0 -14.49-5.38c-11.64 0-21.12 8.3-23.14 20-5.03 3.2-8.31 8.54-8.31 13.76a16.75 16.75 0 0 0 16.9 16.54h50.41c9.6 0 17.69-7.56 17.69-16.54s-8.09-16.56-17.69-16.56z" fill="#999"/><path d="m77.65 52.45a22.67 22.67 0 0 1 -3.89 5.74 16.35 16.35 0 0 0 7.46-7.51c3.62-7.62.08-16.43-7.9-20.28 6.35 4.41 8.36 13.6 4.33 22.05z" fill="#777" fill-rule="evenodd"/><g fill="#00bcd4"><path d="m25 54.05c-.05 0-5.24 4.76-5.8 6.78a3.79 3.79 0 1 0 7.31 2c.59-2.01-1.42-8.77-1.51-8.78z"/><path d="m38.72 70.69s-5.24 4.76-5.8 6.78a3.79 3.79 0 1 0 7.31 2c.56-2-1.45-8.76-1.51-8.78z"/><path d="m55.88 59.84c-.06 0-5.25 4.76-5.81 6.78a3.8 3.8 0 0 0 7.32 2c.55-2-1.45-8.76-1.51-8.78z"/></g></svg>


--------------------------------------------------------------------------------
/components/weatherIcon/多雲時陰有雨.svg:
--------------------------------------------------------------------------------
1 | <svg height="85.3" viewBox="0 0 94.24 85.3" width="94.24" xmlns="http://www.w3.org/2000/svg"><path d="m81.86 13.49c-.36 0-.73 0-1.09 0-1.65-5.49-6.32-9.42-11.71-9.42a19.58 19.58 0 0 0 -2.14.15 14.37 14.37 0 0 0 -10.1-4.22c-8.14 0-14.76 6.51-16.17 15.67a13.78 13.78 0 0 0 -5.8 10.8c0 7.16 5.29 13 11.8 13h35.21c6.71 0 12.38-5.94 12.38-13s-5.67-12.98-12.38-12.98z" fill="#999"/><path d="m67.42 27.94c-.53 0-1 0-1.57.07a17.72 17.72 0 0 0 -16.79-12.09 28 28 0 0 0 -3.07.19 21.94 21.94 0 0 0 -14.49-5.39c-11.66 0-21.15 8.31-23.18 20-5.04 3.28-8.32 8.58-8.32 13.81a16.78 16.78 0 0 0 16.93 16.59h50.49c9.62 0 17.74-7.6 17.74-16.59s-8.16-16.59-17.74-16.59z" fill="#ddd"/><path d="m77.78 52.54a22.92 22.92 0 0 1 -3.91 5.74 16.35 16.35 0 0 0 7.48-7.51c3.63-7.65.09-16.47-7.92-20.32 6.37 4.42 8.38 13.6 4.35 22.09z" fill="#ccc" fill-rule="evenodd"/><g fill="#00bcd4"><path d="m21 72a3.47 3.47 0 0 1 -4.14 2.5 3.46 3.46 0 0 1 -2.33-4.23c1-3.7 8-17 8-17s-.44 14.54-1.53 18.73z"/><path d="m32.87 82.56a3.35 3.35 0 1 1 -6.47-1.73c1-3.7 8-17 8-17s-.4 14.5-1.53 18.73z"/><path d="m49.79 72a3.35 3.35 0 1 1 -6.46-1.73c1-3.7 8-17 8-17s-.4 14.54-1.54 18.73z"/><path d="m62.28 82.7a3.35 3.35 0 1 1 -6.46-1.7c1-3.69 8-17 8-17s-.4 14.46-1.54 18.7z"/></g></svg>


--------------------------------------------------------------------------------
/components/weatherIcon/陰時多雲有雨.svg:
--------------------------------------------------------------------------------
1 | <svg height="85.3" viewBox="0 0 94.24 85.3" width="94.24" xmlns="http://www.w3.org/2000/svg"><path d="m81.86 13.49c-.36 0-.73 0-1.09 0-1.65-5.49-6.32-9.42-11.71-9.42a19.58 19.58 0 0 0 -2.14.15 14.37 14.37 0 0 0 -10.1-4.22c-8.14 0-14.76 6.51-16.17 15.67a13.78 13.78 0 0 0 -5.8 10.8c0 7.16 5.29 13 11.8 13h35.21c6.71 0 12.38-5.94 12.38-13s-5.67-12.98-12.38-12.98z" fill="#ddd"/><path d="m67.42 27.94c-.53 0-1 0-1.57.07a17.72 17.72 0 0 0 -16.79-12.09 28 28 0 0 0 -3.07.19 21.94 21.94 0 0 0 -14.49-5.39c-11.66 0-21.15 8.31-23.18 20-5.04 3.28-8.32 8.58-8.32 13.81a16.78 16.78 0 0 0 16.93 16.59h50.49c9.62 0 17.74-7.6 17.74-16.59s-8.16-16.59-17.74-16.59z" fill="#999"/><path d="m77.78 52.54a22.92 22.92 0 0 1 -3.91 5.74 16.35 16.35 0 0 0 7.48-7.51c3.63-7.65.09-16.47-7.92-20.32 6.37 4.42 8.38 13.6 4.35 22.09z" fill="#777" fill-rule="evenodd"/><g fill="#00bcd4"><path d="m21 72a3.47 3.47 0 0 1 -4.14 2.5 3.46 3.46 0 0 1 -2.33-4.23c1-3.7 8-17 8-17s-.44 14.54-1.53 18.73z"/><path d="m32.87 82.56a3.35 3.35 0 1 1 -6.47-1.73c1-3.7 8-17 8-17s-.4 14.5-1.53 18.73z"/><path d="m49.79 72a3.35 3.35 0 1 1 -6.46-1.73c1-3.7 8-17 8-17s-.4 14.54-1.54 18.73z"/><path d="m62.28 82.7a3.35 3.35 0 1 1 -6.46-1.7c1-3.69 8-17 8-17s-.4 14.46-1.54 18.7z"/></g></svg>


--------------------------------------------------------------------------------
/components/weatherIcon/多雲.svg:
--------------------------------------------------------------------------------
1 | <svg height="63.83" viewBox="0 0 92.3 63.83" width="92.3" xmlns="http://www.w3.org/2000/svg"><path d="m85.34 54.49a23.2 23.2 0 0 1 -4 5.84 16.62 16.62 0 0 0 7.66-7.64c3.7-7.77.09-16.74-8-20.66 6.4 4.5 8.44 13.83 4.34 22.46z" fill="#ccc" fill-rule="evenodd"/><path d="m72.38 28.22c-.57 0-1.13 0-1.69.06a19 19 0 0 0 -18-13 32.52 32.52 0 0 0 -3.29.2 23.63 23.63 0 0 0 -15.58-5.76c-12.52 0-22.71 8.93-24.89 21.49-5.41 3.46-8.93 9.2-8.93 14.79a18 18 0 0 0 18.17 17.83h54.21c10.32 0 19.05-8.15 19.05-17.81s-8.73-17.8-19.05-17.8zm9 32.11a23.2 23.2 0 0 0 4-5.84c4.1-8.63 2.06-18-4.41-22.46 8.09 3.97 11.7 12.89 8.03 20.66a16.62 16.62 0 0 1 -7.62 7.64z" fill="#ddd"/><path d="m52.67 15.31a19.31 19.31 0 0 1 4 .43 22.17 22.17 0 0 1 19.66.83 18.16 18.16 0 0 0 -17.35-5 17.91 17.91 0 0 0 -7.26 3.75z" fill="#ffd74b" fill-rule="evenodd"/><path d="m84.4 32.33a20.6 20.6 0 0 0 .3-3.06l3.71-1.89 3.89-2-4.24-1-4-1a21.12 21.12 0 0 0 -2-5l2.22-3.38 2.37-3.62-4.2 1.21-4 1.14a22.39 22.39 0 0 0 -4.27-3.29l.2-4.08.22-4.27-3 3.09-2.9 3a22 22 0 0 0 -5.4-.74l-1.96-3.65-1.99-3.79-1.06 4.15-1 4a22.1 22.1 0 0 0 -5.09 2l-3.51-2.22-3.69-2.29 1.19 4.11 1.14 3.91a1.8 1.8 0 0 1 -.19.2c.75.51 1.48 1 2.21 1.64a18.67 18.67 0 0 1 13.38-5.63 19 19 0 0 1 18.82 19.06c0 .52 0 1-.08 1.53" fill="#f3712d"/><path d="m62.73 9.87a18.67 18.67 0 0 0 -13.36 5.63c.81-.09 1.62-.15 2.31-.18a17.91 17.91 0 0 1 7.32-3.74 18.16 18.16 0 0 1 17.35 5 22.17 22.17 0 0 0 -19.66-.83 19 19 0 0 1 14 12.54c.56 0 1.12-.06 1.69-.06a19.62 19.62 0 0 1 9.09 2.24c0-.5.08-1 .08-1.53a19 19 0 0 0 -18.82-19.07z" fill="#ffc82c"/></svg>


--------------------------------------------------------------------------------
/components/weatherIcon/晴時多雲.svg:
--------------------------------------------------------------------------------
1 | <svg height="77.43" viewBox="0 0 94.65 77.43" width="94.65" xmlns="http://www.w3.org/2000/svg"><path d="m78.93 48c-.47 0-.93 0-1.39.05a15.71 15.71 0 0 0 -14.89-10.67c-.62 0-1.68 0-2.71.16a19.5 19.5 0 0 0 -12.84-4.77c-10.34 0-18.75 7.37-20.55 17.74-4.46 2.85-7.37 7.59-7.37 12.22a14.87 14.87 0 0 0 15 14.7h44.75c8.52 0 15.72-6.73 15.72-14.7s-7.2-14.73-15.72-14.73z" fill="#ddd"/><path d="m88.63 69.72a19.23 19.23 0 0 1 -3.28 4.83 13.76 13.76 0 0 0 6.28-6.31c3-6.42.07-13.82-6.65-17 5.35 3.65 7.02 11.36 3.65 18.48z" fill="#ccc" fill-rule="evenodd"/><path d="m66.94 45.6a27.55 27.55 0 0 0 1.06-7l4.89-2.49 5.11-2.61-5.59-1.33-5.31-1.28a27.33 27.33 0 0 0 -2.64-6.54l3-4.54 3.11-4.81-5.57 1.63-5.29 1.51a28.71 28.71 0 0 0 -5.61-4.34l.28-5.38.28-5.64-4 4.08-3.83 3.89a28.91 28.91 0 0 0 -7.12-1l-2.52-4.75-2.63-5-1.41 5.48-1.34 5.23a29.2 29.2 0 0 0 -6.7 2.63l-4.62-2.88-4.84-3 1.58 5.42 1.5 5.12a28.84 28.84 0 0 0 -4.48 5.55l-5.49-.23-5.76-.21 4.14 3.89 3.94 3.72a27.47 27.47 0 0 0 -1.06 7l-4.89 2.5-5.13 2.6 5.59 1.34 5.33 1.27a27.33 27.33 0 0 0 2.64 6.57l-3 4.55-3.11 4.73 5.55-1.59 5.3-1.51a28.36 28.36 0 0 0 5.63 4.34l-.28 5.39-.28 5.63 4-4.08 3.83-3.89a29.4 29.4 0 0 0 7.12 1l2.51 4.77 2.63 5 1.41-5.49 1.34-5.23a29.2 29.2 0 0 0 6.7-2.62l4.62 2.88 4.84 3-1.58-5.41-1.5-5.17a28.76 28.76 0 0 0 4.48-5.55l5.49.22 5.76.24-4.14-3.9z" fill="#f3712d"/><path d="m63.85 38.16a24.84 24.84 0 1 1 -24.85-25.16 25 25 0 0 1 24.85 25.16z" fill="#ffc82c"/><path d="m35.79 19.11a28.28 28.28 0 0 0 -20 17.59 24.58 24.58 0 0 1 18.21-21.42 24 24 0 0 1 22.88 6.57 28.5 28.5 0 0 0 -21.09-2.74z" fill="#ffd74b" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/components/weatherIcon/多雲時晴.svg:
--------------------------------------------------------------------------------
1 | <svg height="81.35" viewBox="0 0 108.87 81.35" width="108.87" xmlns="http://www.w3.org/2000/svg"><path d="m98.57 42.4a25.91 25.91 0 0 0 1-6.49l4.55-2.32 4.77-2.44-5.2-1.24-5-1.18a25.54 25.54 0 0 0 -2.45-6.09l2.76-4.22 2.94-4.42-5.16 1.47-4.92 1.41a26.75 26.75 0 0 0 -5.23-4l.25-5 .27-5.24-3.73 3.74-3.56 3.62a27.47 27.47 0 0 0 -6.63-.92l-2.33-4.43-2.45-4.65-1.3 5.1-1.25 4.9a27.56 27.56 0 0 0 -6.24 2.45l-4.29-2.72-4.5-2.81 1.46 5 1.4 4.8a26.74 26.74 0 0 0 -4.16 5.16l-5.11-.2-5.35-.23 3.89 3.67 3.67 3.45a25.62 25.62 0 0 0 -1 6.5l-4.55 2.32-4.76 2.43 5.19 1.24 5 1.19a25.47 25.47 0 0 0 2.45 6.08l-2.77 4.22-2.99 4.45 5.16-1.48 4.92-1.41a26.35 26.35 0 0 0 5.24 4l-.26 5-.3 5.28 3.73-3.79 3.6-3.6a27.32 27.32 0 0 0 6.62.91l2.33 4.44 2.45 4.65 1.27-5.12 1.29-4.88a27.48 27.48 0 0 0 6.23-2.45l4.29 2.68 4.5 2.81-1.46-5-1.4-4.81a26.87 26.87 0 0 0 4.17-5.16l5.1.21 5.36.22-3.85-3.62z" fill="#f3712d"/><path d="m95.69 35.49a23.1 23.1 0 1 1 -23.1-23.38 23.23 23.23 0 0 1 23.1 23.38z" fill="#ffc82c"/><path d="m69.59 17.77a26.3 26.3 0 0 0 -18.59 16.36 22.83 22.83 0 0 1 17-19.92 22.3 22.3 0 0 1 21.28 6.11 26.51 26.51 0 0 0 -19.69-2.55z" fill="#ffd74b" fill-rule="evenodd"/><path d="m71.47 46.19c-.56 0-1.11 0-1.66.06a18.79 18.79 0 0 0 -17.81-12.81 31.66 31.66 0 0 0 -3.24.2 23.34 23.34 0 0 0 -15.36-5.72c-12.4 0-22.4 8.82-24.58 21.22-5.34 3.41-8.82 9.09-8.82 14.63a17.78 17.78 0 0 0 17.94 17.58h53.53c10.2 0 18.81-8 18.81-17.58s-8.61-17.58-18.81-17.58z" fill="#ddd"/><path d="m84.27 72.13a22.91 22.91 0 0 1 -3.91 5.77 16.43 16.43 0 0 0 7.5-7.55c3.64-7.67.09-16.53-8-20.39 6.44 4.43 8.46 13.65 4.41 22.17z" fill="#ccc" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/components/weatherIcon/晴午後短暫雷陣雨.svg:
--------------------------------------------------------------------------------
1 | <svg height="100.41" viewBox="0 0 113.03 100.41" width="113.03" xmlns="http://www.w3.org/2000/svg"><path d="m95 51q-.8 0-1.59.06a18 18 0 0 0 -17-12.25 28.61 28.61 0 0 0 -3.1.19 22.26 22.26 0 0 0 -14.67-5.5c-11.82 0-21.44 8.43-23.5 20.29-5.1 3.26-8.43 8.69-8.43 14a17 17 0 0 0 17.16 16.8h51.13c9.75 0 18-7.7 18-16.81s-8.21-16.78-18-16.78z" fill="#ddd"/><path d="m68.09 46.38a28.43 28.43 0 0 0 1.08-7.11l5-2.53 5.22-2.66-5.68-1.36-5.43-1.3a27.65 27.65 0 0 0 -2.68-6.65l3-4.62 3.18-4.85-5.64 1.62-5.38 1.53a29 29 0 0 0 -5.76-4.45l.28-5.48.29-5.73-4.05 4.21-3.89 3.95a30 30 0 0 0 -7.25-1l-2.55-4.87-2.68-5.08-1.43 5.57-1.36 5.33a29.77 29.77 0 0 0 -6.82 2.67l-4.7-2.93-4.92-3.07 1.6 5.51 1.53 5.25a29.37 29.37 0 0 0 -4.55 5.67l-5.59-.23-5.86-.24 4.21 4 4 3.77a28.57 28.57 0 0 0 -1.08 7.11l-5 2.54-5.18 2.61 5.68 1.35 5.43 1.3a27.89 27.89 0 0 0 2.68 6.66l-3 4.61-3.21 4.85 5.64-1.61 5.38-1.54a29 29 0 0 0 5.73 4.42l-.28 5.47-.29 5.73 4.08-4.14 3.89-4a30 30 0 0 0 7.25 1l2.55 4.85 2.67 5.09 1.44-5.58 1.36-5.28a29.79 29.79 0 0 0 6.82-2.68l4.69 2.94 4.93 3.08-1.6-5.51-1.53-5.27a29.06 29.06 0 0 0 4.55-5.65l5.59.23 5.85.24-4.2-4z" fill="#f3712d"/><path d="m64.94 38.82a25.26 25.26 0 1 1 -25.26-25.57 25.42 25.42 0 0 1 25.26 25.57z" fill="#ffc82c"/><path d="m36.4 19.44a28.72 28.72 0 0 0 -20.3 17.89 25 25 0 0 1 18.51-21.79 24.37 24.37 0 0 1 23.28 6.69 29 29 0 0 0 -21.49-2.79z" fill="#ffd74b" fill-rule="evenodd"/><path d="m86.82 78.18h11.04l-4.5 7.39h4.64l-9.51 12.27 1.89-7.31h-8.9z" fill="#ffe41f"/><path d="m84.39 16.16a13.5 13.5 0 0 1 18.61 15.08l3.12 1.23-8.39 5.41-2.47-9.67 3 1.17a8.52 8.52 0 0 0 -16.41-3.95l-4.65-1.83a13.46 13.46 0 0 1 7.19-7.44z" fill="#41bff7"/><g fill="#00bcd4"><path d="m38.53 75.62c-.06 0-4.61 4.18-5.1 5.95a3.33 3.33 0 1 0 6.42 1.77c.49-1.77-1.27-7.71-1.32-7.72z"/><path d="m50.55 90.23c-.06 0-4.61 4.18-5.1 6a3.33 3.33 0 1 0 6.42 1.77c.49-1.82-1.27-7.75-1.32-7.77z"/><path d="m65.61 80.71c-.06 0-4.61 4.18-5.1 6a3.33 3.33 0 1 0 6.42 1.77c.49-1.82-1.27-7.76-1.32-7.77z"/></g></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html><head><title>首頁</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 2 | </head><body class="bg-lighter">
 3 | <div class="container main my-5"><div class="row"><main class="col post">
 4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">首頁</h1><small>檔名：<code>index.html</code></small>
 5 |   <div class="alert bg-light"><p class="mb-0">React 練習手冊，請同學搭配課程完成本練習，<br>  <a href="/es6/shorthand.html" class="alert-link">練習開始</a>。</p></div>
 6 | </div>
 7 | <!-- 🔥🔥練習開始🔥🔥 -->
 8 | 
 9 | <!-- 🙇🙇練習結束🙇🙇 -->
10 | </main>
11 |   
12 |   </div>
13 | </div>
14 | 
15 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
16 |   <div class="container-fluid">
17 |     <a class="navbar-brand" href="/">React 練習手冊</a>
18 |     <div class="collapse navbar-collapse" id="navbarCollapse">
19 |       <ul class="navbar-nav">
20 |         <li class="nav-item">
21 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
22 |         </li>
23 |         <li class="nav-item">
24 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
25 |         </li>
26 |         <li class="nav-item">
27 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
28 |         </li>
29 |         <li class="nav-item">
30 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
31 |         </li>
32 |         <li class="nav-item">
33 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
34 |         </li>
35 |         <li class="nav-item">
36 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
37 |         </li>
38 |       </ul>
39 |     </div>
40 |   </div>
41 | </nav>
42 | 
43 | <footer class="footer py-2 bg-light">
44 |   <div class="container text-center">
45 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
46 |   </div>
47 | </footer>
48 | <link rel="stylesheet" href="/stylesheets/all.css">
49 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
50 | </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/intro/createApp.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>環境安裝</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">環境安裝</h1><small>檔名：<code>createApp.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <!-- 五步驟，載入 React -->
  7 | <!-- https://reactjs.org/docs/cdn-links.html#gatsby-focus-wrapper -->
  8 | <!-- https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx -->
  9 | 
 10 | <!-- 補充說明：定義 App 元件時，可自訂名稱但請使用大寫做開頭 -->
 11 | <!-- 詳細說明文件：https://zh-hant.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized -->
 12 | <!-- 🙇🙇練習結束🙇🙇 -->
 13 | </main>
 14 |   
 15 |     <aside
 16 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 17 |   
 18 |   <div class="list-group">
 19 |   
 20 |     <a href="/intro/createApp.html"
 21 |       class="list-group-item list-group-item-action
 22 |         
 23 |         active">
 24 |       建立 React
 25 |     </a>
 26 |   
 27 |     <a href="/intro/variables.html"
 28 |       class="list-group-item list-group-item-action
 29 |         
 30 |         ">
 31 |       使用資料驅動
 32 |     </a>
 33 |   
 34 |     <a href="/intro/expression.html"
 35 |       class="list-group-item list-group-item-action
 36 |         
 37 |         ">
 38 |       什麼是 JavaScript 表達式
 39 |     </a>
 40 |   
 41 |     <a href="/intro/jsType.html"
 42 |       class="list-group-item list-group-item-action
 43 |         
 44 |         ">
 45 |       部分型別注意事項
 46 |     </a>
 47 |   
 48 |     <a href="/intro/howToWork.html"
 49 |       class="list-group-item list-group-item-action
 50 |         
 51 |         ">
 52 |       JSX 做了什麼事？
 53 |     </a>
 54 |   
 55 |     <a href="/intro/reactAttr.html"
 56 |       class="list-group-item list-group-item-action
 57 |         
 58 |         ">
 59 |       JSX 與 HTML 的標籤屬性
 60 |     </a>
 61 |   
 62 |     <a href="/intro/jsxStyle.html"
 63 |       class="list-group-item list-group-item-action
 64 |         
 65 |         ">
 66 |       如何加入 Style
 67 |     </a>
 68 |   
 69 |     <a href="/intro/commonProblem.html"
 70 |       class="list-group-item list-group-item-action
 71 |         
 72 |         ">
 73 |       JSX 常見問題
 74 |     </a>
 75 |   
 76 |     <a href="/intro/introFinal.html"
 77 |       class="list-group-item list-group-item-action
 78 |         
 79 |         ">
 80 |       章節挑戰
 81 |     </a>
 82 |   
 83 |   </div>
 84 |   <div class="mt-3 text-end p-2 bg-light rounded">
 85 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
 86 |   </div>
 87 | </div>
 88 | 
 89 | </aside>
 90 |     
 91 |   </div>
 92 | </div>
 93 | 
 94 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
 95 |   <div class="container-fluid">
 96 |     <a class="navbar-brand" href="/">React 練習手冊</a>
 97 |     <div class="collapse navbar-collapse" id="navbarCollapse">
 98 |       <ul class="navbar-nav">
 99 |         <li class="nav-item">
100 |           <a class="nav-link active" href="/intro/createApp.html">認識 React</a>
101 |         </li>
102 |         <li class="nav-item">
103 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
104 |         </li>
105 |         <li class="nav-item">
106 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
107 |         </li>
108 |         <li class="nav-item">
109 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
110 |         </li>
111 |         <li class="nav-item">
112 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
113 |         </li>
114 |         <li class="nav-item">
115 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
116 |         </li>
117 |       </ul>
118 |     </div>
119 |   </div>
120 | </nav>
121 | 
122 | <footer class="footer py-2 bg-light">
123 |   <div class="container text-center">
124 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
125 |   </div>
126 | </footer>
127 | <link rel="stylesheet" href="/stylesheets/all.css">
128 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
129 | </body>
130 | </html>
131 | 


--------------------------------------------------------------------------------
/intro/variables.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>使用資料驅動</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">使用資料驅動</h1><small>檔名：<code>variables.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <!-- template：https://getbootstrap.com/docs/5.2/components/card/ -->
  8 | <script type="text/babel">
  9 | console.log(React, ReactDOM);
 10 | 
 11 | 
 12 | const el = document.getElementById('root');
 13 | </script>
 14 | 
 15 | <!-- 🙇🙇練習結束🙇🙇 -->
 16 | </main>
 17 |   
 18 |     <aside
 19 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 20 |   
 21 |   <div class="list-group">
 22 |   
 23 |     <a href="/intro/createApp.html"
 24 |       class="list-group-item list-group-item-action
 25 |         
 26 |         ">
 27 |       建立 React
 28 |     </a>
 29 |   
 30 |     <a href="/intro/variables.html"
 31 |       class="list-group-item list-group-item-action
 32 |         
 33 |         active">
 34 |       使用資料驅動
 35 |     </a>
 36 |   
 37 |     <a href="/intro/expression.html"
 38 |       class="list-group-item list-group-item-action
 39 |         
 40 |         ">
 41 |       什麼是 JavaScript 表達式
 42 |     </a>
 43 |   
 44 |     <a href="/intro/jsType.html"
 45 |       class="list-group-item list-group-item-action
 46 |         
 47 |         ">
 48 |       部分型別注意事項
 49 |     </a>
 50 |   
 51 |     <a href="/intro/howToWork.html"
 52 |       class="list-group-item list-group-item-action
 53 |         
 54 |         ">
 55 |       JSX 做了什麼事？
 56 |     </a>
 57 |   
 58 |     <a href="/intro/reactAttr.html"
 59 |       class="list-group-item list-group-item-action
 60 |         
 61 |         ">
 62 |       JSX 與 HTML 的標籤屬性
 63 |     </a>
 64 |   
 65 |     <a href="/intro/jsxStyle.html"
 66 |       class="list-group-item list-group-item-action
 67 |         
 68 |         ">
 69 |       如何加入 Style
 70 |     </a>
 71 |   
 72 |     <a href="/intro/commonProblem.html"
 73 |       class="list-group-item list-group-item-action
 74 |         
 75 |         ">
 76 |       JSX 常見問題
 77 |     </a>
 78 |   
 79 |     <a href="/intro/introFinal.html"
 80 |       class="list-group-item list-group-item-action
 81 |         
 82 |         ">
 83 |       章節挑戰
 84 |     </a>
 85 |   
 86 |   </div>
 87 |   <div class="mt-3 text-end p-2 bg-light rounded">
 88 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
 89 |   </div>
 90 | </div>
 91 | 
 92 | </aside>
 93 |     
 94 |   </div>
 95 | </div>
 96 | 
 97 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
 98 |   <div class="container-fluid">
 99 |     <a class="navbar-brand" href="/">React 練習手冊</a>
100 |     <div class="collapse navbar-collapse" id="navbarCollapse">
101 |       <ul class="navbar-nav">
102 |         <li class="nav-item">
103 |           <a class="nav-link active" href="/intro/createApp.html">認識 React</a>
104 |         </li>
105 |         <li class="nav-item">
106 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
107 |         </li>
108 |         <li class="nav-item">
109 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
110 |         </li>
111 |         <li class="nav-item">
112 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
113 |         </li>
114 |         <li class="nav-item">
115 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
116 |         </li>
117 |         <li class="nav-item">
118 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
119 |         </li>
120 |       </ul>
121 |     </div>
122 |   </div>
123 | </nav>
124 | 
125 | <footer class="footer py-2 bg-light">
126 |   <div class="container text-center">
127 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
128 |   </div>
129 | </footer>
130 | <link rel="stylesheet" href="/stylesheets/all.css">
131 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
132 | </body>
133 | </html>
134 | 


--------------------------------------------------------------------------------
/es6/asyncAwait.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>Async / Await</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">Async / Await</h1><small>檔名：<code>asyncAwait.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <!-- 本章節額外載入的遠端套件 -->
  7 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  8 | <script>
  9 | 
 10 | // #1 當資料有順序性的時候
 11 | 
 12 | 
 13 | // #2 使用 async await 來修改
 14 | 
 15 | 
 16 | 
 17 | // #3 立即函式的寫法
 18 | 
 19 | 
 20 | 
 21 | 
 22 | 
 23 | 
 24 | </script>
 25 | <!-- 🙇🙇練習結束🙇🙇 -->
 26 | </main>
 27 |   
 28 |     <aside
 29 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 30 |   
 31 |   <div class="list-group">
 32 |   
 33 |     <a href="/es6/shorthand.html"
 34 |       class="list-group-item list-group-item-action
 35 |         
 36 |         ">
 37 |       語法糖
 38 |     </a>
 39 |   
 40 |     <a href="/es6/destructuringAssignment.html"
 41 |       class="list-group-item list-group-item-action
 42 |         
 43 |         ">
 44 |       解構
 45 |     </a>
 46 |   
 47 |     <a href="/es6/arrowFunction.html"
 48 |       class="list-group-item list-group-item-action
 49 |         
 50 |         ">
 51 |       箭頭函式
 52 |     </a>
 53 |   
 54 |     <a href="/es6/forEach.html"
 55 |       class="list-group-item list-group-item-action
 56 |         
 57 |         ">
 58 |       陣列方法
 59 |     </a>
 60 |   
 61 |     <a href="/es6/objectReference.html"
 62 |       class="list-group-item list-group-item-action
 63 |         
 64 |         ">
 65 |       物件參考特性
 66 |     </a>
 67 |   
 68 |     <a href="/es6/promise.html"
 69 |       class="list-group-item list-group-item-action
 70 |         
 71 |         ">
 72 |       Promise
 73 |     </a>
 74 |   
 75 |     <a href="/es6/asyncAwait.html"
 76 |       class="list-group-item list-group-item-action
 77 |         
 78 |         active">
 79 |       Async/Await
 80 |     </a>
 81 |   
 82 |     <a href="/es6/asyncAwaitAdv.html"
 83 |       class="list-group-item list-group-item-action
 84 |         
 85 |         ">
 86 |       Async/Await 進階
 87 |     </a>
 88 |   
 89 |     <a href="/es6/esModule.html"
 90 |       class="list-group-item list-group-item-action
 91 |         
 92 |         ">
 93 |       ES Module
 94 |     </a>
 95 |   
 96 |   </div>
 97 |   <div class="mt-3 text-end p-2 bg-light rounded">
 98 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
 99 |   </div>
100 | </div>
101 | 
102 | </aside>
103 |     
104 |   </div>
105 | </div>
106 | 
107 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
108 |   <div class="container-fluid">
109 |     <a class="navbar-brand" href="/">React 練習手冊</a>
110 |     <div class="collapse navbar-collapse" id="navbarCollapse">
111 |       <ul class="navbar-nav">
112 |         <li class="nav-item">
113 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
114 |         </li>
115 |         <li class="nav-item">
116 |           <a class="nav-link active" href="/es6/shorthand.html">JS 必備觀念</a>
117 |         </li>
118 |         <li class="nav-item">
119 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
120 |         </li>
121 |         <li class="nav-item">
122 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
123 |         </li>
124 |         <li class="nav-item">
125 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
126 |         </li>
127 |         <li class="nav-item">
128 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
129 |         </li>
130 |       </ul>
131 |     </div>
132 |   </div>
133 | </nav>
134 | 
135 | <footer class="footer py-2 bg-light">
136 |   <div class="container text-center">
137 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
138 |   </div>
139 | </footer>
140 | <link rel="stylesheet" href="/stylesheets/all.css">
141 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
142 | </body>
143 | </html>
144 | 


--------------------------------------------------------------------------------
/intro/howToWork.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>JSX 做了什麼事？</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">JSX 做了什麼事？</h1><small>檔名：<code>howToWork.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | function App() {
  9 |   return <h1>React 我來了 <small className="text-danger">{new Date().toLocaleDateString() }</small></h1>
 10 | }
 11 | 
 12 | const el = document.getElementById('root');
 13 | const root = ReactDOM.createRoot(el);
 14 | root.render(<App/>)
 15 | </script>
 16 | 
 17 | <!-- 🙇🙇練習結束🙇🙇 -->
 18 | </main>
 19 |   
 20 |     <aside
 21 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 22 |   
 23 |   <div class="list-group">
 24 |   
 25 |     <a href="/intro/createApp.html"
 26 |       class="list-group-item list-group-item-action
 27 |         
 28 |         ">
 29 |       建立 React
 30 |     </a>
 31 |   
 32 |     <a href="/intro/variables.html"
 33 |       class="list-group-item list-group-item-action
 34 |         
 35 |         ">
 36 |       使用資料驅動
 37 |     </a>
 38 |   
 39 |     <a href="/intro/expression.html"
 40 |       class="list-group-item list-group-item-action
 41 |         
 42 |         ">
 43 |       什麼是 JavaScript 表達式
 44 |     </a>
 45 |   
 46 |     <a href="/intro/jsType.html"
 47 |       class="list-group-item list-group-item-action
 48 |         
 49 |         ">
 50 |       部分型別注意事項
 51 |     </a>
 52 |   
 53 |     <a href="/intro/howToWork.html"
 54 |       class="list-group-item list-group-item-action
 55 |         
 56 |         active">
 57 |       JSX 做了什麼事？
 58 |     </a>
 59 |   
 60 |     <a href="/intro/reactAttr.html"
 61 |       class="list-group-item list-group-item-action
 62 |         
 63 |         ">
 64 |       JSX 與 HTML 的標籤屬性
 65 |     </a>
 66 |   
 67 |     <a href="/intro/jsxStyle.html"
 68 |       class="list-group-item list-group-item-action
 69 |         
 70 |         ">
 71 |       如何加入 Style
 72 |     </a>
 73 |   
 74 |     <a href="/intro/commonProblem.html"
 75 |       class="list-group-item list-group-item-action
 76 |         
 77 |         ">
 78 |       JSX 常見問題
 79 |     </a>
 80 |   
 81 |     <a href="/intro/introFinal.html"
 82 |       class="list-group-item list-group-item-action
 83 |         
 84 |         ">
 85 |       章節挑戰
 86 |     </a>
 87 |   
 88 |   </div>
 89 |   <div class="mt-3 text-end p-2 bg-light rounded">
 90 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
 91 |   </div>
 92 | </div>
 93 | 
 94 | </aside>
 95 |     
 96 |   </div>
 97 | </div>
 98 | 
 99 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
100 |   <div class="container-fluid">
101 |     <a class="navbar-brand" href="/">React 練習手冊</a>
102 |     <div class="collapse navbar-collapse" id="navbarCollapse">
103 |       <ul class="navbar-nav">
104 |         <li class="nav-item">
105 |           <a class="nav-link active" href="/intro/createApp.html">認識 React</a>
106 |         </li>
107 |         <li class="nav-item">
108 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
109 |         </li>
110 |         <li class="nav-item">
111 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
112 |         </li>
113 |         <li class="nav-item">
114 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
115 |         </li>
116 |         <li class="nav-item">
117 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
118 |         </li>
119 |         <li class="nav-item">
120 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
121 |         </li>
122 |       </ul>
123 |     </div>
124 |   </div>
125 | </nav>
126 | 
127 | <footer class="footer py-2 bg-light">
128 |   <div class="container text-center">
129 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
130 |   </div>
131 | </footer>
132 | <link rel="stylesheet" href="/stylesheets/all.css">
133 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
134 | </body>
135 | </html>
136 | 


--------------------------------------------------------------------------------
/es6/esModule.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>ES 模組</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">ES 模組</h1><small>檔名：<code>esModule.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script>
  8 | // 因為 type="text/babel" 與 type="module" 相衝，所以課程前期不會用到 ESModule 定義元件
  9 | // #1 匯出匯入本一體，先掌握匯出更容易理解匯入
 10 | // #1-1 將標籤定義 <script type="module">
 11 | // #1-2 預設匯出：defaultExport.js
 12 | // 常見的匯出方式，通常用於匯出物件，在 React 開發中可用來匯出元件
 13 | 
 14 | // #1-3 具名匯出：namedExport.js
 15 | // 可用於匯出已定義的變數、物件、函式，專案開發中通常用於 “方法匯出”
 16 | // 第三方的框架、函式、套件很常使用具名定義 “方法”
 17 | 
 18 | // #2 匯入方法
 19 | // #2-1 預設匯入
 20 | // 因為預設匯出沒有名字，所以可以為它命名
 21 | 
 22 | 
 23 | // #2-2 具名匯入
 24 | // 單一匯入（建議寫法）
 25 | 
 26 | 
 27 | // 全部匯入（不建議，錯誤較難發現）
 28 | 
 29 | 
 30 | // #3 SideEffect
 31 | // sideEffect.js（沒有包含匯出的檔案）
 32 | 
 33 | 
 34 | </script>
 35 | <!-- 🙇🙇練習結束🙇🙇 -->
 36 | </main>
 37 |   
 38 |     <aside
 39 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 40 |   
 41 |   <div class="list-group">
 42 |   
 43 |     <a href="/es6/shorthand.html"
 44 |       class="list-group-item list-group-item-action
 45 |         
 46 |         ">
 47 |       語法糖
 48 |     </a>
 49 |   
 50 |     <a href="/es6/destructuringAssignment.html"
 51 |       class="list-group-item list-group-item-action
 52 |         
 53 |         ">
 54 |       解構
 55 |     </a>
 56 |   
 57 |     <a href="/es6/arrowFunction.html"
 58 |       class="list-group-item list-group-item-action
 59 |         
 60 |         ">
 61 |       箭頭函式
 62 |     </a>
 63 |   
 64 |     <a href="/es6/forEach.html"
 65 |       class="list-group-item list-group-item-action
 66 |         
 67 |         ">
 68 |       陣列方法
 69 |     </a>
 70 |   
 71 |     <a href="/es6/objectReference.html"
 72 |       class="list-group-item list-group-item-action
 73 |         
 74 |         ">
 75 |       物件參考特性
 76 |     </a>
 77 |   
 78 |     <a href="/es6/promise.html"
 79 |       class="list-group-item list-group-item-action
 80 |         
 81 |         ">
 82 |       Promise
 83 |     </a>
 84 |   
 85 |     <a href="/es6/asyncAwait.html"
 86 |       class="list-group-item list-group-item-action
 87 |         
 88 |         ">
 89 |       Async/Await
 90 |     </a>
 91 |   
 92 |     <a href="/es6/asyncAwaitAdv.html"
 93 |       class="list-group-item list-group-item-action
 94 |         
 95 |         ">
 96 |       Async/Await 進階
 97 |     </a>
 98 |   
 99 |     <a href="/es6/esModule.html"
100 |       class="list-group-item list-group-item-action
101 |         
102 |         active">
103 |       ES Module
104 |     </a>
105 |   
106 |   </div>
107 |   <div class="mt-3 text-end p-2 bg-light rounded">
108 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
109 |   </div>
110 | </div>
111 | 
112 | </aside>
113 |     
114 |   </div>
115 | </div>
116 | 
117 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
118 |   <div class="container-fluid">
119 |     <a class="navbar-brand" href="/">React 練習手冊</a>
120 |     <div class="collapse navbar-collapse" id="navbarCollapse">
121 |       <ul class="navbar-nav">
122 |         <li class="nav-item">
123 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
124 |         </li>
125 |         <li class="nav-item">
126 |           <a class="nav-link active" href="/es6/shorthand.html">JS 必備觀念</a>
127 |         </li>
128 |         <li class="nav-item">
129 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
130 |         </li>
131 |         <li class="nav-item">
132 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
133 |         </li>
134 |         <li class="nav-item">
135 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
136 |         </li>
137 |         <li class="nav-item">
138 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
139 |         </li>
140 |       </ul>
141 |     </div>
142 |   </div>
143 | </nav>
144 | 
145 | <footer class="footer py-2 bg-light">
146 |   <div class="container text-center">
147 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
148 |   </div>
149 | </footer>
150 | <link rel="stylesheet" href="/stylesheets/all.css">
151 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
152 | </body>
153 | </html>
154 | 


--------------------------------------------------------------------------------
/es6/arrowFunction.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>箭頭函式</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">箭頭函式</h1><small>檔名：<code>arrowFunction.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | // #1 箭頭函式改寫
  9 | function fn(a, b) {
 10 |   return a * b;
 11 | }
 12 | console.log(fn(2, 4));
 13 | 
 14 | 
 15 | // #2 箭頭函式的 this 變化（React Hook 寫法不太會踩到這個雷）
 16 | // var name = '全域'
 17 | // const person = {
 18 | //   name: '小明',
 19 | //   callName: function () { 
 20 | //     console.log('1', this.name); // 1 小明
 21 | //     setTimeout(function () {
 22 | //       console.log('2', this.name); // 2
 23 | //       console.log('3', this); // 3
 24 | //     }, 10);
 25 | //   },
 26 | // }
 27 | // person.callName();
 28 | 
 29 | 
 30 | 
 31 | // #3 箭頭函式在 React 的運用
 32 | function Card() {
 33 |   return <div className="card">
 34 |     <div className="card-body">這是一張卡片</div>
 35 |   </div>
 36 | }
 37 | function App() {
 38 |   return (
 39 |     <div>
 40 |       <Card></Card>
 41 |     </div>
 42 |   )
 43 | }
 44 | 
 45 | ReactDOM
 46 |   .createRoot(document.getElementById('root'))
 47 |   .render(<App></App>)
 48 | </script>
 49 | <!-- 🙇🙇練習結束🙇🙇 -->
 50 | </main>
 51 |   
 52 |     <aside
 53 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 54 |   
 55 |   <div class="list-group">
 56 |   
 57 |     <a href="/es6/shorthand.html"
 58 |       class="list-group-item list-group-item-action
 59 |         
 60 |         ">
 61 |       語法糖
 62 |     </a>
 63 |   
 64 |     <a href="/es6/destructuringAssignment.html"
 65 |       class="list-group-item list-group-item-action
 66 |         
 67 |         ">
 68 |       解構
 69 |     </a>
 70 |   
 71 |     <a href="/es6/arrowFunction.html"
 72 |       class="list-group-item list-group-item-action
 73 |         
 74 |         active">
 75 |       箭頭函式
 76 |     </a>
 77 |   
 78 |     <a href="/es6/forEach.html"
 79 |       class="list-group-item list-group-item-action
 80 |         
 81 |         ">
 82 |       陣列方法
 83 |     </a>
 84 |   
 85 |     <a href="/es6/objectReference.html"
 86 |       class="list-group-item list-group-item-action
 87 |         
 88 |         ">
 89 |       物件參考特性
 90 |     </a>
 91 |   
 92 |     <a href="/es6/promise.html"
 93 |       class="list-group-item list-group-item-action
 94 |         
 95 |         ">
 96 |       Promise
 97 |     </a>
 98 |   
 99 |     <a href="/es6/asyncAwait.html"
100 |       class="list-group-item list-group-item-action
101 |         
102 |         ">
103 |       Async/Await
104 |     </a>
105 |   
106 |     <a href="/es6/asyncAwaitAdv.html"
107 |       class="list-group-item list-group-item-action
108 |         
109 |         ">
110 |       Async/Await 進階
111 |     </a>
112 |   
113 |     <a href="/es6/esModule.html"
114 |       class="list-group-item list-group-item-action
115 |         
116 |         ">
117 |       ES Module
118 |     </a>
119 |   
120 |   </div>
121 |   <div class="mt-3 text-end p-2 bg-light rounded">
122 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
123 |   </div>
124 | </div>
125 | 
126 | </aside>
127 |     
128 |   </div>
129 | </div>
130 | 
131 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
132 |   <div class="container-fluid">
133 |     <a class="navbar-brand" href="/">React 練習手冊</a>
134 |     <div class="collapse navbar-collapse" id="navbarCollapse">
135 |       <ul class="navbar-nav">
136 |         <li class="nav-item">
137 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
138 |         </li>
139 |         <li class="nav-item">
140 |           <a class="nav-link active" href="/es6/shorthand.html">JS 必備觀念</a>
141 |         </li>
142 |         <li class="nav-item">
143 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
144 |         </li>
145 |         <li class="nav-item">
146 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
147 |         </li>
148 |         <li class="nav-item">
149 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
150 |         </li>
151 |         <li class="nav-item">
152 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
153 |         </li>
154 |       </ul>
155 |     </div>
156 |   </div>
157 | </nav>
158 | 
159 | <footer class="footer py-2 bg-light">
160 |   <div class="container text-center">
161 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
162 |   </div>
163 | </footer>
164 | <link rel="stylesheet" href="/stylesheets/all.css">
165 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
166 | </body>
167 | </html>
168 | 


--------------------------------------------------------------------------------
/es6/asyncAwaitAdv.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>Async / Await 進階</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">Async / Await 進階</h1><small>檔名：<code>asyncAwaitAdv.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <!-- 本章節額外載入的遠端套件 -->
  8 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  9 | <script type="text/babel">
 10 | // #1 Async function 的本質
 11 | // const asyncFn = async () => {
 12 | //   const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
 13 | // }
 14 | 
 15 | 
 16 | 
 17 | // #2 Async function 回傳值
 18 | 
 19 | // 取得 async function 回傳值得方法
 20 | 
 21 | 
 22 | // #3 Async function 錯誤處理
 23 | 
 24 | 
 25 | 
 26 | // async Function 與 React
 27 | const App = () => {
 28 |   const [data, setData] = React.useState({}) 
 29 | 
 30 |   React.useEffect(() => {
 31 |     (async () => {
 32 |       const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
 33 |       console.log(res);
 34 |       setData(res.data);
 35 |     })();
 36 |   }, []);
 37 | 
 38 |   return <div>
 39 |     {data.title}
 40 |   </div>
 41 | }
 42 | 
 43 | ReactDOM
 44 |   .createRoot(document.getElementById('root'))
 45 |   .render(<App/>)
 46 | </script>
 47 | <!-- 🙇🙇練習結束🙇🙇 -->
 48 | </main>
 49 |   
 50 |     <aside
 51 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 52 |   
 53 |   <div class="list-group">
 54 |   
 55 |     <a href="/es6/shorthand.html"
 56 |       class="list-group-item list-group-item-action
 57 |         
 58 |         ">
 59 |       語法糖
 60 |     </a>
 61 |   
 62 |     <a href="/es6/destructuringAssignment.html"
 63 |       class="list-group-item list-group-item-action
 64 |         
 65 |         ">
 66 |       解構
 67 |     </a>
 68 |   
 69 |     <a href="/es6/arrowFunction.html"
 70 |       class="list-group-item list-group-item-action
 71 |         
 72 |         ">
 73 |       箭頭函式
 74 |     </a>
 75 |   
 76 |     <a href="/es6/forEach.html"
 77 |       class="list-group-item list-group-item-action
 78 |         
 79 |         ">
 80 |       陣列方法
 81 |     </a>
 82 |   
 83 |     <a href="/es6/objectReference.html"
 84 |       class="list-group-item list-group-item-action
 85 |         
 86 |         ">
 87 |       物件參考特性
 88 |     </a>
 89 |   
 90 |     <a href="/es6/promise.html"
 91 |       class="list-group-item list-group-item-action
 92 |         
 93 |         ">
 94 |       Promise
 95 |     </a>
 96 |   
 97 |     <a href="/es6/asyncAwait.html"
 98 |       class="list-group-item list-group-item-action
 99 |         
100 |         ">
101 |       Async/Await
102 |     </a>
103 |   
104 |     <a href="/es6/asyncAwaitAdv.html"
105 |       class="list-group-item list-group-item-action
106 |         
107 |         active">
108 |       Async/Await 進階
109 |     </a>
110 |   
111 |     <a href="/es6/esModule.html"
112 |       class="list-group-item list-group-item-action
113 |         
114 |         ">
115 |       ES Module
116 |     </a>
117 |   
118 |   </div>
119 |   <div class="mt-3 text-end p-2 bg-light rounded">
120 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
121 |   </div>
122 | </div>
123 | 
124 | </aside>
125 |     
126 |   </div>
127 | </div>
128 | 
129 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
130 |   <div class="container-fluid">
131 |     <a class="navbar-brand" href="/">React 練習手冊</a>
132 |     <div class="collapse navbar-collapse" id="navbarCollapse">
133 |       <ul class="navbar-nav">
134 |         <li class="nav-item">
135 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
136 |         </li>
137 |         <li class="nav-item">
138 |           <a class="nav-link active" href="/es6/shorthand.html">JS 必備觀念</a>
139 |         </li>
140 |         <li class="nav-item">
141 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
142 |         </li>
143 |         <li class="nav-item">
144 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
145 |         </li>
146 |         <li class="nav-item">
147 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
148 |         </li>
149 |         <li class="nav-item">
150 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
151 |         </li>
152 |       </ul>
153 |     </div>
154 |   </div>
155 | </nav>
156 | 
157 | <footer class="footer py-2 bg-light">
158 |   <div class="container text-center">
159 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
160 |   </div>
161 | </footer>
162 | <link rel="stylesheet" href="/stylesheets/all.css">
163 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
164 | </body>
165 | </html>
166 | 


--------------------------------------------------------------------------------
/es6/promise.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>Promise</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">Promise</h1><small>檔名：<code>promise.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <!-- 本章節額外載入的遠端套件 -->
  7 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  8 | <script>
  9 | // #1 非同步的觀念
 10 | // function getData() {
 11 | //   setTimeout(() => {
 12 | //     console.log('... 已取得遠端資料');
 13 | //   }, 0);
 14 | // }
 15 | // // 請問取得資料的順序為何
 16 | // function init() {
 17 | //   console.log(1);
 18 | //   getData();
 19 | //   console.log(2);
 20 | // }
 21 | //
 22 | // init();
 23 | 
 24 | // 更正確的說法，Promise 是為了解決傳統非同步語法難以建構及管理的問題，如有興趣可搜尋 "callback hell js"
 25 | 
 26 | // #2 Promise
 27 | const promiseSetTimeout = (status) => {
 28 |   return new Promise((resolve, reject) => {
 29 |     setTimeout(() => {
 30 |       if (status) {
 31 |         resolve('promiseSetTimeout 成功')
 32 |       } else {
 33 |         reject('promiseSetTimeout 失敗')
 34 |       }
 35 |     }, 0);
 36 |   })
 37 | }
 38 | 
 39 | // #2-1 基礎運用
 40 | 
 41 | 
 42 | // #2-2 串接
 43 | 
 44 | 
 45 | // #2-3 失敗捕捉
 46 | 
 47 | 
 48 | // #3 實戰取得遠端資料
 49 | // #3-1
 50 | // https://github.com/axios/axios
 51 | 
 52 | // #3-2 記得捕捉錯誤，Axios 錯誤捕捉技巧
 53 | // https://randomuser.me/
 54 | 
 55 | </script>
 56 | <!-- 🙇🙇練習結束🙇🙇 -->
 57 | </main>
 58 |   
 59 |     <aside
 60 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 61 |   
 62 |   <div class="list-group">
 63 |   
 64 |     <a href="/es6/shorthand.html"
 65 |       class="list-group-item list-group-item-action
 66 |         
 67 |         ">
 68 |       語法糖
 69 |     </a>
 70 |   
 71 |     <a href="/es6/destructuringAssignment.html"
 72 |       class="list-group-item list-group-item-action
 73 |         
 74 |         ">
 75 |       解構
 76 |     </a>
 77 |   
 78 |     <a href="/es6/arrowFunction.html"
 79 |       class="list-group-item list-group-item-action
 80 |         
 81 |         ">
 82 |       箭頭函式
 83 |     </a>
 84 |   
 85 |     <a href="/es6/forEach.html"
 86 |       class="list-group-item list-group-item-action
 87 |         
 88 |         ">
 89 |       陣列方法
 90 |     </a>
 91 |   
 92 |     <a href="/es6/objectReference.html"
 93 |       class="list-group-item list-group-item-action
 94 |         
 95 |         ">
 96 |       物件參考特性
 97 |     </a>
 98 |   
 99 |     <a href="/es6/promise.html"
100 |       class="list-group-item list-group-item-action
101 |         
102 |         active">
103 |       Promise
104 |     </a>
105 |   
106 |     <a href="/es6/asyncAwait.html"
107 |       class="list-group-item list-group-item-action
108 |         
109 |         ">
110 |       Async/Await
111 |     </a>
112 |   
113 |     <a href="/es6/asyncAwaitAdv.html"
114 |       class="list-group-item list-group-item-action
115 |         
116 |         ">
117 |       Async/Await 進階
118 |     </a>
119 |   
120 |     <a href="/es6/esModule.html"
121 |       class="list-group-item list-group-item-action
122 |         
123 |         ">
124 |       ES Module
125 |     </a>
126 |   
127 |   </div>
128 |   <div class="mt-3 text-end p-2 bg-light rounded">
129 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
130 |   </div>
131 | </div>
132 | 
133 | </aside>
134 |     
135 |   </div>
136 | </div>
137 | 
138 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
139 |   <div class="container-fluid">
140 |     <a class="navbar-brand" href="/">React 練習手冊</a>
141 |     <div class="collapse navbar-collapse" id="navbarCollapse">
142 |       <ul class="navbar-nav">
143 |         <li class="nav-item">
144 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
145 |         </li>
146 |         <li class="nav-item">
147 |           <a class="nav-link active" href="/es6/shorthand.html">JS 必備觀念</a>
148 |         </li>
149 |         <li class="nav-item">
150 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
151 |         </li>
152 |         <li class="nav-item">
153 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
154 |         </li>
155 |         <li class="nav-item">
156 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
157 |         </li>
158 |         <li class="nav-item">
159 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
160 |         </li>
161 |       </ul>
162 |     </div>
163 |   </div>
164 | </nav>
165 | 
166 | <footer class="footer py-2 bg-light">
167 |   <div class="container text-center">
168 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
169 |   </div>
170 | </footer>
171 | <link rel="stylesheet" href="/stylesheets/all.css">
172 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
173 | </body>
174 | </html>
175 | 


--------------------------------------------------------------------------------
/components/dataMap.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>使用資料驅動元件</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">使用資料驅動元件</h1><small>檔名：<code>dataMap.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | const Card = ({title, price, content, callToAction}) => {
  9 |   return (<div className="card mb-4">
 10 |     <div className="card-header">
 11 |       <h4 className="my-0">{title}</h4>
 12 |     </div>
 13 |     <div className="card-body">
 14 |       <h1 className="card-title">{typeof price === 'number' ? `$${price}` : price }</h1>
 15 |       <p>{content}</p>
 16 |       <button type="button" className="btn btn-outline-primary">{callToAction}</button>
 17 |     </div>
 18 |   </div>)
 19 | }
 20 | 
 21 | const App = () => {
 22 |   return (
 23 |     <>
 24 |       <h2>月月送菜到你家</h2>
 25 |       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore molestiae facere asperiores sit aspernatur laboriosam ipsum, excepturi fuga, consequuntur cupiditate, nam a doloremque error adipisci nulla reiciendis itaque odio voluptatibus.</p>
 26 |       <Card title="基本版" price={1000} content="基本每週配給，包含高麗菜、空心菜，健康不馬乎" callToAction="免費試用"></Card>
 27 |       <Card title="進階版" price={6000} content="奶蛋魚肉經營養師精確估計，適合三人小家庭使用，每週一、四配送" callToAction="永保健康"></Card>
 28 |       <Card title="企業版" price="請洽客服" content="多少人數均可訂製，5 ~ 1000 人團體均適用" callToAction="大吃大喝方案"></Card>
 29 |     </>
 30 |   )
 31 | }
 32 | 
 33 | ReactDOM.createRoot(document.getElementById('root'))
 34 |   .render(<App/>)
 35 | </script>
 36 | <!-- 🙇🙇練習結束🙇🙇 -->
 37 | </main>
 38 |   
 39 |     <aside
 40 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 41 |   
 42 |   <div class="list-group">
 43 |   
 44 |     <a href="/components/intro.html"
 45 |       class="list-group-item list-group-item-action
 46 |         
 47 |         ">
 48 |       為什麼要用元件
 49 |     </a>
 50 |   
 51 |     <a href="/components/createLayout.html"
 52 |       class="list-group-item list-group-item-action
 53 |         
 54 |         ">
 55 |       版型建立
 56 |     </a>
 57 |   
 58 |     <a href="/components/createComponent.html"
 59 |       class="list-group-item list-group-item-action
 60 |         
 61 |         ">
 62 |       建立元件
 63 |     </a>
 64 |   
 65 |     <a href="/components/propsDestructuring.html"
 66 |       class="list-group-item list-group-item-action
 67 |         
 68 |         ">
 69 |       資料解構
 70 |     </a>
 71 |   
 72 |     <a href="/components/dataMap.html"
 73 |       class="list-group-item list-group-item-action
 74 |         
 75 |         active">
 76 |       使用資料驅動元件
 77 |     </a>
 78 |   
 79 |     <a href="/components/mapKey.html"
 80 |       class="list-group-item list-group-item-action
 81 |         
 82 |         ">
 83 |       為什麼要使用 key 值
 84 |     </a>
 85 |   
 86 |     <a href="/components/nestComponent.html"
 87 |       class="list-group-item list-group-item-action
 88 |         
 89 |         ">
 90 |       巢狀元件
 91 |     </a>
 92 |   
 93 |     <a href="/components/componentFinal.html"
 94 |       class="list-group-item list-group-item-action
 95 |         
 96 |         ">
 97 |       元件章節挑戰
 98 |     </a>
 99 |   
100 |   </div>
101 |   <div class="mt-3 text-end p-2 bg-light rounded">
102 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
103 |   </div>
104 | </div>
105 | 
106 | </aside>
107 |     
108 |   </div>
109 | </div>
110 | 
111 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
112 |   <div class="container-fluid">
113 |     <a class="navbar-brand" href="/">React 練習手冊</a>
114 |     <div class="collapse navbar-collapse" id="navbarCollapse">
115 |       <ul class="navbar-nav">
116 |         <li class="nav-item">
117 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
118 |         </li>
119 |         <li class="nav-item">
120 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
121 |         </li>
122 |         <li class="nav-item">
123 |           <a class="nav-link active" href="/components/intro.html">元件基礎</a>
124 |         </li>
125 |         <li class="nav-item">
126 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
127 |         </li>
128 |         <li class="nav-item">
129 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
130 |         </li>
131 |         <li class="nav-item">
132 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
133 |         </li>
134 |       </ul>
135 |     </div>
136 |   </div>
137 | </nav>
138 | 
139 | <footer class="footer py-2 bg-light">
140 |   <div class="container text-center">
141 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
142 |   </div>
143 | </footer>
144 | <link rel="stylesheet" href="/stylesheets/all.css">
145 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
146 | </body>
147 | </html>
148 | 


--------------------------------------------------------------------------------
/form/reactForm.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>React 與表單元素</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">React 與表單元素</h1><small>檔名：<code>reactForm.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | const { useState } = React
  9 | const App = () => {
 10 | 
 11 |   return (<div>
 12 |   {/* #1 input */}
 13 |   <label htmlFor="username">使用者名稱 </label>
 14 |   <input id="username" type="text"/>
 15 | 
 16 |   {/* #2 select 選擇、預設值 */}
 17 |   <select name="" id="" >
 18 |     <option value="" disabled>-- 請選擇地區 --</option>
 19 |   </select>
 20 | 
 21 |   {/* #3 multiSelect */}
 22 |   <select name="" id="">
 23 | 
 24 |   </select>
 25 |   </div>)
 26 | }
 27 | 
 28 | ReactDOM.createRoot(document.querySelector('#root'))
 29 |   .render(<App/>)
 30 | </script>
 31 | <!-- 🙇🙇練習結束🙇🙇 -->
 32 | </main>
 33 |   
 34 |     <aside
 35 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 36 |   
 37 |   <div class="list-group">
 38 |   
 39 |     <a href="/form/basicForm.html"
 40 |       class="list-group-item list-group-item-action
 41 |         
 42 |         ">
 43 |       基礎表單觀念
 44 |     </a>
 45 |   
 46 |     <a href="/form/reactForm.html"
 47 |       class="list-group-item list-group-item-action
 48 |         
 49 |         active">
 50 |       React 與表單元素
 51 |     </a>
 52 |   
 53 |     <a href="/form/reactForm2.html"
 54 |       class="list-group-item list-group-item-action
 55 |         
 56 |         ">
 57 |       React 與表單元素 2
 58 |     </a>
 59 |   
 60 |     <a href="/form/submitForm.html"
 61 |       class="list-group-item list-group-item-action
 62 |         
 63 |         ">
 64 |       表單送出
 65 |     </a>
 66 |   
 67 |     <a href="/form/formEvent.html"
 68 |       class="list-group-item list-group-item-action
 69 |         
 70 |         ">
 71 |       表單方法
 72 |     </a>
 73 |   
 74 |     <a href="/form/basicHookForm.html"
 75 |       class="list-group-item list-group-item-action
 76 |         
 77 |         ">
 78 |       React Hook Form 基礎
 79 |     </a>
 80 |   
 81 |     <a href="/form/hookFormDefaultValue.html"
 82 |       class="list-group-item list-group-item-action
 83 |         
 84 |         ">
 85 |       React Hook Form 控制值
 86 |     </a>
 87 |   
 88 |     <a href="/form/hookFormErrorStyle.html"
 89 |       class="list-group-item list-group-item-action
 90 |         
 91 |         ">
 92 |       React Hook Form 錯誤樣式
 93 |     </a>
 94 |   
 95 |     <a href="/form/hookFormValidation.html"
 96 |       class="list-group-item list-group-item-action
 97 |         
 98 |         ">
 99 |       React Hook Form 驗證方法
100 |     </a>
101 |   
102 |     <a href="/form/hookFormComponent.html"
103 |       class="list-group-item list-group-item-action
104 |         
105 |         ">
106 |       React Hook Form 元件化
107 |     </a>
108 |   
109 |     <a href="/form/final.html"
110 |       class="list-group-item list-group-item-action
111 |         
112 |         ">
113 |       表單最終
114 |     </a>
115 |   
116 |     <a href="/form/finalAnswer.html"
117 |       class="list-group-item list-group-item-action
118 |         
119 |         ">
120 |       表單最終 解答
121 |     </a>
122 |   
123 |   </div>
124 |   <div class="mt-3 text-end p-2 bg-light rounded">
125 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
126 |   </div>
127 | </div>
128 | 
129 | </aside>
130 |     
131 |   </div>
132 | </div>
133 | 
134 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
135 |   <div class="container-fluid">
136 |     <a class="navbar-brand" href="/">React 練習手冊</a>
137 |     <div class="collapse navbar-collapse" id="navbarCollapse">
138 |       <ul class="navbar-nav">
139 |         <li class="nav-item">
140 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
141 |         </li>
142 |         <li class="nav-item">
143 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
144 |         </li>
145 |         <li class="nav-item">
146 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
147 |         </li>
148 |         <li class="nav-item">
149 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
150 |         </li>
151 |         <li class="nav-item">
152 |           <a class="nav-link active" href="/form/basicForm.html">表單</a>
153 |         </li>
154 |         <li class="nav-item">
155 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
156 |         </li>
157 |       </ul>
158 |     </div>
159 |   </div>
160 | </nav>
161 | 
162 | <footer class="footer py-2 bg-light">
163 |   <div class="container text-center">
164 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
165 |   </div>
166 | </footer>
167 | <link rel="stylesheet" href="/stylesheets/all.css">
168 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
169 | </body>
170 | </html>
171 | 


--------------------------------------------------------------------------------
/es6/destructuringAssignment.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>解構</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">解構</h1><small>檔名：<code>destructuringAssignment.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | // #1 取出特定值作為變數
  9 | const person = {
 10 |   name: '小明',
 11 |   age: 16,
 12 |   like: '鍋燒意麵'
 13 | }
 14 | 
 15 | // #2 陣列解構
 16 | const array = ['小明', '杰倫', '漂亮阿姨'];
 17 | 
 18 | 
 19 | // #3 解構加展開
 20 | const people = {
 21 |   Ming: {
 22 |     name: '小明',
 23 |     age: 16,
 24 |     like: '鍋燒意麵'
 25 |   },
 26 |   Jay: {
 27 |     name: '杰倫',
 28 |     age: 18,
 29 |     like: '跑車'
 30 |   },
 31 |   Auntie: {
 32 |     name: '漂亮阿姨',
 33 |     age: 22,
 34 |     like: '名牌包'
 35 |   }
 36 | }
 37 | 
 38 | // #4 解構加上重新命名
 39 | 
 40 | 
 41 | // #5 函式參數解構
 42 | 
 43 | 
 44 | 
 45 | // #6 解構在 React 的運用
 46 | const { useState } = React;
 47 | 
 48 | function Card() {
 49 |   return (<div className="card">
 50 |     <div className="card-body">
 51 | 
 52 |     </div>
 53 |   </div>)
 54 | }
 55 | 
 56 | function App() {
 57 |   const [person, setPerson] = useState({
 58 |     name: '小明',
 59 |   })
 60 | 
 61 |   return (
 62 |     <div>
 63 |       我是{person.name}
 64 |       <Card person={person} ></Card>
 65 |     </div>
 66 |   )
 67 | }
 68 | 
 69 | ReactDOM
 70 |   .createRoot(document.getElementById('root'))
 71 |   .render(<App></App>)
 72 | </script>
 73 | <!-- 🙇🙇練習結束🙇🙇 -->
 74 | </main>
 75 |   
 76 |     <aside
 77 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 78 |   
 79 |   <div class="list-group">
 80 |   
 81 |     <a href="/es6/shorthand.html"
 82 |       class="list-group-item list-group-item-action
 83 |         
 84 |         ">
 85 |       語法糖
 86 |     </a>
 87 |   
 88 |     <a href="/es6/destructuringAssignment.html"
 89 |       class="list-group-item list-group-item-action
 90 |         
 91 |         active">
 92 |       解構
 93 |     </a>
 94 |   
 95 |     <a href="/es6/arrowFunction.html"
 96 |       class="list-group-item list-group-item-action
 97 |         
 98 |         ">
 99 |       箭頭函式
100 |     </a>
101 |   
102 |     <a href="/es6/forEach.html"
103 |       class="list-group-item list-group-item-action
104 |         
105 |         ">
106 |       陣列方法
107 |     </a>
108 |   
109 |     <a href="/es6/objectReference.html"
110 |       class="list-group-item list-group-item-action
111 |         
112 |         ">
113 |       物件參考特性
114 |     </a>
115 |   
116 |     <a href="/es6/promise.html"
117 |       class="list-group-item list-group-item-action
118 |         
119 |         ">
120 |       Promise
121 |     </a>
122 |   
123 |     <a href="/es6/asyncAwait.html"
124 |       class="list-group-item list-group-item-action
125 |         
126 |         ">
127 |       Async/Await
128 |     </a>
129 |   
130 |     <a href="/es6/asyncAwaitAdv.html"
131 |       class="list-group-item list-group-item-action
132 |         
133 |         ">
134 |       Async/Await 進階
135 |     </a>
136 |   
137 |     <a href="/es6/esModule.html"
138 |       class="list-group-item list-group-item-action
139 |         
140 |         ">
141 |       ES Module
142 |     </a>
143 |   
144 |   </div>
145 |   <div class="mt-3 text-end p-2 bg-light rounded">
146 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
147 |   </div>
148 | </div>
149 | 
150 | </aside>
151 |     
152 |   </div>
153 | </div>
154 | 
155 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
156 |   <div class="container-fluid">
157 |     <a class="navbar-brand" href="/">React 練習手冊</a>
158 |     <div class="collapse navbar-collapse" id="navbarCollapse">
159 |       <ul class="navbar-nav">
160 |         <li class="nav-item">
161 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
162 |         </li>
163 |         <li class="nav-item">
164 |           <a class="nav-link active" href="/es6/shorthand.html">JS 必備觀念</a>
165 |         </li>
166 |         <li class="nav-item">
167 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
168 |         </li>
169 |         <li class="nav-item">
170 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
171 |         </li>
172 |         <li class="nav-item">
173 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
174 |         </li>
175 |         <li class="nav-item">
176 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
177 |         </li>
178 |       </ul>
179 |     </div>
180 |   </div>
181 | </nav>
182 | 
183 | <footer class="footer py-2 bg-light">
184 |   <div class="container text-center">
185 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
186 |   </div>
187 | </footer>
188 | <link rel="stylesheet" href="/stylesheets/all.css">
189 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
190 | </body>
191 | </html>
192 | 


--------------------------------------------------------------------------------
/hooks/inputComponent.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>input 元件化</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">input 元件化</h1><small>檔名：<code>inputComponent.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <!--  -->
  7 | <div id="root"></div>
  8 | <script type="text/babel">
  9 | 
 10 | const App = () => {
 11 |   return (<div>
 12 |     
 13 |   </div>)
 14 | }
 15 | 
 16 | ReactDOM.createRoot(document.querySelector('#root'))
 17 |   .render(<App/>)
 18 | </script>
 19 | <!-- 🙇🙇練習結束🙇🙇 -->
 20 | </main>
 21 |   
 22 |     <aside
 23 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 24 |   
 25 |   <div class="list-group">
 26 |   
 27 |     <a href="/hooks/startHooks.html"
 28 |       class="list-group-item list-group-item-action
 29 |         
 30 |         ">
 31 |       開始使用 Hook
 32 |     </a>
 33 |   
 34 |     <a href="/hooks/inputUseState.html"
 35 |       class="list-group-item list-group-item-action
 36 |         
 37 |         ">
 38 |       input 綁定 useState
 39 |     </a>
 40 |   
 41 |     <a href="/hooks/aboutUseState.html"
 42 |       class="list-group-item list-group-item-action
 43 |         
 44 |         ">
 45 |       關於 useState
 46 |     </a>
 47 |   
 48 |     <a href="/hooks/aboutUseState2.html"
 49 |       class="list-group-item list-group-item-action
 50 |         
 51 |         ">
 52 |       關於 useState 2
 53 |     </a>
 54 |   
 55 |     <a href="/hooks/inputComponent.html"
 56 |       class="list-group-item list-group-item-action
 57 |         
 58 |         active">
 59 |       input 元件化
 60 |     </a>
 61 |   
 62 |     <a href="/hooks/useEffectIntro.html"
 63 |       class="list-group-item list-group-item-action
 64 |         
 65 |         ">
 66 |       useEffect 基礎介紹
 67 |     </a>
 68 |   
 69 |     <a href="/hooks/useEffectLifeCycle.html"
 70 |       class="list-group-item list-group-item-action
 71 |         
 72 |         ">
 73 |       useEffect 生命週期及非同步
 74 |     </a>
 75 |   
 76 |     <a href="/hooks/asyncList.html"
 77 |       class="list-group-item list-group-item-action
 78 |         
 79 |         ">
 80 |       非同步的列表呈現
 81 |     </a>
 82 |   
 83 |     <a href="/hooks/useStateCallback.html"
 84 |       class="list-group-item list-group-item-action
 85 |         
 86 |         ">
 87 |       useState 的前一個狀態
 88 |     </a>
 89 |   
 90 |     <a href="/hooks/bootstrapComponent.html"
 91 |       class="list-group-item list-group-item-action
 92 |         
 93 |         ">
 94 |       Bootstrap 元件與 React
 95 |     </a>
 96 |   
 97 |     <a href="/hooks/useRef.html"
 98 |       class="list-group-item list-group-item-action
 99 |         
100 |         ">
101 |       useRef
102 |     </a>
103 |   
104 |     <a href="/hooks/useEffectRemoveListener.html"
105 |       class="list-group-item list-group-item-action
106 |         
107 |         ">
108 |       useEffect 移除監聽
109 |     </a>
110 |   
111 |     <a href="/hooks/unsplashApi.html"
112 |       class="list-group-item list-group-item-action
113 |         
114 |         ">
115 |       Unsplash API 挑戰
116 |     </a>
117 |   
118 |     <a href="/hooks/unsplashApiComplete.html"
119 |       class="list-group-item list-group-item-action
120 |         
121 |         ">
122 |       Unsplash API 完成
123 |     </a>
124 |   
125 |   </div>
126 |   <div class="mt-3 text-end p-2 bg-light rounded">
127 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
128 |   </div>
129 | </div>
130 | 
131 | </aside>
132 |     
133 |   </div>
134 | </div>
135 | 
136 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
137 |   <div class="container-fluid">
138 |     <a class="navbar-brand" href="/">React 練習手冊</a>
139 |     <div class="collapse navbar-collapse" id="navbarCollapse">
140 |       <ul class="navbar-nav">
141 |         <li class="nav-item">
142 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
143 |         </li>
144 |         <li class="nav-item">
145 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
146 |         </li>
147 |         <li class="nav-item">
148 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
149 |         </li>
150 |         <li class="nav-item">
151 |           <a class="nav-link active" href="/hooks/startHooks.html">Hooks</a>
152 |         </li>
153 |         <li class="nav-item">
154 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
155 |         </li>
156 |         <li class="nav-item">
157 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
158 |         </li>
159 |       </ul>
160 |     </div>
161 |   </div>
162 | </nav>
163 | 
164 | <footer class="footer py-2 bg-light">
165 |   <div class="container text-center">
166 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
167 |   </div>
168 | </footer>
169 | <link rel="stylesheet" href="/stylesheets/all.css">
170 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
171 | </body>
172 | </html>
173 | 


--------------------------------------------------------------------------------
/hooks/startHooks.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>開始使用 Hooks</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">開始使用 Hooks</h1><small>檔名：<code>startHooks.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | // #1 取出 useState 的方法
  9 | 
 10 | const App = () => {
 11 |   // #2 定義狀態
 12 |   return (<div>
 13 |     {/* 使用 set 將值寫入 */}
 14 |     </div>)
 15 | }
 16 | 
 17 | ReactDOM.createRoot(document.querySelector('#root'))
 18 |   .render(<App/>)
 19 | </script>
 20 | <!-- 🙇🙇練習結束🙇🙇 -->
 21 | </main>
 22 |   
 23 |     <aside
 24 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 25 |   
 26 |   <div class="list-group">
 27 |   
 28 |     <a href="/hooks/startHooks.html"
 29 |       class="list-group-item list-group-item-action
 30 |         
 31 |         active">
 32 |       開始使用 Hook
 33 |     </a>
 34 |   
 35 |     <a href="/hooks/inputUseState.html"
 36 |       class="list-group-item list-group-item-action
 37 |         
 38 |         ">
 39 |       input 綁定 useState
 40 |     </a>
 41 |   
 42 |     <a href="/hooks/aboutUseState.html"
 43 |       class="list-group-item list-group-item-action
 44 |         
 45 |         ">
 46 |       關於 useState
 47 |     </a>
 48 |   
 49 |     <a href="/hooks/aboutUseState2.html"
 50 |       class="list-group-item list-group-item-action
 51 |         
 52 |         ">
 53 |       關於 useState 2
 54 |     </a>
 55 |   
 56 |     <a href="/hooks/inputComponent.html"
 57 |       class="list-group-item list-group-item-action
 58 |         
 59 |         ">
 60 |       input 元件化
 61 |     </a>
 62 |   
 63 |     <a href="/hooks/useEffectIntro.html"
 64 |       class="list-group-item list-group-item-action
 65 |         
 66 |         ">
 67 |       useEffect 基礎介紹
 68 |     </a>
 69 |   
 70 |     <a href="/hooks/useEffectLifeCycle.html"
 71 |       class="list-group-item list-group-item-action
 72 |         
 73 |         ">
 74 |       useEffect 生命週期及非同步
 75 |     </a>
 76 |   
 77 |     <a href="/hooks/asyncList.html"
 78 |       class="list-group-item list-group-item-action
 79 |         
 80 |         ">
 81 |       非同步的列表呈現
 82 |     </a>
 83 |   
 84 |     <a href="/hooks/useStateCallback.html"
 85 |       class="list-group-item list-group-item-action
 86 |         
 87 |         ">
 88 |       useState 的前一個狀態
 89 |     </a>
 90 |   
 91 |     <a href="/hooks/bootstrapComponent.html"
 92 |       class="list-group-item list-group-item-action
 93 |         
 94 |         ">
 95 |       Bootstrap 元件與 React
 96 |     </a>
 97 |   
 98 |     <a href="/hooks/useRef.html"
 99 |       class="list-group-item list-group-item-action
100 |         
101 |         ">
102 |       useRef
103 |     </a>
104 |   
105 |     <a href="/hooks/useEffectRemoveListener.html"
106 |       class="list-group-item list-group-item-action
107 |         
108 |         ">
109 |       useEffect 移除監聽
110 |     </a>
111 |   
112 |     <a href="/hooks/unsplashApi.html"
113 |       class="list-group-item list-group-item-action
114 |         
115 |         ">
116 |       Unsplash API 挑戰
117 |     </a>
118 |   
119 |     <a href="/hooks/unsplashApiComplete.html"
120 |       class="list-group-item list-group-item-action
121 |         
122 |         ">
123 |       Unsplash API 完成
124 |     </a>
125 |   
126 |   </div>
127 |   <div class="mt-3 text-end p-2 bg-light rounded">
128 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
129 |   </div>
130 | </div>
131 | 
132 | </aside>
133 |     
134 |   </div>
135 | </div>
136 | 
137 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
138 |   <div class="container-fluid">
139 |     <a class="navbar-brand" href="/">React 練習手冊</a>
140 |     <div class="collapse navbar-collapse" id="navbarCollapse">
141 |       <ul class="navbar-nav">
142 |         <li class="nav-item">
143 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
144 |         </li>
145 |         <li class="nav-item">
146 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
147 |         </li>
148 |         <li class="nav-item">
149 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
150 |         </li>
151 |         <li class="nav-item">
152 |           <a class="nav-link active" href="/hooks/startHooks.html">Hooks</a>
153 |         </li>
154 |         <li class="nav-item">
155 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
156 |         </li>
157 |         <li class="nav-item">
158 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
159 |         </li>
160 |       </ul>
161 |     </div>
162 |   </div>
163 | </nav>
164 | 
165 | <footer class="footer py-2 bg-light">
166 |   <div class="container text-center">
167 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
168 |   </div>
169 | </footer>
170 | <link rel="stylesheet" href="/stylesheets/all.css">
171 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
172 | </body>
173 | </html>
174 | 


--------------------------------------------------------------------------------
/hooks/inputUseState.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>input 綁定 useState</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">input 綁定 useState</h1><small>檔名：<code>inputUseState.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | const App = () => {
  9 |   const text = useState('這是一段文字')
 10 |   
 11 |   return (<div>
 12 |     <input type="text" />
 13 |   </div>)
 14 | }
 15 | 
 16 | ReactDOM.createRoot(document.querySelector('#root'))
 17 |   .render(<App/>)
 18 | </script>
 19 | <!-- 🙇🙇練習結束🙇🙇 -->
 20 | </main>
 21 |   
 22 |     <aside
 23 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 24 |   
 25 |   <div class="list-group">
 26 |   
 27 |     <a href="/hooks/startHooks.html"
 28 |       class="list-group-item list-group-item-action
 29 |         
 30 |         ">
 31 |       開始使用 Hook
 32 |     </a>
 33 |   
 34 |     <a href="/hooks/inputUseState.html"
 35 |       class="list-group-item list-group-item-action
 36 |         
 37 |         active">
 38 |       input 綁定 useState
 39 |     </a>
 40 |   
 41 |     <a href="/hooks/aboutUseState.html"
 42 |       class="list-group-item list-group-item-action
 43 |         
 44 |         ">
 45 |       關於 useState
 46 |     </a>
 47 |   
 48 |     <a href="/hooks/aboutUseState2.html"
 49 |       class="list-group-item list-group-item-action
 50 |         
 51 |         ">
 52 |       關於 useState 2
 53 |     </a>
 54 |   
 55 |     <a href="/hooks/inputComponent.html"
 56 |       class="list-group-item list-group-item-action
 57 |         
 58 |         ">
 59 |       input 元件化
 60 |     </a>
 61 |   
 62 |     <a href="/hooks/useEffectIntro.html"
 63 |       class="list-group-item list-group-item-action
 64 |         
 65 |         ">
 66 |       useEffect 基礎介紹
 67 |     </a>
 68 |   
 69 |     <a href="/hooks/useEffectLifeCycle.html"
 70 |       class="list-group-item list-group-item-action
 71 |         
 72 |         ">
 73 |       useEffect 生命週期及非同步
 74 |     </a>
 75 |   
 76 |     <a href="/hooks/asyncList.html"
 77 |       class="list-group-item list-group-item-action
 78 |         
 79 |         ">
 80 |       非同步的列表呈現
 81 |     </a>
 82 |   
 83 |     <a href="/hooks/useStateCallback.html"
 84 |       class="list-group-item list-group-item-action
 85 |         
 86 |         ">
 87 |       useState 的前一個狀態
 88 |     </a>
 89 |   
 90 |     <a href="/hooks/bootstrapComponent.html"
 91 |       class="list-group-item list-group-item-action
 92 |         
 93 |         ">
 94 |       Bootstrap 元件與 React
 95 |     </a>
 96 |   
 97 |     <a href="/hooks/useRef.html"
 98 |       class="list-group-item list-group-item-action
 99 |         
100 |         ">
101 |       useRef
102 |     </a>
103 |   
104 |     <a href="/hooks/useEffectRemoveListener.html"
105 |       class="list-group-item list-group-item-action
106 |         
107 |         ">
108 |       useEffect 移除監聽
109 |     </a>
110 |   
111 |     <a href="/hooks/unsplashApi.html"
112 |       class="list-group-item list-group-item-action
113 |         
114 |         ">
115 |       Unsplash API 挑戰
116 |     </a>
117 |   
118 |     <a href="/hooks/unsplashApiComplete.html"
119 |       class="list-group-item list-group-item-action
120 |         
121 |         ">
122 |       Unsplash API 完成
123 |     </a>
124 |   
125 |   </div>
126 |   <div class="mt-3 text-end p-2 bg-light rounded">
127 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
128 |   </div>
129 | </div>
130 | 
131 | </aside>
132 |     
133 |   </div>
134 | </div>
135 | 
136 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
137 |   <div class="container-fluid">
138 |     <a class="navbar-brand" href="/">React 練習手冊</a>
139 |     <div class="collapse navbar-collapse" id="navbarCollapse">
140 |       <ul class="navbar-nav">
141 |         <li class="nav-item">
142 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
143 |         </li>
144 |         <li class="nav-item">
145 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
146 |         </li>
147 |         <li class="nav-item">
148 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
149 |         </li>
150 |         <li class="nav-item">
151 |           <a class="nav-link active" href="/hooks/startHooks.html">Hooks</a>
152 |         </li>
153 |         <li class="nav-item">
154 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
155 |         </li>
156 |         <li class="nav-item">
157 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
158 |         </li>
159 |       </ul>
160 |     </div>
161 |   </div>
162 | </nav>
163 | 
164 | <footer class="footer py-2 bg-light">
165 |   <div class="container text-center">
166 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
167 |   </div>
168 | </footer>
169 | <link rel="stylesheet" href="/stylesheets/all.css">
170 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
171 | </body>
172 | </html>
173 | 


--------------------------------------------------------------------------------
/es6/forEach.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>陣列方法</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">陣列方法</h1><small>檔名：<code>forEach.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | const people = [
  9 |   {
 10 |     name: '卡斯伯',
 11 |     like: '鍋燒意麵',
 12 |     price: 80
 13 |   },
 14 |   {
 15 |     name: '小明',
 16 |     like: '牛肉麵',
 17 |     price: 120
 18 |   },
 19 |   {
 20 |     name: '漂亮阿姨',
 21 |     like: '滷味切盤',
 22 |     price: 40
 23 |   },
 24 |   {
 25 |     name: 'Ray',
 26 |     like: '大麻醬乾麵',
 27 |     price: 60
 28 |   }
 29 | ];
 30 | 
 31 | // #1. 更完整的陣列，也可參考此影片
 32 | // https://www.youtube.com/watch?v=_vFuDQ_6Xt8
 33 | 
 34 | // #2. 操作所有陣列內的值（同一個陣列）
 35 | 
 36 | 
 37 | // #3. 重新建立新的陣列
 38 | 
 39 | 
 40 | // #4 map 使用注意事項
 41 | 
 42 | // 當直接回傳時，會出現 undefined 的內容
 43 | 
 44 | 
 45 | // 解法
 46 | 
 47 | 
 48 | // #5 map 在 React 中的運用
 49 | const App = ()=> {
 50 |   const people = [
 51 |     {
 52 |       name: '卡斯伯',
 53 |       like: '鍋燒意麵',
 54 |       price: 80
 55 |     },
 56 |     {
 57 |       name: '小明',
 58 |       like: '牛肉麵',
 59 |       price: 120
 60 |     },
 61 |     {
 62 |       name: '漂亮阿姨',
 63 |       like: '滷味切盤',
 64 |       price: 40
 65 |     },
 66 |     {
 67 |       name: 'Ray',
 68 |       like: '大麻醬乾麵',
 69 |       price: 60
 70 |     }
 71 |   ];
 72 |   return <div>
 73 |     <ul>
 74 |       
 75 |     </ul>
 76 |   </div>
 77 | }
 78 | 
 79 | ReactDOM
 80 |   .createRoot(document.getElementById('root'))
 81 |   .render(<App></App>)
 82 | </script>
 83 | <!-- 🙇🙇練習結束🙇🙇 -->
 84 | </main>
 85 |   
 86 |     <aside
 87 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 88 |   
 89 |   <div class="list-group">
 90 |   
 91 |     <a href="/es6/shorthand.html"
 92 |       class="list-group-item list-group-item-action
 93 |         
 94 |         ">
 95 |       語法糖
 96 |     </a>
 97 |   
 98 |     <a href="/es6/destructuringAssignment.html"
 99 |       class="list-group-item list-group-item-action
100 |         
101 |         ">
102 |       解構
103 |     </a>
104 |   
105 |     <a href="/es6/arrowFunction.html"
106 |       class="list-group-item list-group-item-action
107 |         
108 |         ">
109 |       箭頭函式
110 |     </a>
111 |   
112 |     <a href="/es6/forEach.html"
113 |       class="list-group-item list-group-item-action
114 |         
115 |         active">
116 |       陣列方法
117 |     </a>
118 |   
119 |     <a href="/es6/objectReference.html"
120 |       class="list-group-item list-group-item-action
121 |         
122 |         ">
123 |       物件參考特性
124 |     </a>
125 |   
126 |     <a href="/es6/promise.html"
127 |       class="list-group-item list-group-item-action
128 |         
129 |         ">
130 |       Promise
131 |     </a>
132 |   
133 |     <a href="/es6/asyncAwait.html"
134 |       class="list-group-item list-group-item-action
135 |         
136 |         ">
137 |       Async/Await
138 |     </a>
139 |   
140 |     <a href="/es6/asyncAwaitAdv.html"
141 |       class="list-group-item list-group-item-action
142 |         
143 |         ">
144 |       Async/Await 進階
145 |     </a>
146 |   
147 |     <a href="/es6/esModule.html"
148 |       class="list-group-item list-group-item-action
149 |         
150 |         ">
151 |       ES Module
152 |     </a>
153 |   
154 |   </div>
155 |   <div class="mt-3 text-end p-2 bg-light rounded">
156 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
157 |   </div>
158 | </div>
159 | 
160 | </aside>
161 |     
162 |   </div>
163 | </div>
164 | 
165 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
166 |   <div class="container-fluid">
167 |     <a class="navbar-brand" href="/">React 練習手冊</a>
168 |     <div class="collapse navbar-collapse" id="navbarCollapse">
169 |       <ul class="navbar-nav">
170 |         <li class="nav-item">
171 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
172 |         </li>
173 |         <li class="nav-item">
174 |           <a class="nav-link active" href="/es6/shorthand.html">JS 必備觀念</a>
175 |         </li>
176 |         <li class="nav-item">
177 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
178 |         </li>
179 |         <li class="nav-item">
180 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
181 |         </li>
182 |         <li class="nav-item">
183 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
184 |         </li>
185 |         <li class="nav-item">
186 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
187 |         </li>
188 |       </ul>
189 |     </div>
190 |   </div>
191 | </nav>
192 | 
193 | <footer class="footer py-2 bg-light">
194 |   <div class="container text-center">
195 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
196 |   </div>
197 | </footer>
198 | <link rel="stylesheet" href="/stylesheets/all.css">
199 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
200 | </body>
201 | </html>
202 | 


--------------------------------------------------------------------------------
/intro/commonProblem.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>JSX 常見問題</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">JSX 常見問題</h1><small>檔名：<code>commonProblem.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | 
  8 | <script type="text/babel">
  9 | // 1. 定義元件一定是大寫
 10 | // 2. 多個元素外層需要使用標籤包覆，或使用 React.Fragment
 11 | // 3. 沒有正確結尾，結尾不正確
 12 | // 4. 屬性轉換名稱運用要正確
 13 | // 5. return 建議加入括號
 14 | 
 15 | function app() {
 16 |   return 
 17 |   <label for="exampleDataList" class="form-label" style="color: var(--bs-blue)">Datalist example</label>
 18 |     <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
 19 |     <datalist id="datalistOptions">
 20 |       <option value="San Francisco">
 21 |       <option value="New York">
 22 |       <option value="Seattle">
 23 |       <option value="Los Angeles">
 24 |       <option value="Chicago">
 25 |   </datalist>
 26 | }
 27 | 
 28 | // 寫法改變了
 29 | ReactDOM
 30 |   .createRoot(document.getElementById('root'))
 31 |   .render(<app/>);
 32 | </script>
 33 | 
 34 | <!-- 預期完成版本 -->
 35 | <!-- <label for="exampleDataList" class="form-label" style="color: var(--bs-blue)">Datalist example</label>
 36 | <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
 37 | <datalist id="datalistOptions">
 38 |   <option value="San Francisco">
 39 |   <option value="New York">
 40 |   <option value="Seattle">
 41 |   <option value="Los Angeles">
 42 |   <option value="Chicago">
 43 | </datalist> -->
 44 | <!-- 🙇🙇練習結束🙇🙇 -->
 45 | </main>
 46 |   
 47 |     <aside
 48 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 49 |   
 50 |   <div class="list-group">
 51 |   
 52 |     <a href="/intro/createApp.html"
 53 |       class="list-group-item list-group-item-action
 54 |         
 55 |         ">
 56 |       建立 React
 57 |     </a>
 58 |   
 59 |     <a href="/intro/variables.html"
 60 |       class="list-group-item list-group-item-action
 61 |         
 62 |         ">
 63 |       使用資料驅動
 64 |     </a>
 65 |   
 66 |     <a href="/intro/expression.html"
 67 |       class="list-group-item list-group-item-action
 68 |         
 69 |         ">
 70 |       什麼是 JavaScript 表達式
 71 |     </a>
 72 |   
 73 |     <a href="/intro/jsType.html"
 74 |       class="list-group-item list-group-item-action
 75 |         
 76 |         ">
 77 |       部分型別注意事項
 78 |     </a>
 79 |   
 80 |     <a href="/intro/howToWork.html"
 81 |       class="list-group-item list-group-item-action
 82 |         
 83 |         ">
 84 |       JSX 做了什麼事？
 85 |     </a>
 86 |   
 87 |     <a href="/intro/reactAttr.html"
 88 |       class="list-group-item list-group-item-action
 89 |         
 90 |         ">
 91 |       JSX 與 HTML 的標籤屬性
 92 |     </a>
 93 |   
 94 |     <a href="/intro/jsxStyle.html"
 95 |       class="list-group-item list-group-item-action
 96 |         
 97 |         ">
 98 |       如何加入 Style
 99 |     </a>
100 |   
101 |     <a href="/intro/commonProblem.html"
102 |       class="list-group-item list-group-item-action
103 |         
104 |         active">
105 |       JSX 常見問題
106 |     </a>
107 |   
108 |     <a href="/intro/introFinal.html"
109 |       class="list-group-item list-group-item-action
110 |         
111 |         ">
112 |       章節挑戰
113 |     </a>
114 |   
115 |   </div>
116 |   <div class="mt-3 text-end p-2 bg-light rounded">
117 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
118 |   </div>
119 | </div>
120 | 
121 | </aside>
122 |     
123 |   </div>
124 | </div>
125 | 
126 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
127 |   <div class="container-fluid">
128 |     <a class="navbar-brand" href="/">React 練習手冊</a>
129 |     <div class="collapse navbar-collapse" id="navbarCollapse">
130 |       <ul class="navbar-nav">
131 |         <li class="nav-item">
132 |           <a class="nav-link active" href="/intro/createApp.html">認識 React</a>
133 |         </li>
134 |         <li class="nav-item">
135 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
136 |         </li>
137 |         <li class="nav-item">
138 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
139 |         </li>
140 |         <li class="nav-item">
141 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
142 |         </li>
143 |         <li class="nav-item">
144 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
145 |         </li>
146 |         <li class="nav-item">
147 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
148 |         </li>
149 |       </ul>
150 |     </div>
151 |   </div>
152 | </nav>
153 | 
154 | <footer class="footer py-2 bg-light">
155 |   <div class="container text-center">
156 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
157 |   </div>
158 | </footer>
159 | <link rel="stylesheet" href="/stylesheets/all.css">
160 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
161 | </body>
162 | </html>
163 | 


--------------------------------------------------------------------------------
/components/propsDestructuring.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>資料解構</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">資料解構</h1><small>檔名：<code>propsDestructuring.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | const Card = (props) => {
  9 |   return (<div className="card mb-4">
 10 |     <div className="card-header">
 11 |       <h4 className="my-0">{props.title}</h4>
 12 |     </div>
 13 |     <div className="card-body">
 14 |       <h1 className="card-title">{typeof props.price === 'number' ? `$${props.price}` : props.price }</h1>
 15 |       <p>{props.content}</p>
 16 |       <button type="button" className="btn btn-outline-primary">{props.callToAction}</button>
 17 |     </div>
 18 |   </div>)
 19 | }
 20 | 
 21 | // # 元件抽離技巧
 22 | // #1 尋找哪些是重複的部分
 23 | // #2 為新增的元件定義名稱(可使用單一單字，或是使用大駝峰命名)
 24 | // #3 建立新的函式，並將元件建立
 25 | // #4 使用 Props 將資料傳入
 26 | const App = () => {
 27 |   return (
 28 |     <>
 29 |       <h2>月月送菜到你家</h2>
 30 |       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore molestiae facere asperiores sit aspernatur laboriosam ipsum, excepturi fuga, consequuntur cupiditate, nam a doloremque error adipisci nulla reiciendis itaque odio voluptatibus.</p>
 31 | 
 32 |       <Card title="基本版" price={1000} content="基本每週配給，包含高麗菜、空心菜，健康不馬乎" callToAction="免費試用"></Card>
 33 |       <Card title="進階版" price={6000} content="奶蛋魚肉經營養師精確估計，適合三人小家庭使用，每週一、四配送" callToAction="永保健康"></Card>
 34 |       <Card title="企業版" price="請洽客服" content="多少人數均可訂製，5 ~ 1000 人團體均適用" callToAction="大吃大喝方案"></Card>
 35 |     </>
 36 |   )
 37 | }
 38 | 
 39 | ReactDOM.createRoot(document.getElementById('root'))
 40 |   .render(<App/>)
 41 | </script>
 42 | <!-- 🙇🙇練習結束🙇🙇 -->
 43 | </main>
 44 |   
 45 |     <aside
 46 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 47 |   
 48 |   <div class="list-group">
 49 |   
 50 |     <a href="/components/intro.html"
 51 |       class="list-group-item list-group-item-action
 52 |         
 53 |         ">
 54 |       為什麼要用元件
 55 |     </a>
 56 |   
 57 |     <a href="/components/createLayout.html"
 58 |       class="list-group-item list-group-item-action
 59 |         
 60 |         ">
 61 |       版型建立
 62 |     </a>
 63 |   
 64 |     <a href="/components/createComponent.html"
 65 |       class="list-group-item list-group-item-action
 66 |         
 67 |         ">
 68 |       建立元件
 69 |     </a>
 70 |   
 71 |     <a href="/components/propsDestructuring.html"
 72 |       class="list-group-item list-group-item-action
 73 |         
 74 |         active">
 75 |       資料解構
 76 |     </a>
 77 |   
 78 |     <a href="/components/dataMap.html"
 79 |       class="list-group-item list-group-item-action
 80 |         
 81 |         ">
 82 |       使用資料驅動元件
 83 |     </a>
 84 |   
 85 |     <a href="/components/mapKey.html"
 86 |       class="list-group-item list-group-item-action
 87 |         
 88 |         ">
 89 |       為什麼要使用 key 值
 90 |     </a>
 91 |   
 92 |     <a href="/components/nestComponent.html"
 93 |       class="list-group-item list-group-item-action
 94 |         
 95 |         ">
 96 |       巢狀元件
 97 |     </a>
 98 |   
 99 |     <a href="/components/componentFinal.html"
100 |       class="list-group-item list-group-item-action
101 |         
102 |         ">
103 |       元件章節挑戰
104 |     </a>
105 |   
106 |   </div>
107 |   <div class="mt-3 text-end p-2 bg-light rounded">
108 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
109 |   </div>
110 | </div>
111 | 
112 | </aside>
113 |     
114 |   </div>
115 | </div>
116 | 
117 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
118 |   <div class="container-fluid">
119 |     <a class="navbar-brand" href="/">React 練習手冊</a>
120 |     <div class="collapse navbar-collapse" id="navbarCollapse">
121 |       <ul class="navbar-nav">
122 |         <li class="nav-item">
123 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
124 |         </li>
125 |         <li class="nav-item">
126 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
127 |         </li>
128 |         <li class="nav-item">
129 |           <a class="nav-link active" href="/components/intro.html">元件基礎</a>
130 |         </li>
131 |         <li class="nav-item">
132 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
133 |         </li>
134 |         <li class="nav-item">
135 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
136 |         </li>
137 |         <li class="nav-item">
138 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
139 |         </li>
140 |       </ul>
141 |     </div>
142 |   </div>
143 | </nav>
144 | 
145 | <footer class="footer py-2 bg-light">
146 |   <div class="container text-center">
147 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
148 |   </div>
149 | </footer>
150 | <link rel="stylesheet" href="/stylesheets/all.css">
151 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
152 | </body>
153 | </html>
154 | 


--------------------------------------------------------------------------------
/intro/jsType.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>部分型別注意事項</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">部分型別注意事項</h1><small>檔名：<code>jsType.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | function App() {
  9 |   const data = {
 10 |     imageUrl: 'https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2352&q=80',
 11 |     name: '卡斯伯',
 12 |     description: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi culpa aspernatur tempore cupiditate illo minima voluptatem blanditiis optio accusantium earum voluptate magni repellendus, ipsa dolor adipisci libero qui commodi veritatis.',
 13 |     link: 'https://www.casper.tw/'
 14 |   }
 15 | 
 16 |   // #3 直接插入 HTML 結構的變數
 17 |   // https://getbootstrap.com/docs/5.2/components/card/#list-groups
 18 | 
 19 |   return <div className="card w-50">
 20 |     <img src={data.imageUrl} className="card-img-top" alt="..." />
 21 |     <div className="card-body">
 22 |       <h5 className="card-title">{ data.name }</h5>
 23 |       <p className="card-text">{ data.description }</p>
 24 |       <a href={data.link} target="_blank" className="btn btn-primary">Go somewhere</a>
 25 |     </div>
 26 | 
 27 |     {/* 1. JSX 不會呈現物件型別以及特定的原始型別 */}
 28 | 
 29 | 
 30 |     {/* 2. 陣列中的值會直接呈現在畫面上 */}
 31 | 
 32 |     <ul className="list-group list-group-flush">
 33 | 
 34 |     </ul>
 35 |   </div>
 36 | }
 37 | 
 38 | const el = document.getElementById('root');
 39 | const root = ReactDOM.createRoot(el);
 40 | root.render(<App/>)
 41 | </script>
 42 | 
 43 | <!-- 🙇🙇練習結束🙇🙇 -->
 44 | </main>
 45 |   
 46 |     <aside
 47 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 48 |   
 49 |   <div class="list-group">
 50 |   
 51 |     <a href="/intro/createApp.html"
 52 |       class="list-group-item list-group-item-action
 53 |         
 54 |         ">
 55 |       建立 React
 56 |     </a>
 57 |   
 58 |     <a href="/intro/variables.html"
 59 |       class="list-group-item list-group-item-action
 60 |         
 61 |         ">
 62 |       使用資料驅動
 63 |     </a>
 64 |   
 65 |     <a href="/intro/expression.html"
 66 |       class="list-group-item list-group-item-action
 67 |         
 68 |         ">
 69 |       什麼是 JavaScript 表達式
 70 |     </a>
 71 |   
 72 |     <a href="/intro/jsType.html"
 73 |       class="list-group-item list-group-item-action
 74 |         
 75 |         active">
 76 |       部分型別注意事項
 77 |     </a>
 78 |   
 79 |     <a href="/intro/howToWork.html"
 80 |       class="list-group-item list-group-item-action
 81 |         
 82 |         ">
 83 |       JSX 做了什麼事？
 84 |     </a>
 85 |   
 86 |     <a href="/intro/reactAttr.html"
 87 |       class="list-group-item list-group-item-action
 88 |         
 89 |         ">
 90 |       JSX 與 HTML 的標籤屬性
 91 |     </a>
 92 |   
 93 |     <a href="/intro/jsxStyle.html"
 94 |       class="list-group-item list-group-item-action
 95 |         
 96 |         ">
 97 |       如何加入 Style
 98 |     </a>
 99 |   
100 |     <a href="/intro/commonProblem.html"
101 |       class="list-group-item list-group-item-action
102 |         
103 |         ">
104 |       JSX 常見問題
105 |     </a>
106 |   
107 |     <a href="/intro/introFinal.html"
108 |       class="list-group-item list-group-item-action
109 |         
110 |         ">
111 |       章節挑戰
112 |     </a>
113 |   
114 |   </div>
115 |   <div class="mt-3 text-end p-2 bg-light rounded">
116 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
117 |   </div>
118 | </div>
119 | 
120 | </aside>
121 |     
122 |   </div>
123 | </div>
124 | 
125 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
126 |   <div class="container-fluid">
127 |     <a class="navbar-brand" href="/">React 練習手冊</a>
128 |     <div class="collapse navbar-collapse" id="navbarCollapse">
129 |       <ul class="navbar-nav">
130 |         <li class="nav-item">
131 |           <a class="nav-link active" href="/intro/createApp.html">認識 React</a>
132 |         </li>
133 |         <li class="nav-item">
134 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
135 |         </li>
136 |         <li class="nav-item">
137 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
138 |         </li>
139 |         <li class="nav-item">
140 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
141 |         </li>
142 |         <li class="nav-item">
143 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
144 |         </li>
145 |         <li class="nav-item">
146 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
147 |         </li>
148 |       </ul>
149 |     </div>
150 |   </div>
151 | </nav>
152 | 
153 | <footer class="footer py-2 bg-light">
154 |   <div class="container text-center">
155 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
156 |   </div>
157 | </footer>
158 | <link rel="stylesheet" href="/stylesheets/all.css">
159 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
160 | </body>
161 | </html>
162 | 


--------------------------------------------------------------------------------
/hooksAdv/crossComponent.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>跨元件的狀態問題</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">跨元件的狀態問題</h1><small>檔名：<code>crossComponent.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | const { useState, useEffect } = React;
  9 | 
 10 | const App = () => {
 11 |   return (<>
 12 |       <hr />
 13 |   </>)
 14 | }
 15 | 
 16 | 
 17 | ReactDOM.createRoot(document.querySelector('#root'))
 18 |   .render(<App/>)
 19 | </script>
 20 | <!-- 🙇🙇練習結束🙇🙇 -->
 21 | </main>
 22 |   
 23 |     <aside
 24 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 25 |   
 26 |   <div class="list-group">
 27 |   
 28 |     <a href="/hooksAdv/lifeCycle.html"
 29 |       class="list-group-item list-group-item-action
 30 |         
 31 |         ">
 32 |       hook 的生命週期概念
 33 |     </a>
 34 |   
 35 |     <a href="/hooksAdv/useMemo.html"
 36 |       class="list-group-item list-group-item-action
 37 |         
 38 |         ">
 39 |       useMemo
 40 |     </a>
 41 |   
 42 |     <a href="/hooksAdv/useMemoSort.html"
 43 |       class="list-group-item list-group-item-action
 44 |         
 45 |         ">
 46 |       useMemo 過濾、排序
 47 |     </a>
 48 |   
 49 |     <a href="/hooksAdv/memoComponent.html"
 50 |       class="list-group-item list-group-item-action
 51 |         
 52 |         ">
 53 |       memo 元件
 54 |     </a>
 55 |   
 56 |     <a href="/hooksAdv/useCallback.html"
 57 |       class="list-group-item list-group-item-action
 58 |         
 59 |         ">
 60 |       useCallback
 61 |     </a>
 62 |   
 63 |     <a href="/hooksAdv/useLayoutEffect.html"
 64 |       class="list-group-item list-group-item-action
 65 |         
 66 |         ">
 67 |       useLayoutEffect
 68 |     </a>
 69 |   
 70 |     <a href="/hooksAdv/useCustomHook.html"
 71 |       class="list-group-item list-group-item-action
 72 |         
 73 |         ">
 74 |       自定義 Hook
 75 |     </a>
 76 |   
 77 |     <a href="/hooksAdv/useDebugValue.html"
 78 |       class="list-group-item list-group-item-action
 79 |         
 80 |         ">
 81 |       useDebugValue
 82 |     </a>
 83 |   
 84 |     <a href="/hooksAdv/useCustomHook2.html"
 85 |       class="list-group-item list-group-item-action
 86 |         
 87 |         ">
 88 |       自定義 Hook 2
 89 |     </a>
 90 |   
 91 |     <a href="/hooksAdv/useCustomHook3.html"
 92 |       class="list-group-item list-group-item-action
 93 |         
 94 |         ">
 95 |       使用現成的 Hooks
 96 |     </a>
 97 |   
 98 |     <a href="/hooksAdv/crossComponent.html"
 99 |       class="list-group-item list-group-item-action
100 |         
101 |         active">
102 |       跨元件的狀態問題
103 |     </a>
104 |   
105 |     <a href="/hooksAdv/useContext.html"
106 |       class="list-group-item list-group-item-action
107 |         
108 |         ">
109 |       跨元件狀態
110 |     </a>
111 |   
112 |     <a href="/hooksAdv/useContext2.html"
113 |       class="list-group-item list-group-item-action
114 |         
115 |         ">
116 |       跨元件狀態 進階
117 |     </a>
118 |   
119 |     <a href="/hooksAdv/useReducerIntro.html"
120 |       class="list-group-item list-group-item-action
121 |         
122 |         ">
123 |       狀態管理 useReducer
124 |     </a>
125 |   
126 |     <a href="/hooksAdv/useReducer.html"
127 |       class="list-group-item list-group-item-action
128 |         
129 |         ">
130 |       useReducer 案例介紹
131 |     </a>
132 |   
133 |   </div>
134 |   <div class="mt-3 text-end p-2 bg-light rounded">
135 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
136 |   </div>
137 | </div>
138 | 
139 | </aside>
140 |     
141 |   </div>
142 | </div>
143 | 
144 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
145 |   <div class="container-fluid">
146 |     <a class="navbar-brand" href="/">React 練習手冊</a>
147 |     <div class="collapse navbar-collapse" id="navbarCollapse">
148 |       <ul class="navbar-nav">
149 |         <li class="nav-item">
150 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
151 |         </li>
152 |         <li class="nav-item">
153 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
154 |         </li>
155 |         <li class="nav-item">
156 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
157 |         </li>
158 |         <li class="nav-item">
159 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
160 |         </li>
161 |         <li class="nav-item">
162 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
163 |         </li>
164 |         <li class="nav-item">
165 |           <a class="nav-link active" href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
166 |         </li>
167 |       </ul>
168 |     </div>
169 |   </div>
170 | </nav>
171 | 
172 | <footer class="footer py-2 bg-light">
173 |   <div class="container text-center">
174 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
175 |   </div>
176 | </footer>
177 | <link rel="stylesheet" href="/stylesheets/all.css">
178 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
179 | </body>
180 | </html>
181 | 


--------------------------------------------------------------------------------
/form/reactForm2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>React 與表單元素 2</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">React 與表單元素 2</h1><small>檔名：<code>reactForm2.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | const { useState } = React
  9 | const App = () => {
 10 |   // #1-1 單一 checkbox
 11 | 
 12 |   // #1-2 複數 checkbox
 13 | 
 14 | 
 15 |   return (<div>
 16 |   {/* #1-1 checkbox */}
 17 |   <label htmlFor="isCheck">確認狀態 </label>
 18 |   <input id="isCheck" type="checkbox"/>
 19 | 
 20 |   {/* #1-2 checkList */}
 21 |   <br/>
 22 |   
 23 |   <br/>
 24 |   <label htmlFor="checkList1">炒麵</label>
 25 |   <input id="checkList1" type="checkbox" name="like" value='炒麵' />
 26 |   <label htmlFor="checkList2">鍋燒意麵</label>
 27 |   <input id="checkList2" type="checkbox" name="like" value='鍋燒意麵' />
 28 |   <label htmlFor="checkList3">炸薯條</label>
 29 |   <input id="checkList3" type="checkbox" name="like" value='炸薯條' />
 30 | 
 31 | 
 32 |   </div>)
 33 | }
 34 | 
 35 | ReactDOM.createRoot(document.querySelector('#root'))
 36 |   .render(<App/>)
 37 | </script>
 38 | <!-- 🙇🙇練習結束🙇🙇 -->
 39 | </main>
 40 |   
 41 |     <aside
 42 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 43 |   
 44 |   <div class="list-group">
 45 |   
 46 |     <a href="/form/basicForm.html"
 47 |       class="list-group-item list-group-item-action
 48 |         
 49 |         ">
 50 |       基礎表單觀念
 51 |     </a>
 52 |   
 53 |     <a href="/form/reactForm.html"
 54 |       class="list-group-item list-group-item-action
 55 |         
 56 |         ">
 57 |       React 與表單元素
 58 |     </a>
 59 |   
 60 |     <a href="/form/reactForm2.html"
 61 |       class="list-group-item list-group-item-action
 62 |         
 63 |         active">
 64 |       React 與表單元素 2
 65 |     </a>
 66 |   
 67 |     <a href="/form/submitForm.html"
 68 |       class="list-group-item list-group-item-action
 69 |         
 70 |         ">
 71 |       表單送出
 72 |     </a>
 73 |   
 74 |     <a href="/form/formEvent.html"
 75 |       class="list-group-item list-group-item-action
 76 |         
 77 |         ">
 78 |       表單方法
 79 |     </a>
 80 |   
 81 |     <a href="/form/basicHookForm.html"
 82 |       class="list-group-item list-group-item-action
 83 |         
 84 |         ">
 85 |       React Hook Form 基礎
 86 |     </a>
 87 |   
 88 |     <a href="/form/hookFormDefaultValue.html"
 89 |       class="list-group-item list-group-item-action
 90 |         
 91 |         ">
 92 |       React Hook Form 控制值
 93 |     </a>
 94 |   
 95 |     <a href="/form/hookFormErrorStyle.html"
 96 |       class="list-group-item list-group-item-action
 97 |         
 98 |         ">
 99 |       React Hook Form 錯誤樣式
100 |     </a>
101 |   
102 |     <a href="/form/hookFormValidation.html"
103 |       class="list-group-item list-group-item-action
104 |         
105 |         ">
106 |       React Hook Form 驗證方法
107 |     </a>
108 |   
109 |     <a href="/form/hookFormComponent.html"
110 |       class="list-group-item list-group-item-action
111 |         
112 |         ">
113 |       React Hook Form 元件化
114 |     </a>
115 |   
116 |     <a href="/form/final.html"
117 |       class="list-group-item list-group-item-action
118 |         
119 |         ">
120 |       表單最終
121 |     </a>
122 |   
123 |     <a href="/form/finalAnswer.html"
124 |       class="list-group-item list-group-item-action
125 |         
126 |         ">
127 |       表單最終 解答
128 |     </a>
129 |   
130 |   </div>
131 |   <div class="mt-3 text-end p-2 bg-light rounded">
132 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
133 |   </div>
134 | </div>
135 | 
136 | </aside>
137 |     
138 |   </div>
139 | </div>
140 | 
141 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
142 |   <div class="container-fluid">
143 |     <a class="navbar-brand" href="/">React 練習手冊</a>
144 |     <div class="collapse navbar-collapse" id="navbarCollapse">
145 |       <ul class="navbar-nav">
146 |         <li class="nav-item">
147 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
148 |         </li>
149 |         <li class="nav-item">
150 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
151 |         </li>
152 |         <li class="nav-item">
153 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
154 |         </li>
155 |         <li class="nav-item">
156 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
157 |         </li>
158 |         <li class="nav-item">
159 |           <a class="nav-link active" href="/form/basicForm.html">表單</a>
160 |         </li>
161 |         <li class="nav-item">
162 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
163 |         </li>
164 |       </ul>
165 |     </div>
166 |   </div>
167 | </nav>
168 | 
169 | <footer class="footer py-2 bg-light">
170 |   <div class="container text-center">
171 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
172 |   </div>
173 | </footer>
174 | <link rel="stylesheet" href="/stylesheets/all.css">
175 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
176 | </body>
177 | </html>
178 | 


--------------------------------------------------------------------------------
/hooks/aboutUseState.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>關於 useState</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">關於 useState</h1><small>檔名：<code>aboutUseState.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | // #1 useState 的方法在哪裡？
  9 | 
 10 | // #2 useState 僅能在 Component 內運作
 11 | 
 12 | 
 13 | // #3 state 是 ReadOnly
 14 | // #3-1 為了讓 React 知道資料已更新，所以會使用另一個方法進行觸發
 15 | const App = () => {
 16 |   // #3-2 這影響了許多會操作原始值的方法
 17 | 
 18 |   return (<div>
 19 |     
 20 |   </div>)
 21 | }
 22 | 
 23 | 
 24 | 
 25 | // #4 state 觸發時，會完整更新 function
 26 | 
 27 | ReactDOM.createRoot(document.querySelector('#root'))
 28 |   .render(<App/>)
 29 | </script>
 30 | <!-- 🙇🙇練習結束🙇🙇 -->
 31 | </main>
 32 |   
 33 |     <aside
 34 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 35 |   
 36 |   <div class="list-group">
 37 |   
 38 |     <a href="/hooks/startHooks.html"
 39 |       class="list-group-item list-group-item-action
 40 |         
 41 |         ">
 42 |       開始使用 Hook
 43 |     </a>
 44 |   
 45 |     <a href="/hooks/inputUseState.html"
 46 |       class="list-group-item list-group-item-action
 47 |         
 48 |         ">
 49 |       input 綁定 useState
 50 |     </a>
 51 |   
 52 |     <a href="/hooks/aboutUseState.html"
 53 |       class="list-group-item list-group-item-action
 54 |         
 55 |         active">
 56 |       關於 useState
 57 |     </a>
 58 |   
 59 |     <a href="/hooks/aboutUseState2.html"
 60 |       class="list-group-item list-group-item-action
 61 |         
 62 |         ">
 63 |       關於 useState 2
 64 |     </a>
 65 |   
 66 |     <a href="/hooks/inputComponent.html"
 67 |       class="list-group-item list-group-item-action
 68 |         
 69 |         ">
 70 |       input 元件化
 71 |     </a>
 72 |   
 73 |     <a href="/hooks/useEffectIntro.html"
 74 |       class="list-group-item list-group-item-action
 75 |         
 76 |         ">
 77 |       useEffect 基礎介紹
 78 |     </a>
 79 |   
 80 |     <a href="/hooks/useEffectLifeCycle.html"
 81 |       class="list-group-item list-group-item-action
 82 |         
 83 |         ">
 84 |       useEffect 生命週期及非同步
 85 |     </a>
 86 |   
 87 |     <a href="/hooks/asyncList.html"
 88 |       class="list-group-item list-group-item-action
 89 |         
 90 |         ">
 91 |       非同步的列表呈現
 92 |     </a>
 93 |   
 94 |     <a href="/hooks/useStateCallback.html"
 95 |       class="list-group-item list-group-item-action
 96 |         
 97 |         ">
 98 |       useState 的前一個狀態
 99 |     </a>
100 |   
101 |     <a href="/hooks/bootstrapComponent.html"
102 |       class="list-group-item list-group-item-action
103 |         
104 |         ">
105 |       Bootstrap 元件與 React
106 |     </a>
107 |   
108 |     <a href="/hooks/useRef.html"
109 |       class="list-group-item list-group-item-action
110 |         
111 |         ">
112 |       useRef
113 |     </a>
114 |   
115 |     <a href="/hooks/useEffectRemoveListener.html"
116 |       class="list-group-item list-group-item-action
117 |         
118 |         ">
119 |       useEffect 移除監聽
120 |     </a>
121 |   
122 |     <a href="/hooks/unsplashApi.html"
123 |       class="list-group-item list-group-item-action
124 |         
125 |         ">
126 |       Unsplash API 挑戰
127 |     </a>
128 |   
129 |     <a href="/hooks/unsplashApiComplete.html"
130 |       class="list-group-item list-group-item-action
131 |         
132 |         ">
133 |       Unsplash API 完成
134 |     </a>
135 |   
136 |   </div>
137 |   <div class="mt-3 text-end p-2 bg-light rounded">
138 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
139 |   </div>
140 | </div>
141 | 
142 | </aside>
143 |     
144 |   </div>
145 | </div>
146 | 
147 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
148 |   <div class="container-fluid">
149 |     <a class="navbar-brand" href="/">React 練習手冊</a>
150 |     <div class="collapse navbar-collapse" id="navbarCollapse">
151 |       <ul class="navbar-nav">
152 |         <li class="nav-item">
153 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
154 |         </li>
155 |         <li class="nav-item">
156 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
157 |         </li>
158 |         <li class="nav-item">
159 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
160 |         </li>
161 |         <li class="nav-item">
162 |           <a class="nav-link active" href="/hooks/startHooks.html">Hooks</a>
163 |         </li>
164 |         <li class="nav-item">
165 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
166 |         </li>
167 |         <li class="nav-item">
168 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
169 |         </li>
170 |       </ul>
171 |     </div>
172 |   </div>
173 | </nav>
174 | 
175 | <footer class="footer py-2 bg-light">
176 |   <div class="container text-center">
177 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
178 |   </div>
179 | </footer>
180 | <link rel="stylesheet" href="/stylesheets/all.css">
181 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
182 | </body>
183 | </html>
184 | 


--------------------------------------------------------------------------------
/intro/reactAttr.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>JSX 與 HTML 的標籤屬性</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">JSX 與 HTML 的標籤屬性</h1><small>檔名：<code>reactAttr.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | 
  7 | <div id="root"></div>
  8 | 
  9 | <script type="text/babel">
 10 |   function App() {
 11 |     const htmlTemplate = '<div>這裡有一段文字</div>'
 12 | 
 13 |     return (
 14 |       <div>
 15 |         {/* className */}
 16 | 
 17 |         {/* checked 與 結尾標籤 */}
 18 | 
 19 |         {/* defaultValue & value */}
 20 | 
 21 |         {/* htmlFor */}
 22 | 
 23 |         {/* selected */}
 24 | 
 25 |         { /* textarea */ }
 26 | 
 27 |         {/* dangerouslySetInnerHTML */}
 28 | 
 29 |         {/* onChange */}
 30 | 
 31 |       </div>
 32 |     );
 33 |   }
 34 | 
 35 |   const el = document.getElementById('root');
 36 |   const root = ReactDOM.createRoot(el);
 37 |   root.render(<App />);
 38 | </script>
 39 | 
 40 | <hr>
 41 | <!-- 將此片段的 HTML 轉為 React JSX -->
 42 | <div>
 43 |   <div><button type="button" class="btn btn-primary">Primary</button></div>
 44 |   <div><input type="checkbox" checked /></div>
 45 |   <div><input type="text" value="卡斯伯" /></div>
 46 |   <div>
 47 |     <label for="email">請輸入 Email</label>
 48 |     <input type="email" id="email" />
 49 |   </div>
 50 |   <div>
 51 |     <select name="" id="">
 52 |       <option value="1">1</option>
 53 |       <option value="2" selected="">2</option>
 54 |       <option value="3">3</option>
 55 |     </select>
 56 |   </div>
 57 |   <div>
 58 |     <textarea name="" id="" cols="30" rows="5">
 59 |       這裡可以放多行文字
 60 |     </textarea>
 61 |   </div>
 62 |   <div><div>這裡有一段文字</div></div>
 63 |   <div><input type="text" /></div>
 64 | </div>
 65 | <!-- 🙇🙇練習結束🙇🙇 -->
 66 | </main>
 67 |   
 68 |     <aside
 69 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 70 |   
 71 |   <div class="list-group">
 72 |   
 73 |     <a href="/intro/createApp.html"
 74 |       class="list-group-item list-group-item-action
 75 |         
 76 |         ">
 77 |       建立 React
 78 |     </a>
 79 |   
 80 |     <a href="/intro/variables.html"
 81 |       class="list-group-item list-group-item-action
 82 |         
 83 |         ">
 84 |       使用資料驅動
 85 |     </a>
 86 |   
 87 |     <a href="/intro/expression.html"
 88 |       class="list-group-item list-group-item-action
 89 |         
 90 |         ">
 91 |       什麼是 JavaScript 表達式
 92 |     </a>
 93 |   
 94 |     <a href="/intro/jsType.html"
 95 |       class="list-group-item list-group-item-action
 96 |         
 97 |         ">
 98 |       部分型別注意事項
 99 |     </a>
100 |   
101 |     <a href="/intro/howToWork.html"
102 |       class="list-group-item list-group-item-action
103 |         
104 |         ">
105 |       JSX 做了什麼事？
106 |     </a>
107 |   
108 |     <a href="/intro/reactAttr.html"
109 |       class="list-group-item list-group-item-action
110 |         
111 |         active">
112 |       JSX 與 HTML 的標籤屬性
113 |     </a>
114 |   
115 |     <a href="/intro/jsxStyle.html"
116 |       class="list-group-item list-group-item-action
117 |         
118 |         ">
119 |       如何加入 Style
120 |     </a>
121 |   
122 |     <a href="/intro/commonProblem.html"
123 |       class="list-group-item list-group-item-action
124 |         
125 |         ">
126 |       JSX 常見問題
127 |     </a>
128 |   
129 |     <a href="/intro/introFinal.html"
130 |       class="list-group-item list-group-item-action
131 |         
132 |         ">
133 |       章節挑戰
134 |     </a>
135 |   
136 |   </div>
137 |   <div class="mt-3 text-end p-2 bg-light rounded">
138 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
139 |   </div>
140 | </div>
141 | 
142 | </aside>
143 |     
144 |   </div>
145 | </div>
146 | 
147 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
148 |   <div class="container-fluid">
149 |     <a class="navbar-brand" href="/">React 練習手冊</a>
150 |     <div class="collapse navbar-collapse" id="navbarCollapse">
151 |       <ul class="navbar-nav">
152 |         <li class="nav-item">
153 |           <a class="nav-link active" href="/intro/createApp.html">認識 React</a>
154 |         </li>
155 |         <li class="nav-item">
156 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
157 |         </li>
158 |         <li class="nav-item">
159 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
160 |         </li>
161 |         <li class="nav-item">
162 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
163 |         </li>
164 |         <li class="nav-item">
165 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
166 |         </li>
167 |         <li class="nav-item">
168 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
169 |         </li>
170 |       </ul>
171 |     </div>
172 |   </div>
173 | </nav>
174 | 
175 | <footer class="footer py-2 bg-light">
176 |   <div class="container text-center">
177 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
178 |   </div>
179 | </footer>
180 | <link rel="stylesheet" href="/stylesheets/all.css">
181 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
182 | </body>
183 | </html>
184 | 


--------------------------------------------------------------------------------
/hooks/useStateCallback.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>useState 的前一個狀態</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">useState 的前一個狀態</h1><small>檔名：<code>useStateCallback.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | const { useState, useEffect } = React;
  9 | 
 10 | const App = () => {
 11 | 
 12 |   // #6 關於前一個狀態
 13 |   const [arr, setArr] = useState([]);
 14 | 
 15 | 
 16 |   return (<div>
 17 |     
 18 |     <ul>
 19 |       {arr.map((item, key) => <li key={key}>{ item.num }</li>)}
 20 |     </ul>
 21 |     <button type="button" >新增一組陣列及合併</button>
 22 |   </div>)
 23 | }
 24 | 
 25 | 
 26 | ReactDOM.createRoot(document.querySelector('#root'))
 27 |   .render(<App/>)
 28 | </script>
 29 | <!-- 🙇🙇練習結束🙇🙇 -->
 30 | </main>
 31 |   
 32 |     <aside
 33 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 34 |   
 35 |   <div class="list-group">
 36 |   
 37 |     <a href="/hooks/startHooks.html"
 38 |       class="list-group-item list-group-item-action
 39 |         
 40 |         ">
 41 |       開始使用 Hook
 42 |     </a>
 43 |   
 44 |     <a href="/hooks/inputUseState.html"
 45 |       class="list-group-item list-group-item-action
 46 |         
 47 |         ">
 48 |       input 綁定 useState
 49 |     </a>
 50 |   
 51 |     <a href="/hooks/aboutUseState.html"
 52 |       class="list-group-item list-group-item-action
 53 |         
 54 |         ">
 55 |       關於 useState
 56 |     </a>
 57 |   
 58 |     <a href="/hooks/aboutUseState2.html"
 59 |       class="list-group-item list-group-item-action
 60 |         
 61 |         ">
 62 |       關於 useState 2
 63 |     </a>
 64 |   
 65 |     <a href="/hooks/inputComponent.html"
 66 |       class="list-group-item list-group-item-action
 67 |         
 68 |         ">
 69 |       input 元件化
 70 |     </a>
 71 |   
 72 |     <a href="/hooks/useEffectIntro.html"
 73 |       class="list-group-item list-group-item-action
 74 |         
 75 |         ">
 76 |       useEffect 基礎介紹
 77 |     </a>
 78 |   
 79 |     <a href="/hooks/useEffectLifeCycle.html"
 80 |       class="list-group-item list-group-item-action
 81 |         
 82 |         ">
 83 |       useEffect 生命週期及非同步
 84 |     </a>
 85 |   
 86 |     <a href="/hooks/asyncList.html"
 87 |       class="list-group-item list-group-item-action
 88 |         
 89 |         ">
 90 |       非同步的列表呈現
 91 |     </a>
 92 |   
 93 |     <a href="/hooks/useStateCallback.html"
 94 |       class="list-group-item list-group-item-action
 95 |         
 96 |         active">
 97 |       useState 的前一個狀態
 98 |     </a>
 99 |   
100 |     <a href="/hooks/bootstrapComponent.html"
101 |       class="list-group-item list-group-item-action
102 |         
103 |         ">
104 |       Bootstrap 元件與 React
105 |     </a>
106 |   
107 |     <a href="/hooks/useRef.html"
108 |       class="list-group-item list-group-item-action
109 |         
110 |         ">
111 |       useRef
112 |     </a>
113 |   
114 |     <a href="/hooks/useEffectRemoveListener.html"
115 |       class="list-group-item list-group-item-action
116 |         
117 |         ">
118 |       useEffect 移除監聽
119 |     </a>
120 |   
121 |     <a href="/hooks/unsplashApi.html"
122 |       class="list-group-item list-group-item-action
123 |         
124 |         ">
125 |       Unsplash API 挑戰
126 |     </a>
127 |   
128 |     <a href="/hooks/unsplashApiComplete.html"
129 |       class="list-group-item list-group-item-action
130 |         
131 |         ">
132 |       Unsplash API 完成
133 |     </a>
134 |   
135 |   </div>
136 |   <div class="mt-3 text-end p-2 bg-light rounded">
137 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
138 |   </div>
139 | </div>
140 | 
141 | </aside>
142 |     
143 |   </div>
144 | </div>
145 | 
146 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
147 |   <div class="container-fluid">
148 |     <a class="navbar-brand" href="/">React 練習手冊</a>
149 |     <div class="collapse navbar-collapse" id="navbarCollapse">
150 |       <ul class="navbar-nav">
151 |         <li class="nav-item">
152 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
153 |         </li>
154 |         <li class="nav-item">
155 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
156 |         </li>
157 |         <li class="nav-item">
158 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
159 |         </li>
160 |         <li class="nav-item">
161 |           <a class="nav-link active" href="/hooks/startHooks.html">Hooks</a>
162 |         </li>
163 |         <li class="nav-item">
164 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
165 |         </li>
166 |         <li class="nav-item">
167 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
168 |         </li>
169 |       </ul>
170 |     </div>
171 |   </div>
172 | </nav>
173 | 
174 | <footer class="footer py-2 bg-light">
175 |   <div class="container text-center">
176 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
177 |   </div>
178 | </footer>
179 | <link rel="stylesheet" href="/stylesheets/all.css">
180 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
181 | </body>
182 | </html>
183 | 


--------------------------------------------------------------------------------
/intro/expression.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>什麼是 JavaScript 表達式</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">什麼是 JavaScript 表達式</h1><small>檔名：<code>expression.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <!-- JSX 與表達式：https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx -->
  8 | <!-- 陳述語句：https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements -->
  9 | <!-- 表達語句：
 10 |   https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators
 11 | -->
 12 | <script>
 13 | // 表達式與陳述式的差異
 14 | </script>
 15 | 
 16 | 
 17 | <script type="text/babel">
 18 | function App() {
 19 |   const data = {
 20 |     imageUrl: 'https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2352&q=80',
 21 |     name: '卡斯伯',
 22 |     description: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi culpa aspernatur tempore cupiditate illo minima voluptatem blanditiis optio accusantium earum voluptate magni repellendus, ipsa dolor adipisci libero qui commodi veritatis.',
 23 |     link: 'https://www.casper.tw/'
 24 |   }
 25 |   return <div className="card w-50">
 26 |     <img src={data.imageUrl} className="card-img-top" alt="..." />
 27 |     <div className="card-body">
 28 |       <h5 className="card-title">{ data.name }</h5>
 29 |       <p className="card-text">{ data.description }</p>
 30 |       <a href={data.link} target="_blank" className="btn btn-primary">Go somewhere</a>
 31 |     </div>
 32 |   </div>
 33 | }
 34 | 
 35 | const el = document.getElementById('root')
 36 | const root = ReactDOM.createRoot(el);
 37 | root.render(<App/>);
 38 | </script>
 39 | 
 40 | <!-- 🙇🙇練習結束🙇🙇 -->
 41 | </main>
 42 |   
 43 |     <aside
 44 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 45 |   
 46 |   <div class="list-group">
 47 |   
 48 |     <a href="/intro/createApp.html"
 49 |       class="list-group-item list-group-item-action
 50 |         
 51 |         ">
 52 |       建立 React
 53 |     </a>
 54 |   
 55 |     <a href="/intro/variables.html"
 56 |       class="list-group-item list-group-item-action
 57 |         
 58 |         ">
 59 |       使用資料驅動
 60 |     </a>
 61 |   
 62 |     <a href="/intro/expression.html"
 63 |       class="list-group-item list-group-item-action
 64 |         
 65 |         active">
 66 |       什麼是 JavaScript 表達式
 67 |     </a>
 68 |   
 69 |     <a href="/intro/jsType.html"
 70 |       class="list-group-item list-group-item-action
 71 |         
 72 |         ">
 73 |       部分型別注意事項
 74 |     </a>
 75 |   
 76 |     <a href="/intro/howToWork.html"
 77 |       class="list-group-item list-group-item-action
 78 |         
 79 |         ">
 80 |       JSX 做了什麼事？
 81 |     </a>
 82 |   
 83 |     <a href="/intro/reactAttr.html"
 84 |       class="list-group-item list-group-item-action
 85 |         
 86 |         ">
 87 |       JSX 與 HTML 的標籤屬性
 88 |     </a>
 89 |   
 90 |     <a href="/intro/jsxStyle.html"
 91 |       class="list-group-item list-group-item-action
 92 |         
 93 |         ">
 94 |       如何加入 Style
 95 |     </a>
 96 |   
 97 |     <a href="/intro/commonProblem.html"
 98 |       class="list-group-item list-group-item-action
 99 |         
100 |         ">
101 |       JSX 常見問題
102 |     </a>
103 |   
104 |     <a href="/intro/introFinal.html"
105 |       class="list-group-item list-group-item-action
106 |         
107 |         ">
108 |       章節挑戰
109 |     </a>
110 |   
111 |   </div>
112 |   <div class="mt-3 text-end p-2 bg-light rounded">
113 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
114 |   </div>
115 | </div>
116 | 
117 | </aside>
118 |     
119 |   </div>
120 | </div>
121 | 
122 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
123 |   <div class="container-fluid">
124 |     <a class="navbar-brand" href="/">React 練習手冊</a>
125 |     <div class="collapse navbar-collapse" id="navbarCollapse">
126 |       <ul class="navbar-nav">
127 |         <li class="nav-item">
128 |           <a class="nav-link active" href="/intro/createApp.html">認識 React</a>
129 |         </li>
130 |         <li class="nav-item">
131 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
132 |         </li>
133 |         <li class="nav-item">
134 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
135 |         </li>
136 |         <li class="nav-item">
137 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
138 |         </li>
139 |         <li class="nav-item">
140 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
141 |         </li>
142 |         <li class="nav-item">
143 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
144 |         </li>
145 |       </ul>
146 |     </div>
147 |   </div>
148 | </nav>
149 | 
150 | <footer class="footer py-2 bg-light">
151 |   <div class="container text-center">
152 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
153 |   </div>
154 | </footer>
155 | <link rel="stylesheet" href="/stylesheets/all.css">
156 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
157 | </body>
158 | </html>
159 | 


--------------------------------------------------------------------------------
/form/basicHookForm.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>React Hook Form 基礎</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">React Hook Form 基礎</h1><small>檔名：<code>basicHookForm.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <!-- <script src="https://cdn.jsdelivr.net/npm/react-hook-form@7.33.1/dist/index.umd.min.js"></script> -->
  7 | <div id="app"></div>
  8 | <script type="text/babel">
  9 |   const { useState, useEffect } = React;
 10 | 
 11 |   const App = () => {
 12 | 
 13 |     return (
 14 |       <div>
 15 |         <form action=''>
 16 |           <div className='mb-3'>
 17 |             <label htmlFor='username' className='form-label'>
 18 |               使用者名稱
 19 |             </label>
 20 |             <input
 21 |               id='username'
 22 |               type='text'
 23 |               defaultValue="卡斯伯"
 24 |               className='form-control'
 25 |             />
 26 |           </div>
 27 |           <button type='submit' className='btn btn-primary'>
 28 |             註冊
 29 |           </button>
 30 |         </form>
 31 |       </div>
 32 |     );
 33 |   };
 34 | 
 35 |   ReactDOM.createRoot(document.querySelector('#app')).render(<App />);
 36 | </script>
 37 | 
 38 | <!-- 🙇🙇練習結束🙇🙇 -->
 39 | </main>
 40 |   
 41 |     <aside
 42 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 43 |   
 44 |   <div class="list-group">
 45 |   
 46 |     <a href="/form/basicForm.html"
 47 |       class="list-group-item list-group-item-action
 48 |         
 49 |         ">
 50 |       基礎表單觀念
 51 |     </a>
 52 |   
 53 |     <a href="/form/reactForm.html"
 54 |       class="list-group-item list-group-item-action
 55 |         
 56 |         ">
 57 |       React 與表單元素
 58 |     </a>
 59 |   
 60 |     <a href="/form/reactForm2.html"
 61 |       class="list-group-item list-group-item-action
 62 |         
 63 |         ">
 64 |       React 與表單元素 2
 65 |     </a>
 66 |   
 67 |     <a href="/form/submitForm.html"
 68 |       class="list-group-item list-group-item-action
 69 |         
 70 |         ">
 71 |       表單送出
 72 |     </a>
 73 |   
 74 |     <a href="/form/formEvent.html"
 75 |       class="list-group-item list-group-item-action
 76 |         
 77 |         ">
 78 |       表單方法
 79 |     </a>
 80 |   
 81 |     <a href="/form/basicHookForm.html"
 82 |       class="list-group-item list-group-item-action
 83 |         
 84 |         active">
 85 |       React Hook Form 基礎
 86 |     </a>
 87 |   
 88 |     <a href="/form/hookFormDefaultValue.html"
 89 |       class="list-group-item list-group-item-action
 90 |         
 91 |         ">
 92 |       React Hook Form 控制值
 93 |     </a>
 94 |   
 95 |     <a href="/form/hookFormErrorStyle.html"
 96 |       class="list-group-item list-group-item-action
 97 |         
 98 |         ">
 99 |       React Hook Form 錯誤樣式
100 |     </a>
101 |   
102 |     <a href="/form/hookFormValidation.html"
103 |       class="list-group-item list-group-item-action
104 |         
105 |         ">
106 |       React Hook Form 驗證方法
107 |     </a>
108 |   
109 |     <a href="/form/hookFormComponent.html"
110 |       class="list-group-item list-group-item-action
111 |         
112 |         ">
113 |       React Hook Form 元件化
114 |     </a>
115 |   
116 |     <a href="/form/final.html"
117 |       class="list-group-item list-group-item-action
118 |         
119 |         ">
120 |       表單最終
121 |     </a>
122 |   
123 |     <a href="/form/finalAnswer.html"
124 |       class="list-group-item list-group-item-action
125 |         
126 |         ">
127 |       表單最終 解答
128 |     </a>
129 |   
130 |   </div>
131 |   <div class="mt-3 text-end p-2 bg-light rounded">
132 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
133 |   </div>
134 | </div>
135 | 
136 | </aside>
137 |     
138 |   </div>
139 | </div>
140 | 
141 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
142 |   <div class="container-fluid">
143 |     <a class="navbar-brand" href="/">React 練習手冊</a>
144 |     <div class="collapse navbar-collapse" id="navbarCollapse">
145 |       <ul class="navbar-nav">
146 |         <li class="nav-item">
147 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
148 |         </li>
149 |         <li class="nav-item">
150 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
151 |         </li>
152 |         <li class="nav-item">
153 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
154 |         </li>
155 |         <li class="nav-item">
156 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
157 |         </li>
158 |         <li class="nav-item">
159 |           <a class="nav-link active" href="/form/basicForm.html">表單</a>
160 |         </li>
161 |         <li class="nav-item">
162 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
163 |         </li>
164 |       </ul>
165 |     </div>
166 |   </div>
167 | </nav>
168 | 
169 | <footer class="footer py-2 bg-light">
170 |   <div class="container text-center">
171 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
172 |   </div>
173 | </footer>
174 | <link rel="stylesheet" href="/stylesheets/all.css">
175 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
176 | </body>
177 | </html>
178 | 


--------------------------------------------------------------------------------
/components/createLayout.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>版型建立</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">版型建立</h1><small>檔名：<code>createLayout.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | 
  7 | <div id="root"></div>
  8 | <script type="text/babel">
  9 |   // 不要直接寫一個過大的應用，先從「運用元件開始」
 10 |   const App = () => {
 11 |     return (
 12 |       <>
 13 |       </>
 14 |     );
 15 |   };
 16 | 
 17 |   ReactDOM.createRoot(document.getElementById('root')).render(<App />);
 18 | </script>
 19 | 
 20 | <hr>
 21 | <div>
 22 |   <h2>月月送菜到你家</h2>
 23 |   <p>
 24 |     Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore molestiae
 25 |     facere asperiores sit aspernatur laboriosam ipsum, excepturi fuga,
 26 |     consequuntur cupiditate, nam a doloremque error adipisci nulla reiciendis
 27 |     itaque odio voluptatibus.
 28 |   </p>
 29 |   <div class="card mb-4">
 30 |     <div class="card-header"><h4 class="my-0">基本版</h4></div>
 31 |     <div class="card-body">
 32 |       <h1 class="card-title">$1000<small>/月</small></h1>
 33 |       <p>基本每週配給，包含高麗菜、空心菜，健康不馬乎</p>
 34 |       <button type="button" class="btn btn-outline-primary">免費試用</button>
 35 |     </div>
 36 |   </div>
 37 |   <div class="card mb-4">
 38 |     <div class="card-header"><h4 class="my-0">進階版</h4></div>
 39 |     <div class="card-body">
 40 |       <h1 class="card-title">$6000<small>月</small></h1>
 41 |       <p>奶蛋魚肉經營養師精確估計，適合三人小家庭使用，每週一、四配送</p>
 42 |       <button type="button" class="btn btn-outline-primary">永保健康</button>
 43 |     </div>
 44 |   </div>
 45 |   <div class="card mb-4">
 46 |     <div class="card-header"><h4 class="my-0">企業版</h4></div>
 47 |     <div class="card-body">
 48 |       <h1 class="card-title">請洽客服<small></small></h1>
 49 |       <p>多少人數均可訂製，5 ~ 1000 人團體均適用</p>
 50 |       <button type="button" class="btn btn-outline-primary">
 51 |         大吃大喝方案
 52 |       </button>
 53 |     </div>
 54 |   </div>
 55 | </div>
 56 | 
 57 | <!-- 🙇🙇練習結束🙇🙇 -->
 58 | </main>
 59 |   
 60 |     <aside
 61 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 62 |   
 63 |   <div class="list-group">
 64 |   
 65 |     <a href="/components/intro.html"
 66 |       class="list-group-item list-group-item-action
 67 |         
 68 |         ">
 69 |       為什麼要用元件
 70 |     </a>
 71 |   
 72 |     <a href="/components/createLayout.html"
 73 |       class="list-group-item list-group-item-action
 74 |         
 75 |         active">
 76 |       版型建立
 77 |     </a>
 78 |   
 79 |     <a href="/components/createComponent.html"
 80 |       class="list-group-item list-group-item-action
 81 |         
 82 |         ">
 83 |       建立元件
 84 |     </a>
 85 |   
 86 |     <a href="/components/propsDestructuring.html"
 87 |       class="list-group-item list-group-item-action
 88 |         
 89 |         ">
 90 |       資料解構
 91 |     </a>
 92 |   
 93 |     <a href="/components/dataMap.html"
 94 |       class="list-group-item list-group-item-action
 95 |         
 96 |         ">
 97 |       使用資料驅動元件
 98 |     </a>
 99 |   
100 |     <a href="/components/mapKey.html"
101 |       class="list-group-item list-group-item-action
102 |         
103 |         ">
104 |       為什麼要使用 key 值
105 |     </a>
106 |   
107 |     <a href="/components/nestComponent.html"
108 |       class="list-group-item list-group-item-action
109 |         
110 |         ">
111 |       巢狀元件
112 |     </a>
113 |   
114 |     <a href="/components/componentFinal.html"
115 |       class="list-group-item list-group-item-action
116 |         
117 |         ">
118 |       元件章節挑戰
119 |     </a>
120 |   
121 |   </div>
122 |   <div class="mt-3 text-end p-2 bg-light rounded">
123 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
124 |   </div>
125 | </div>
126 | 
127 | </aside>
128 |     
129 |   </div>
130 | </div>
131 | 
132 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
133 |   <div class="container-fluid">
134 |     <a class="navbar-brand" href="/">React 練習手冊</a>
135 |     <div class="collapse navbar-collapse" id="navbarCollapse">
136 |       <ul class="navbar-nav">
137 |         <li class="nav-item">
138 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
139 |         </li>
140 |         <li class="nav-item">
141 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
142 |         </li>
143 |         <li class="nav-item">
144 |           <a class="nav-link active" href="/components/intro.html">元件基礎</a>
145 |         </li>
146 |         <li class="nav-item">
147 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
148 |         </li>
149 |         <li class="nav-item">
150 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
151 |         </li>
152 |         <li class="nav-item">
153 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
154 |         </li>
155 |       </ul>
156 |     </div>
157 |   </div>
158 | </nav>
159 | 
160 | <footer class="footer py-2 bg-light">
161 |   <div class="container text-center">
162 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
163 |   </div>
164 | </footer>
165 | <link rel="stylesheet" href="/stylesheets/all.css">
166 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
167 | </body>
168 | </html>
169 | 


--------------------------------------------------------------------------------
/es6/objectReference.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>物件參考特性</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">物件參考特性</h1><small>檔名：<code>objectReference.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | // #1 物件是以傳參考的形式賦值
  9 | // const person = {
 10 | //   name: '小明',
 11 | //   obj: {}
 12 | // }
 13 | 
 14 | 
 15 | // #2 陷阱
 16 | // const fn = (item) => {
 17 | //   item.name = '杰倫';
 18 | //   // ...
 19 | // }
 20 | 
 21 | 
 22 | // 關於：這樣的錯誤，ESLint 也有建議不要這麼做（但你是有經驗的開發者時，下方也有提供關閉的方式）
 23 | // https://cn.eslint.org/docs/rules/no-param-reassign
 24 | 
 25 | // #3 解決方案
 26 | // #3-1 淺層拷貝
 27 | // const person = {
 28 | //   name: '小明',
 29 | //   obj: {}
 30 | // }
 31 | 
 32 | 
 33 | // #3-2 深層拷貝
 34 | // const person = {
 35 | //   name: '小明',
 36 | //   obj: {}
 37 | // }
 38 | 
 39 | const Card = ({ person }) => {
 40 |   return <div className="card">
 41 |     <div className="card-body">
 42 |       {person.name}
 43 |     </div>
 44 |   </div>
 45 | }
 46 | 
 47 | const App = () => {
 48 |   const [person, setPerson] = React.useState({
 49 |     name: '卡斯伯',
 50 |     text: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates quibusdam, at aperiam qui, accusantium alias, neque dolor ea ratione nesciunt velit rerum consectetur modi harum deserunt perferendis culpa quaerat facilis?'
 51 |   });
 52 | 
 53 |   const changePersonName = (e) => {
 54 |     const value = e.target.value;
 55 |     setPerson({...person, name: value });
 56 |   }
 57 | 
 58 |   return <div>
 59 |     <input type="text" className="form-control" onChange={changePersonName} value={person.name} />
 60 |     <Card person={person}></Card>
 61 |   </div>
 62 | }
 63 | 
 64 | ReactDOM.createRoot(document.getElementById('root'))
 65 |   .render(<App />)
 66 | 
 67 | </script>
 68 | <!-- 🙇🙇練習結束🙇🙇 -->
 69 | </main>
 70 |   
 71 |     <aside
 72 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 73 |   
 74 |   <div class="list-group">
 75 |   
 76 |     <a href="/es6/shorthand.html"
 77 |       class="list-group-item list-group-item-action
 78 |         
 79 |         ">
 80 |       語法糖
 81 |     </a>
 82 |   
 83 |     <a href="/es6/destructuringAssignment.html"
 84 |       class="list-group-item list-group-item-action
 85 |         
 86 |         ">
 87 |       解構
 88 |     </a>
 89 |   
 90 |     <a href="/es6/arrowFunction.html"
 91 |       class="list-group-item list-group-item-action
 92 |         
 93 |         ">
 94 |       箭頭函式
 95 |     </a>
 96 |   
 97 |     <a href="/es6/forEach.html"
 98 |       class="list-group-item list-group-item-action
 99 |         
100 |         ">
101 |       陣列方法
102 |     </a>
103 |   
104 |     <a href="/es6/objectReference.html"
105 |       class="list-group-item list-group-item-action
106 |         
107 |         active">
108 |       物件參考特性
109 |     </a>
110 |   
111 |     <a href="/es6/promise.html"
112 |       class="list-group-item list-group-item-action
113 |         
114 |         ">
115 |       Promise
116 |     </a>
117 |   
118 |     <a href="/es6/asyncAwait.html"
119 |       class="list-group-item list-group-item-action
120 |         
121 |         ">
122 |       Async/Await
123 |     </a>
124 |   
125 |     <a href="/es6/asyncAwaitAdv.html"
126 |       class="list-group-item list-group-item-action
127 |         
128 |         ">
129 |       Async/Await 進階
130 |     </a>
131 |   
132 |     <a href="/es6/esModule.html"
133 |       class="list-group-item list-group-item-action
134 |         
135 |         ">
136 |       ES Module
137 |     </a>
138 |   
139 |   </div>
140 |   <div class="mt-3 text-end p-2 bg-light rounded">
141 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
142 |   </div>
143 | </div>
144 | 
145 | </aside>
146 |     
147 |   </div>
148 | </div>
149 | 
150 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
151 |   <div class="container-fluid">
152 |     <a class="navbar-brand" href="/">React 練習手冊</a>
153 |     <div class="collapse navbar-collapse" id="navbarCollapse">
154 |       <ul class="navbar-nav">
155 |         <li class="nav-item">
156 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
157 |         </li>
158 |         <li class="nav-item">
159 |           <a class="nav-link active" href="/es6/shorthand.html">JS 必備觀念</a>
160 |         </li>
161 |         <li class="nav-item">
162 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
163 |         </li>
164 |         <li class="nav-item">
165 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
166 |         </li>
167 |         <li class="nav-item">
168 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
169 |         </li>
170 |         <li class="nav-item">
171 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
172 |         </li>
173 |       </ul>
174 |     </div>
175 |   </div>
176 | </nav>
177 | 
178 | <footer class="footer py-2 bg-light">
179 |   <div class="container text-center">
180 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
181 |   </div>
182 | </footer>
183 | <link rel="stylesheet" href="/stylesheets/all.css">
184 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
185 | </body>
186 | </html>
187 | 


--------------------------------------------------------------------------------
/form/submitForm.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>表單送出</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">表單送出</h1><small>檔名：<code>submitForm.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 |   const { useState } = React
  9 |   const App = () => {
 10 |   
 11 |     return (<div>
 12 |       <form >
 13 |         <div className="mb-3">
 14 |           <label htmlFor="username" className="form-label">使用者名稱</label
 15 |           ><input id="username" type="text" className="form-control" name="username"
 16 |           />
 17 |         </div>
 18 |         <div className="mb-3">
 19 |           <label htmlFor="password" className="form-label">密碼</label
 20 |           ><input id="password" type="password" className="form-control" name="password"
 21 |           />
 22 |         </div>
 23 |         <div className="mb-3">
 24 |           <label htmlFor="isCheck">確認狀態</label>
 25 |           <input id="isCheck" type="checkbox" name="isCheck"
 26 |           />
 27 |         </div>
 28 |         <button type="submit" className="btn btn-primary">送出</button>
 29 |       </form>
 30 |     </div>)
 31 |   }
 32 |   
 33 |   ReactDOM.createRoot(document.querySelector('#root'))
 34 |     .render(<App/>)
 35 |   </script>
 36 | <!-- 🙇🙇練習結束🙇🙇 -->
 37 | </main>
 38 |   
 39 |     <aside
 40 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 41 |   
 42 |   <div class="list-group">
 43 |   
 44 |     <a href="/form/basicForm.html"
 45 |       class="list-group-item list-group-item-action
 46 |         
 47 |         ">
 48 |       基礎表單觀念
 49 |     </a>
 50 |   
 51 |     <a href="/form/reactForm.html"
 52 |       class="list-group-item list-group-item-action
 53 |         
 54 |         ">
 55 |       React 與表單元素
 56 |     </a>
 57 |   
 58 |     <a href="/form/reactForm2.html"
 59 |       class="list-group-item list-group-item-action
 60 |         
 61 |         ">
 62 |       React 與表單元素 2
 63 |     </a>
 64 |   
 65 |     <a href="/form/submitForm.html"
 66 |       class="list-group-item list-group-item-action
 67 |         
 68 |         active">
 69 |       表單送出
 70 |     </a>
 71 |   
 72 |     <a href="/form/formEvent.html"
 73 |       class="list-group-item list-group-item-action
 74 |         
 75 |         ">
 76 |       表單方法
 77 |     </a>
 78 |   
 79 |     <a href="/form/basicHookForm.html"
 80 |       class="list-group-item list-group-item-action
 81 |         
 82 |         ">
 83 |       React Hook Form 基礎
 84 |     </a>
 85 |   
 86 |     <a href="/form/hookFormDefaultValue.html"
 87 |       class="list-group-item list-group-item-action
 88 |         
 89 |         ">
 90 |       React Hook Form 控制值
 91 |     </a>
 92 |   
 93 |     <a href="/form/hookFormErrorStyle.html"
 94 |       class="list-group-item list-group-item-action
 95 |         
 96 |         ">
 97 |       React Hook Form 錯誤樣式
 98 |     </a>
 99 |   
100 |     <a href="/form/hookFormValidation.html"
101 |       class="list-group-item list-group-item-action
102 |         
103 |         ">
104 |       React Hook Form 驗證方法
105 |     </a>
106 |   
107 |     <a href="/form/hookFormComponent.html"
108 |       class="list-group-item list-group-item-action
109 |         
110 |         ">
111 |       React Hook Form 元件化
112 |     </a>
113 |   
114 |     <a href="/form/final.html"
115 |       class="list-group-item list-group-item-action
116 |         
117 |         ">
118 |       表單最終
119 |     </a>
120 |   
121 |     <a href="/form/finalAnswer.html"
122 |       class="list-group-item list-group-item-action
123 |         
124 |         ">
125 |       表單最終 解答
126 |     </a>
127 |   
128 |   </div>
129 |   <div class="mt-3 text-end p-2 bg-light rounded">
130 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
131 |   </div>
132 | </div>
133 | 
134 | </aside>
135 |     
136 |   </div>
137 | </div>
138 | 
139 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
140 |   <div class="container-fluid">
141 |     <a class="navbar-brand" href="/">React 練習手冊</a>
142 |     <div class="collapse navbar-collapse" id="navbarCollapse">
143 |       <ul class="navbar-nav">
144 |         <li class="nav-item">
145 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
146 |         </li>
147 |         <li class="nav-item">
148 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
149 |         </li>
150 |         <li class="nav-item">
151 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
152 |         </li>
153 |         <li class="nav-item">
154 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
155 |         </li>
156 |         <li class="nav-item">
157 |           <a class="nav-link active" href="/form/basicForm.html">表單</a>
158 |         </li>
159 |         <li class="nav-item">
160 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
161 |         </li>
162 |       </ul>
163 |     </div>
164 |   </div>
165 | </nav>
166 | 
167 | <footer class="footer py-2 bg-light">
168 |   <div class="container text-center">
169 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
170 |   </div>
171 | </footer>
172 | <link rel="stylesheet" href="/stylesheets/all.css">
173 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
174 | </body>
175 | </html>
176 | 


--------------------------------------------------------------------------------
/hooksAdv/useCustomHook3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>使用現成的 Hooks</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">使用現成的 Hooks</h1><small>檔名：<code>useCustomHook3.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | const { useState, useEffect, useRef } = React;
  9 | 
 10 | // https://usehooks.com/
 11 | // https://usehooks.com/useDebounce/
 12 | 
 13 | const App = () => {
 14 |   const [text, setText] = useState('')
 15 | 
 16 |   return (<>
 17 |     <input type="text" onChange={e => setText(e.target.value)}
 18 |     />
 19 |   </>)
 20 | }
 21 | 
 22 | 
 23 | ReactDOM.createRoot(document.querySelector('#root'))
 24 |   .render(<App/>)
 25 | </script>
 26 | 
 27 | <!-- 🙇🙇練習結束🙇🙇 -->
 28 | </main>
 29 |   
 30 |     <aside
 31 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 32 |   
 33 |   <div class="list-group">
 34 |   
 35 |     <a href="/hooksAdv/lifeCycle.html"
 36 |       class="list-group-item list-group-item-action
 37 |         
 38 |         ">
 39 |       hook 的生命週期概念
 40 |     </a>
 41 |   
 42 |     <a href="/hooksAdv/useMemo.html"
 43 |       class="list-group-item list-group-item-action
 44 |         
 45 |         ">
 46 |       useMemo
 47 |     </a>
 48 |   
 49 |     <a href="/hooksAdv/useMemoSort.html"
 50 |       class="list-group-item list-group-item-action
 51 |         
 52 |         ">
 53 |       useMemo 過濾、排序
 54 |     </a>
 55 |   
 56 |     <a href="/hooksAdv/memoComponent.html"
 57 |       class="list-group-item list-group-item-action
 58 |         
 59 |         ">
 60 |       memo 元件
 61 |     </a>
 62 |   
 63 |     <a href="/hooksAdv/useCallback.html"
 64 |       class="list-group-item list-group-item-action
 65 |         
 66 |         ">
 67 |       useCallback
 68 |     </a>
 69 |   
 70 |     <a href="/hooksAdv/useLayoutEffect.html"
 71 |       class="list-group-item list-group-item-action
 72 |         
 73 |         ">
 74 |       useLayoutEffect
 75 |     </a>
 76 |   
 77 |     <a href="/hooksAdv/useCustomHook.html"
 78 |       class="list-group-item list-group-item-action
 79 |         
 80 |         ">
 81 |       自定義 Hook
 82 |     </a>
 83 |   
 84 |     <a href="/hooksAdv/useDebugValue.html"
 85 |       class="list-group-item list-group-item-action
 86 |         
 87 |         ">
 88 |       useDebugValue
 89 |     </a>
 90 |   
 91 |     <a href="/hooksAdv/useCustomHook2.html"
 92 |       class="list-group-item list-group-item-action
 93 |         
 94 |         ">
 95 |       自定義 Hook 2
 96 |     </a>
 97 |   
 98 |     <a href="/hooksAdv/useCustomHook3.html"
 99 |       class="list-group-item list-group-item-action
100 |         
101 |         active">
102 |       使用現成的 Hooks
103 |     </a>
104 |   
105 |     <a href="/hooksAdv/crossComponent.html"
106 |       class="list-group-item list-group-item-action
107 |         
108 |         ">
109 |       跨元件的狀態問題
110 |     </a>
111 |   
112 |     <a href="/hooksAdv/useContext.html"
113 |       class="list-group-item list-group-item-action
114 |         
115 |         ">
116 |       跨元件狀態
117 |     </a>
118 |   
119 |     <a href="/hooksAdv/useContext2.html"
120 |       class="list-group-item list-group-item-action
121 |         
122 |         ">
123 |       跨元件狀態 進階
124 |     </a>
125 |   
126 |     <a href="/hooksAdv/useReducerIntro.html"
127 |       class="list-group-item list-group-item-action
128 |         
129 |         ">
130 |       狀態管理 useReducer
131 |     </a>
132 |   
133 |     <a href="/hooksAdv/useReducer.html"
134 |       class="list-group-item list-group-item-action
135 |         
136 |         ">
137 |       useReducer 案例介紹
138 |     </a>
139 |   
140 |   </div>
141 |   <div class="mt-3 text-end p-2 bg-light rounded">
142 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
143 |   </div>
144 | </div>
145 | 
146 | </aside>
147 |     
148 |   </div>
149 | </div>
150 | 
151 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
152 |   <div class="container-fluid">
153 |     <a class="navbar-brand" href="/">React 練習手冊</a>
154 |     <div class="collapse navbar-collapse" id="navbarCollapse">
155 |       <ul class="navbar-nav">
156 |         <li class="nav-item">
157 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
158 |         </li>
159 |         <li class="nav-item">
160 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
161 |         </li>
162 |         <li class="nav-item">
163 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
164 |         </li>
165 |         <li class="nav-item">
166 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
167 |         </li>
168 |         <li class="nav-item">
169 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
170 |         </li>
171 |         <li class="nav-item">
172 |           <a class="nav-link active" href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
173 |         </li>
174 |       </ul>
175 |     </div>
176 |   </div>
177 | </nav>
178 | 
179 | <footer class="footer py-2 bg-light">
180 |   <div class="container text-center">
181 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
182 |   </div>
183 | </footer>
184 | <link rel="stylesheet" href="/stylesheets/all.css">
185 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
186 | </body>
187 | </html>
188 | 


--------------------------------------------------------------------------------
/form/formEvent.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>表單方法</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">表單方法</h1><small>檔名：<code>formEvent.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 |   const { useState } = React
  9 |   const App = () => {
 10 |     const [search, setSearch] = useState('');
 11 | 
 12 |     // 使用 form submit 送出
 13 | 
 14 | 
 15 |     // Enter custom submit
 16 | 
 17 | 
 18 |     
 19 |   
 20 |     return (<div>
 21 |       <form>
 22 |         <div className="mb-3">
 23 |           <label htmlFor="search2" className="form-label">搜尋</label>
 24 |           <input id="search2" type="search" className="form-control" name="search"
 25 |           onChange={(e) => setSearch(e.target.value)}
 26 |           value={search} />
 27 |         </div>
 28 |       </form>
 29 | 
 30 |       <label htmlFor="search1" className="form-label">搜尋</label>
 31 |       {/* https://reactjs.org/docs/events.html#keyboard-events */}
 32 |       <input id="search1" type="search" className="form-control" name="search"
 33 |       value={search}
 34 |       onChange={(e) => setSearch(e.target.value)} />
 35 |     </div>)
 36 |   }
 37 |   
 38 |   ReactDOM.createRoot(document.querySelector('#root'))
 39 |     .render(<App/>)
 40 |   </script>
 41 | <!-- 🙇🙇練習結束🙇🙇 -->
 42 | </main>
 43 |   
 44 |     <aside
 45 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 46 |   
 47 |   <div class="list-group">
 48 |   
 49 |     <a href="/form/basicForm.html"
 50 |       class="list-group-item list-group-item-action
 51 |         
 52 |         ">
 53 |       基礎表單觀念
 54 |     </a>
 55 |   
 56 |     <a href="/form/reactForm.html"
 57 |       class="list-group-item list-group-item-action
 58 |         
 59 |         ">
 60 |       React 與表單元素
 61 |     </a>
 62 |   
 63 |     <a href="/form/reactForm2.html"
 64 |       class="list-group-item list-group-item-action
 65 |         
 66 |         ">
 67 |       React 與表單元素 2
 68 |     </a>
 69 |   
 70 |     <a href="/form/submitForm.html"
 71 |       class="list-group-item list-group-item-action
 72 |         
 73 |         ">
 74 |       表單送出
 75 |     </a>
 76 |   
 77 |     <a href="/form/formEvent.html"
 78 |       class="list-group-item list-group-item-action
 79 |         
 80 |         active">
 81 |       表單方法
 82 |     </a>
 83 |   
 84 |     <a href="/form/basicHookForm.html"
 85 |       class="list-group-item list-group-item-action
 86 |         
 87 |         ">
 88 |       React Hook Form 基礎
 89 |     </a>
 90 |   
 91 |     <a href="/form/hookFormDefaultValue.html"
 92 |       class="list-group-item list-group-item-action
 93 |         
 94 |         ">
 95 |       React Hook Form 控制值
 96 |     </a>
 97 |   
 98 |     <a href="/form/hookFormErrorStyle.html"
 99 |       class="list-group-item list-group-item-action
100 |         
101 |         ">
102 |       React Hook Form 錯誤樣式
103 |     </a>
104 |   
105 |     <a href="/form/hookFormValidation.html"
106 |       class="list-group-item list-group-item-action
107 |         
108 |         ">
109 |       React Hook Form 驗證方法
110 |     </a>
111 |   
112 |     <a href="/form/hookFormComponent.html"
113 |       class="list-group-item list-group-item-action
114 |         
115 |         ">
116 |       React Hook Form 元件化
117 |     </a>
118 |   
119 |     <a href="/form/final.html"
120 |       class="list-group-item list-group-item-action
121 |         
122 |         ">
123 |       表單最終
124 |     </a>
125 |   
126 |     <a href="/form/finalAnswer.html"
127 |       class="list-group-item list-group-item-action
128 |         
129 |         ">
130 |       表單最終 解答
131 |     </a>
132 |   
133 |   </div>
134 |   <div class="mt-3 text-end p-2 bg-light rounded">
135 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
136 |   </div>
137 | </div>
138 | 
139 | </aside>
140 |     
141 |   </div>
142 | </div>
143 | 
144 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
145 |   <div class="container-fluid">
146 |     <a class="navbar-brand" href="/">React 練習手冊</a>
147 |     <div class="collapse navbar-collapse" id="navbarCollapse">
148 |       <ul class="navbar-nav">
149 |         <li class="nav-item">
150 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
151 |         </li>
152 |         <li class="nav-item">
153 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
154 |         </li>
155 |         <li class="nav-item">
156 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
157 |         </li>
158 |         <li class="nav-item">
159 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
160 |         </li>
161 |         <li class="nav-item">
162 |           <a class="nav-link active" href="/form/basicForm.html">表單</a>
163 |         </li>
164 |         <li class="nav-item">
165 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
166 |         </li>
167 |       </ul>
168 |     </div>
169 |   </div>
170 | </nav>
171 | 
172 | <footer class="footer py-2 bg-light">
173 |   <div class="container text-center">
174 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
175 |   </div>
176 | </footer>
177 | <link rel="stylesheet" href="/stylesheets/all.css">
178 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
179 | </body>
180 | </html>
181 | 


--------------------------------------------------------------------------------
/hooksAdv/useCustomHook.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>自定義 Hook</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">自定義 Hook</h1><small>檔名：<code>useCustomHook.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | const { useState, useEffect } = React;
  9 | 
 10 | const App = () => {
 11 |   const [text, setText] = useState('')
 12 | 
 13 |   return (<>
 14 |     <input type="text" onChange={e => {
 15 |       setText(e.target.value)
 16 |     }} />
 17 |   </>)
 18 | }
 19 | 
 20 | 
 21 | ReactDOM.createRoot(document.querySelector('#root'))
 22 |   .render(<App/>)
 23 | </script>
 24 | 
 25 | <style>
 26 |   #root {
 27 |     height: 100vh;
 28 |     background-color: #eee;
 29 |   }
 30 | </style>
 31 | <!-- 🙇🙇練習結束🙇🙇 -->
 32 | </main>
 33 |   
 34 |     <aside
 35 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 36 |   
 37 |   <div class="list-group">
 38 |   
 39 |     <a href="/hooksAdv/lifeCycle.html"
 40 |       class="list-group-item list-group-item-action
 41 |         
 42 |         ">
 43 |       hook 的生命週期概念
 44 |     </a>
 45 |   
 46 |     <a href="/hooksAdv/useMemo.html"
 47 |       class="list-group-item list-group-item-action
 48 |         
 49 |         ">
 50 |       useMemo
 51 |     </a>
 52 |   
 53 |     <a href="/hooksAdv/useMemoSort.html"
 54 |       class="list-group-item list-group-item-action
 55 |         
 56 |         ">
 57 |       useMemo 過濾、排序
 58 |     </a>
 59 |   
 60 |     <a href="/hooksAdv/memoComponent.html"
 61 |       class="list-group-item list-group-item-action
 62 |         
 63 |         ">
 64 |       memo 元件
 65 |     </a>
 66 |   
 67 |     <a href="/hooksAdv/useCallback.html"
 68 |       class="list-group-item list-group-item-action
 69 |         
 70 |         ">
 71 |       useCallback
 72 |     </a>
 73 |   
 74 |     <a href="/hooksAdv/useLayoutEffect.html"
 75 |       class="list-group-item list-group-item-action
 76 |         
 77 |         ">
 78 |       useLayoutEffect
 79 |     </a>
 80 |   
 81 |     <a href="/hooksAdv/useCustomHook.html"
 82 |       class="list-group-item list-group-item-action
 83 |         
 84 |         active">
 85 |       自定義 Hook
 86 |     </a>
 87 |   
 88 |     <a href="/hooksAdv/useDebugValue.html"
 89 |       class="list-group-item list-group-item-action
 90 |         
 91 |         ">
 92 |       useDebugValue
 93 |     </a>
 94 |   
 95 |     <a href="/hooksAdv/useCustomHook2.html"
 96 |       class="list-group-item list-group-item-action
 97 |         
 98 |         ">
 99 |       自定義 Hook 2
100 |     </a>
101 |   
102 |     <a href="/hooksAdv/useCustomHook3.html"
103 |       class="list-group-item list-group-item-action
104 |         
105 |         ">
106 |       使用現成的 Hooks
107 |     </a>
108 |   
109 |     <a href="/hooksAdv/crossComponent.html"
110 |       class="list-group-item list-group-item-action
111 |         
112 |         ">
113 |       跨元件的狀態問題
114 |     </a>
115 |   
116 |     <a href="/hooksAdv/useContext.html"
117 |       class="list-group-item list-group-item-action
118 |         
119 |         ">
120 |       跨元件狀態
121 |     </a>
122 |   
123 |     <a href="/hooksAdv/useContext2.html"
124 |       class="list-group-item list-group-item-action
125 |         
126 |         ">
127 |       跨元件狀態 進階
128 |     </a>
129 |   
130 |     <a href="/hooksAdv/useReducerIntro.html"
131 |       class="list-group-item list-group-item-action
132 |         
133 |         ">
134 |       狀態管理 useReducer
135 |     </a>
136 |   
137 |     <a href="/hooksAdv/useReducer.html"
138 |       class="list-group-item list-group-item-action
139 |         
140 |         ">
141 |       useReducer 案例介紹
142 |     </a>
143 |   
144 |   </div>
145 |   <div class="mt-3 text-end p-2 bg-light rounded">
146 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
147 |   </div>
148 | </div>
149 | 
150 | </aside>
151 |     
152 |   </div>
153 | </div>
154 | 
155 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
156 |   <div class="container-fluid">
157 |     <a class="navbar-brand" href="/">React 練習手冊</a>
158 |     <div class="collapse navbar-collapse" id="navbarCollapse">
159 |       <ul class="navbar-nav">
160 |         <li class="nav-item">
161 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
162 |         </li>
163 |         <li class="nav-item">
164 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
165 |         </li>
166 |         <li class="nav-item">
167 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
168 |         </li>
169 |         <li class="nav-item">
170 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
171 |         </li>
172 |         <li class="nav-item">
173 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
174 |         </li>
175 |         <li class="nav-item">
176 |           <a class="nav-link active" href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
177 |         </li>
178 |       </ul>
179 |     </div>
180 |   </div>
181 | </nav>
182 | 
183 | <footer class="footer py-2 bg-light">
184 |   <div class="container text-center">
185 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
186 |   </div>
187 | </footer>
188 | <link rel="stylesheet" href="/stylesheets/all.css">
189 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
190 | </body>
191 | </html>
192 | 


--------------------------------------------------------------------------------
/hooksAdv/lifeCycle.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>hook 的生命週期概念</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">hook 的生命週期概念</h1><small>檔名：<code>lifeCycle.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 |   const { useState, useEffect } = React;
  9 |   
 10 |   const App = () => {
 11 |     const [price, setPrice] = useState(100);
 12 |     const [qty, setQty] = useState(1);
 13 |   
 14 |     return (<>
 15 |       {price} {qty}
 16 |       <input type="number" value={price} onChange={(e) => setPrice(parseInt(e.target.value))} />
 17 |       <input type="number" value={qty} onChange={(e) => setQty(parseInt(e.target.value))} />
 18 |     </>)
 19 |   }
 20 |   
 21 | ReactDOM.createRoot(document.querySelector('#root'))
 22 |   .render(<App/>)
 23 | </script>
 24 | <!-- 🙇🙇練習結束🙇🙇 -->
 25 | </main>
 26 |   
 27 |     <aside
 28 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 29 |   
 30 |   <div class="list-group">
 31 |   
 32 |     <a href="/hooksAdv/lifeCycle.html"
 33 |       class="list-group-item list-group-item-action
 34 |         
 35 |         active">
 36 |       hook 的生命週期概念
 37 |     </a>
 38 |   
 39 |     <a href="/hooksAdv/useMemo.html"
 40 |       class="list-group-item list-group-item-action
 41 |         
 42 |         ">
 43 |       useMemo
 44 |     </a>
 45 |   
 46 |     <a href="/hooksAdv/useMemoSort.html"
 47 |       class="list-group-item list-group-item-action
 48 |         
 49 |         ">
 50 |       useMemo 過濾、排序
 51 |     </a>
 52 |   
 53 |     <a href="/hooksAdv/memoComponent.html"
 54 |       class="list-group-item list-group-item-action
 55 |         
 56 |         ">
 57 |       memo 元件
 58 |     </a>
 59 |   
 60 |     <a href="/hooksAdv/useCallback.html"
 61 |       class="list-group-item list-group-item-action
 62 |         
 63 |         ">
 64 |       useCallback
 65 |     </a>
 66 |   
 67 |     <a href="/hooksAdv/useLayoutEffect.html"
 68 |       class="list-group-item list-group-item-action
 69 |         
 70 |         ">
 71 |       useLayoutEffect
 72 |     </a>
 73 |   
 74 |     <a href="/hooksAdv/useCustomHook.html"
 75 |       class="list-group-item list-group-item-action
 76 |         
 77 |         ">
 78 |       自定義 Hook
 79 |     </a>
 80 |   
 81 |     <a href="/hooksAdv/useDebugValue.html"
 82 |       class="list-group-item list-group-item-action
 83 |         
 84 |         ">
 85 |       useDebugValue
 86 |     </a>
 87 |   
 88 |     <a href="/hooksAdv/useCustomHook2.html"
 89 |       class="list-group-item list-group-item-action
 90 |         
 91 |         ">
 92 |       自定義 Hook 2
 93 |     </a>
 94 |   
 95 |     <a href="/hooksAdv/useCustomHook3.html"
 96 |       class="list-group-item list-group-item-action
 97 |         
 98 |         ">
 99 |       使用現成的 Hooks
100 |     </a>
101 |   
102 |     <a href="/hooksAdv/crossComponent.html"
103 |       class="list-group-item list-group-item-action
104 |         
105 |         ">
106 |       跨元件的狀態問題
107 |     </a>
108 |   
109 |     <a href="/hooksAdv/useContext.html"
110 |       class="list-group-item list-group-item-action
111 |         
112 |         ">
113 |       跨元件狀態
114 |     </a>
115 |   
116 |     <a href="/hooksAdv/useContext2.html"
117 |       class="list-group-item list-group-item-action
118 |         
119 |         ">
120 |       跨元件狀態 進階
121 |     </a>
122 |   
123 |     <a href="/hooksAdv/useReducerIntro.html"
124 |       class="list-group-item list-group-item-action
125 |         
126 |         ">
127 |       狀態管理 useReducer
128 |     </a>
129 |   
130 |     <a href="/hooksAdv/useReducer.html"
131 |       class="list-group-item list-group-item-action
132 |         
133 |         ">
134 |       useReducer 案例介紹
135 |     </a>
136 |   
137 |   </div>
138 |   <div class="mt-3 text-end p-2 bg-light rounded">
139 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
140 |   </div>
141 | </div>
142 | 
143 | </aside>
144 |     
145 |   </div>
146 | </div>
147 | 
148 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
149 |   <div class="container-fluid">
150 |     <a class="navbar-brand" href="/">React 練習手冊</a>
151 |     <div class="collapse navbar-collapse" id="navbarCollapse">
152 |       <ul class="navbar-nav">
153 |         <li class="nav-item">
154 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
155 |         </li>
156 |         <li class="nav-item">
157 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
158 |         </li>
159 |         <li class="nav-item">
160 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
161 |         </li>
162 |         <li class="nav-item">
163 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
164 |         </li>
165 |         <li class="nav-item">
166 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
167 |         </li>
168 |         <li class="nav-item">
169 |           <a class="nav-link active" href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
170 |         </li>
171 |       </ul>
172 |     </div>
173 |   </div>
174 | </nav>
175 | 
176 | <footer class="footer py-2 bg-light">
177 |   <div class="container text-center">
178 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
179 |   </div>
180 | </footer>
181 | <link rel="stylesheet" href="/stylesheets/all.css">
182 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
183 | </body>
184 | </html>
185 | 


--------------------------------------------------------------------------------
/components/nestComponent.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>巢狀元件</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">巢狀元件</h1><small>檔名：<code>nestComponent.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 |   const Card = ({title, price, content, callToAction}) => {
  9 |     return (<div className="card mb-4">
 10 |       <div className="card-header">
 11 |         <h4 className="my-0">{title}</h4>
 12 |       </div>
 13 |       <div className="card-body">
 14 |         <h1 className="card-title">{typeof price === 'number' ? `$${price}` : price }</h1>
 15 |         <p>{content}</p>
 16 |         <button type="button" className="btn btn-outline-primary">{callToAction}</button>
 17 |       </div>
 18 |     </div>)
 19 |   }
 20 | 
 21 | 
 22 | 
 23 |   const App = () => {
 24 |     const products = [
 25 |       {
 26 |         id: 1,
 27 |         title: '基本版',
 28 |         price: 1000,
 29 |         content: '基本每週配給，包含高麗菜、空心菜，健康不馬乎',
 30 |         callToAction: '免費試用'
 31 |       },
 32 |       {
 33 |         id: 2,
 34 |         title: '進階版',
 35 |         price: 6000,
 36 |         content: '奶蛋魚肉經營養師精確估計，適合三人小家庭使用，每週一、四配送',
 37 |         callToAction: '永保健康'
 38 |       },
 39 |       {
 40 |         id: 3,
 41 |         title: '企業版',
 42 |         price: '請洽客服',
 43 |         content: '多少人數均可訂製，5 ~ 1000 人團體均適用',
 44 |         callToAction: '大吃大喝方案'
 45 |       },
 46 |     ]
 47 |     return (
 48 |       <>
 49 |         <h2>月月送菜到你家</h2>
 50 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore molestiae facere asperiores sit aspernatur laboriosam ipsum, excepturi fuga, consequuntur cupiditate, nam a doloremque error adipisci nulla reiciendis itaque odio voluptatibus.</p>
 51 |         {
 52 |           products.map((product) => {
 53 |             return <Card  key={product.id} title={product.title} price={product.price} content={product.content} callToAction={product.callToAction}></Card>
 54 |           })
 55 |         }
 56 |       </>
 57 |     )
 58 |   }
 59 |   
 60 |   ReactDOM.createRoot(document.getElementById('root'))
 61 |     .render(<App/>)
 62 |   </script>
 63 | <!-- 🙇🙇練習結束🙇🙇 -->
 64 | </main>
 65 |   
 66 |     <aside
 67 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 68 |   
 69 |   <div class="list-group">
 70 |   
 71 |     <a href="/components/intro.html"
 72 |       class="list-group-item list-group-item-action
 73 |         
 74 |         ">
 75 |       為什麼要用元件
 76 |     </a>
 77 |   
 78 |     <a href="/components/createLayout.html"
 79 |       class="list-group-item list-group-item-action
 80 |         
 81 |         ">
 82 |       版型建立
 83 |     </a>
 84 |   
 85 |     <a href="/components/createComponent.html"
 86 |       class="list-group-item list-group-item-action
 87 |         
 88 |         ">
 89 |       建立元件
 90 |     </a>
 91 |   
 92 |     <a href="/components/propsDestructuring.html"
 93 |       class="list-group-item list-group-item-action
 94 |         
 95 |         ">
 96 |       資料解構
 97 |     </a>
 98 |   
 99 |     <a href="/components/dataMap.html"
100 |       class="list-group-item list-group-item-action
101 |         
102 |         ">
103 |       使用資料驅動元件
104 |     </a>
105 |   
106 |     <a href="/components/mapKey.html"
107 |       class="list-group-item list-group-item-action
108 |         
109 |         ">
110 |       為什麼要使用 key 值
111 |     </a>
112 |   
113 |     <a href="/components/nestComponent.html"
114 |       class="list-group-item list-group-item-action
115 |         
116 |         active">
117 |       巢狀元件
118 |     </a>
119 |   
120 |     <a href="/components/componentFinal.html"
121 |       class="list-group-item list-group-item-action
122 |         
123 |         ">
124 |       元件章節挑戰
125 |     </a>
126 |   
127 |   </div>
128 |   <div class="mt-3 text-end p-2 bg-light rounded">
129 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
130 |   </div>
131 | </div>
132 | 
133 | </aside>
134 |     
135 |   </div>
136 | </div>
137 | 
138 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
139 |   <div class="container-fluid">
140 |     <a class="navbar-brand" href="/">React 練習手冊</a>
141 |     <div class="collapse navbar-collapse" id="navbarCollapse">
142 |       <ul class="navbar-nav">
143 |         <li class="nav-item">
144 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
145 |         </li>
146 |         <li class="nav-item">
147 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
148 |         </li>
149 |         <li class="nav-item">
150 |           <a class="nav-link active" href="/components/intro.html">元件基礎</a>
151 |         </li>
152 |         <li class="nav-item">
153 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
154 |         </li>
155 |         <li class="nav-item">
156 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
157 |         </li>
158 |         <li class="nav-item">
159 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
160 |         </li>
161 |       </ul>
162 |     </div>
163 |   </div>
164 | </nav>
165 | 
166 | <footer class="footer py-2 bg-light">
167 |   <div class="container text-center">
168 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
169 |   </div>
170 | </footer>
171 | <link rel="stylesheet" href="/stylesheets/all.css">
172 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
173 | </body>
174 | </html>
175 | 


--------------------------------------------------------------------------------
/components/createComponent.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>建立元件</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">建立元件</h1><small>檔名：<code>createComponent.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | // # 元件抽離技巧
  9 | // #1 尋找哪些是重複的部分
 10 | // #2 為新增的元件定義名稱(可使用單一單字，或是使用大駝峰命名)
 11 | // #3 建立新的函式，並將元件建立
 12 | // #4 使用 Props 將資料傳入
 13 | const App = () => {
 14 |   return (
 15 |     <>
 16 |       <h2>月月送菜到你家</h2>
 17 |       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore molestiae facere asperiores sit aspernatur laboriosam ipsum, excepturi fuga, consequuntur cupiditate, nam a doloremque error adipisci nulla reiciendis itaque odio voluptatibus.</p>
 18 |       <div className="card mb-4">
 19 |         <div className="card-header">
 20 |           <h4 className="my-0">基本版</h4>
 21 |         </div>
 22 |         <div className="card-body">
 23 |           <h1 className="card-title">$1000<small>/月</small></h1>
 24 |           <p>基本每週配給，包含高麗菜、空心菜，健康不馬乎</p>
 25 |           <button type="button" className="btn btn-outline-primary">免費試用</button>
 26 |         </div>
 27 |       </div>
 28 | 
 29 |       <div className="card mb-4">
 30 |         <div className="card-header">
 31 |           <h4 className="my-0">進階版</h4>
 32 |         </div>
 33 |         <div className="card-body">
 34 |           <h1 className="card-title">$6000<small>月</small></h1>
 35 |           <p>奶蛋魚肉經營養師精確估計，適合三人小家庭使用，每週一、四配送</p>
 36 |           <button type="button" className="btn btn-outline-primary">永保健康</button>
 37 |         </div>
 38 |       </div>
 39 |       <div className="card mb-4">
 40 |         <div className="card-header">
 41 |           <h4 className="my-0">企業版</h4>
 42 |         </div>
 43 |         <div className="card-body">
 44 |           <h1 className="card-title">請洽客服<small></small></h1>
 45 |           <p>多少人數均可訂製，5 ~ 1000 人團體均適用</p>
 46 |           <button type="button" className="btn btn-outline-primary">大吃大喝方案</button>
 47 |         </div>
 48 |       </div>
 49 |     </>
 50 |   )
 51 | }
 52 | 
 53 | ReactDOM.createRoot(document.getElementById('root'))
 54 |   .render(<App/>)
 55 | </script>
 56 | <!-- 🙇🙇練習結束🙇🙇 -->
 57 | </main>
 58 |   
 59 |     <aside
 60 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 61 |   
 62 |   <div class="list-group">
 63 |   
 64 |     <a href="/components/intro.html"
 65 |       class="list-group-item list-group-item-action
 66 |         
 67 |         ">
 68 |       為什麼要用元件
 69 |     </a>
 70 |   
 71 |     <a href="/components/createLayout.html"
 72 |       class="list-group-item list-group-item-action
 73 |         
 74 |         ">
 75 |       版型建立
 76 |     </a>
 77 |   
 78 |     <a href="/components/createComponent.html"
 79 |       class="list-group-item list-group-item-action
 80 |         
 81 |         active">
 82 |       建立元件
 83 |     </a>
 84 |   
 85 |     <a href="/components/propsDestructuring.html"
 86 |       class="list-group-item list-group-item-action
 87 |         
 88 |         ">
 89 |       資料解構
 90 |     </a>
 91 |   
 92 |     <a href="/components/dataMap.html"
 93 |       class="list-group-item list-group-item-action
 94 |         
 95 |         ">
 96 |       使用資料驅動元件
 97 |     </a>
 98 |   
 99 |     <a href="/components/mapKey.html"
100 |       class="list-group-item list-group-item-action
101 |         
102 |         ">
103 |       為什麼要使用 key 值
104 |     </a>
105 |   
106 |     <a href="/components/nestComponent.html"
107 |       class="list-group-item list-group-item-action
108 |         
109 |         ">
110 |       巢狀元件
111 |     </a>
112 |   
113 |     <a href="/components/componentFinal.html"
114 |       class="list-group-item list-group-item-action
115 |         
116 |         ">
117 |       元件章節挑戰
118 |     </a>
119 |   
120 |   </div>
121 |   <div class="mt-3 text-end p-2 bg-light rounded">
122 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
123 |   </div>
124 | </div>
125 | 
126 | </aside>
127 |     
128 |   </div>
129 | </div>
130 | 
131 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
132 |   <div class="container-fluid">
133 |     <a class="navbar-brand" href="/">React 練習手冊</a>
134 |     <div class="collapse navbar-collapse" id="navbarCollapse">
135 |       <ul class="navbar-nav">
136 |         <li class="nav-item">
137 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
138 |         </li>
139 |         <li class="nav-item">
140 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
141 |         </li>
142 |         <li class="nav-item">
143 |           <a class="nav-link active" href="/components/intro.html">元件基礎</a>
144 |         </li>
145 |         <li class="nav-item">
146 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
147 |         </li>
148 |         <li class="nav-item">
149 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
150 |         </li>
151 |         <li class="nav-item">
152 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
153 |         </li>
154 |       </ul>
155 |     </div>
156 |   </div>
157 | </nav>
158 | 
159 | <footer class="footer py-2 bg-light">
160 |   <div class="container text-center">
161 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
162 |   </div>
163 | </footer>
164 | <link rel="stylesheet" href="/stylesheets/all.css">
165 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
166 | </body>
167 | </html>
168 | 


--------------------------------------------------------------------------------
/es6/shorthand.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>ES6 縮寫</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">ES6 縮寫</h1><small>檔名：<code>shorthand.html</code></small>
  5 |   <div class="alert bg-light">本課程的程式碼會盡可能利用 ES6 或其縮寫的形式撰寫，本章節會介紹實戰中的常見縮寫語法</div>
  6 | </div>
  7 | <!-- 🔥🔥練習開始🔥🔥 -->
  8 | <ul>
  9 | <li>1</li>
 10 | <li>2</li>
 11 | <li>3</li></ul>
 12 | <script type="text/babel">
 13 | // #1 語法糖與新增語法
 14 | // 語法糖：不會影響運作，邏輯與當前 JS 一致
 15 | const obj = {
 16 |   myName: '物件',
 17 |   fn: function() {
 18 |     return this.myName;
 19 |   }
 20 | }
 21 | 
 22 | console.log(obj.fn());
 23 | 
 24 | // 新增語法：會影響運作
 25 | // var myName = '全域';
 26 | // const obj2 = {
 27 | //   myName: '物件',
 28 | //   fn: () => {
 29 | //     return this.myName;
 30 | //   }
 31 | // }
 32 | 
 33 | // console.log(obj2.fn());
 34 | 
 35 | 
 36 | // =====
 37 | // #2 物件字面值 Object literals
 38 | // #2-1 物件內的函式
 39 | // const obj3 = {
 40 | //   myName: '物件',
 41 | //   fn: function() { // 請改為縮寫
 42 | //     return this.myName;
 43 | //   }
 44 | // }
 45 | 
 46 | // console.log(obj3.fn());
 47 | 
 48 | // #2-2 物件內的變數
 49 | // const person = {
 50 | //   name: '小明'
 51 | // };
 52 | 
 53 | 
 54 | 
 55 | 
 56 | 
 57 | // #3 展開
 58 | // #3-1 不同陣列合併
 59 | const groupA = ['小明', '杰倫', '阿姨'];
 60 | const groupB = ['老媽', '老爸'];
 61 | 
 62 | 
 63 | // #3-2 物件擴展
 64 | const methods = {
 65 |   fn1() {
 66 |     console.log(1);
 67 |   },
 68 |   fn2() {
 69 |     console.log(1);
 70 |   },
 71 | }
 72 | 
 73 | 
 74 | // #3-3 轉成純陣列
 75 | // 補充說明：NodeList 或 HTMLCollection 或 Arguments 是「類陣列」的物件，可以運用本章節的展開技巧轉換為純陣列。
 76 | // Argument: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/arguments
 77 | // HTMLCollection: https://developer.mozilla.org/zh-TW/docs/Web/API/HTMLCollection
 78 | // NodeList: https://developer.mozilla.org/zh-TW/docs/Web/API/NodeList
 79 | const doms = document.querySelectorAll('li');
 80 | console.log(doms); // 請轉為純陣列
 81 | 
 82 | 
 83 | 
 84 | // #4 預設值
 85 | // function sum(a, b) { // 請加入預設值避免錯誤
 86 | //   return a + b;
 87 | // }
 88 | // console.log(sum(1));
 89 | </script>
 90 | <!-- 🙇🙇練習結束🙇🙇 -->
 91 | </main>
 92 |   
 93 |     <aside
 94 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 95 |   
 96 |   <div class="list-group">
 97 |   
 98 |     <a href="/es6/shorthand.html"
 99 |       class="list-group-item list-group-item-action
100 |         
101 |         active">
102 |       語法糖
103 |     </a>
104 |   
105 |     <a href="/es6/destructuringAssignment.html"
106 |       class="list-group-item list-group-item-action
107 |         
108 |         ">
109 |       解構
110 |     </a>
111 |   
112 |     <a href="/es6/arrowFunction.html"
113 |       class="list-group-item list-group-item-action
114 |         
115 |         ">
116 |       箭頭函式
117 |     </a>
118 |   
119 |     <a href="/es6/forEach.html"
120 |       class="list-group-item list-group-item-action
121 |         
122 |         ">
123 |       陣列方法
124 |     </a>
125 |   
126 |     <a href="/es6/objectReference.html"
127 |       class="list-group-item list-group-item-action
128 |         
129 |         ">
130 |       物件參考特性
131 |     </a>
132 |   
133 |     <a href="/es6/promise.html"
134 |       class="list-group-item list-group-item-action
135 |         
136 |         ">
137 |       Promise
138 |     </a>
139 |   
140 |     <a href="/es6/asyncAwait.html"
141 |       class="list-group-item list-group-item-action
142 |         
143 |         ">
144 |       Async/Await
145 |     </a>
146 |   
147 |     <a href="/es6/asyncAwaitAdv.html"
148 |       class="list-group-item list-group-item-action
149 |         
150 |         ">
151 |       Async/Await 進階
152 |     </a>
153 |   
154 |     <a href="/es6/esModule.html"
155 |       class="list-group-item list-group-item-action
156 |         
157 |         ">
158 |       ES Module
159 |     </a>
160 |   
161 |   </div>
162 |   <div class="mt-3 text-end p-2 bg-light rounded">
163 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
164 |   </div>
165 | </div>
166 | 
167 | </aside>
168 |     
169 |   </div>
170 | </div>
171 | 
172 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
173 |   <div class="container-fluid">
174 |     <a class="navbar-brand" href="/">React 練習手冊</a>
175 |     <div class="collapse navbar-collapse" id="navbarCollapse">
176 |       <ul class="navbar-nav">
177 |         <li class="nav-item">
178 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
179 |         </li>
180 |         <li class="nav-item">
181 |           <a class="nav-link active" href="/es6/shorthand.html">JS 必備觀念</a>
182 |         </li>
183 |         <li class="nav-item">
184 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
185 |         </li>
186 |         <li class="nav-item">
187 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
188 |         </li>
189 |         <li class="nav-item">
190 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
191 |         </li>
192 |         <li class="nav-item">
193 |           <a class="nav-link " href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
194 |         </li>
195 |       </ul>
196 |     </div>
197 |   </div>
198 | </nav>
199 | 
200 | <footer class="footer py-2 bg-light">
201 |   <div class="container text-center">
202 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
203 |   </div>
204 | </footer>
205 | <link rel="stylesheet" href="/stylesheets/all.css">
206 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
207 | </body>
208 | </html>
209 | 


--------------------------------------------------------------------------------
/hooksAdv/useReducerIntro.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>useReducerIntro</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">useReducerIntro</h1><small>檔名：<code>useReducerIntro.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | 
  7 | <div id="root"></div>
  8 | <script type="text/babel">
  9 |   const { useState, useReducer } = React;
 10 | 
 11 |   const App = () => {
 12 |     const [num, setNum] = useState(0)
 13 |     function increment() {
 14 |       setNum( num + 1);
 15 |     }
 16 |     function decrement() {
 17 |       setNum( num - 1);
 18 |     }
 19 | 
 20 |     return (
 21 |       <>
 22 |         <button type="button" onClick={() => decrement() }>-</button>
 23 |         {num}
 24 |         <button type="button" onClick={() => increment() }>+</button>
 25 |       </>
 26 |     );
 27 |   };
 28 | 
 29 |   ReactDOM.createRoot(document.querySelector('#root')).render(<App />);
 30 | </script>
 31 | 
 32 | <!-- 🙇🙇練習結束🙇🙇 -->
 33 | </main>
 34 |   
 35 |     <aside
 36 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 37 |   
 38 |   <div class="list-group">
 39 |   
 40 |     <a href="/hooksAdv/lifeCycle.html"
 41 |       class="list-group-item list-group-item-action
 42 |         
 43 |         ">
 44 |       hook 的生命週期概念
 45 |     </a>
 46 |   
 47 |     <a href="/hooksAdv/useMemo.html"
 48 |       class="list-group-item list-group-item-action
 49 |         
 50 |         ">
 51 |       useMemo
 52 |     </a>
 53 |   
 54 |     <a href="/hooksAdv/useMemoSort.html"
 55 |       class="list-group-item list-group-item-action
 56 |         
 57 |         ">
 58 |       useMemo 過濾、排序
 59 |     </a>
 60 |   
 61 |     <a href="/hooksAdv/memoComponent.html"
 62 |       class="list-group-item list-group-item-action
 63 |         
 64 |         ">
 65 |       memo 元件
 66 |     </a>
 67 |   
 68 |     <a href="/hooksAdv/useCallback.html"
 69 |       class="list-group-item list-group-item-action
 70 |         
 71 |         ">
 72 |       useCallback
 73 |     </a>
 74 |   
 75 |     <a href="/hooksAdv/useLayoutEffect.html"
 76 |       class="list-group-item list-group-item-action
 77 |         
 78 |         ">
 79 |       useLayoutEffect
 80 |     </a>
 81 |   
 82 |     <a href="/hooksAdv/useCustomHook.html"
 83 |       class="list-group-item list-group-item-action
 84 |         
 85 |         ">
 86 |       自定義 Hook
 87 |     </a>
 88 |   
 89 |     <a href="/hooksAdv/useDebugValue.html"
 90 |       class="list-group-item list-group-item-action
 91 |         
 92 |         ">
 93 |       useDebugValue
 94 |     </a>
 95 |   
 96 |     <a href="/hooksAdv/useCustomHook2.html"
 97 |       class="list-group-item list-group-item-action
 98 |         
 99 |         ">
100 |       自定義 Hook 2
101 |     </a>
102 |   
103 |     <a href="/hooksAdv/useCustomHook3.html"
104 |       class="list-group-item list-group-item-action
105 |         
106 |         ">
107 |       使用現成的 Hooks
108 |     </a>
109 |   
110 |     <a href="/hooksAdv/crossComponent.html"
111 |       class="list-group-item list-group-item-action
112 |         
113 |         ">
114 |       跨元件的狀態問題
115 |     </a>
116 |   
117 |     <a href="/hooksAdv/useContext.html"
118 |       class="list-group-item list-group-item-action
119 |         
120 |         ">
121 |       跨元件狀態
122 |     </a>
123 |   
124 |     <a href="/hooksAdv/useContext2.html"
125 |       class="list-group-item list-group-item-action
126 |         
127 |         ">
128 |       跨元件狀態 進階
129 |     </a>
130 |   
131 |     <a href="/hooksAdv/useReducerIntro.html"
132 |       class="list-group-item list-group-item-action
133 |         
134 |         active">
135 |       狀態管理 useReducer
136 |     </a>
137 |   
138 |     <a href="/hooksAdv/useReducer.html"
139 |       class="list-group-item list-group-item-action
140 |         
141 |         ">
142 |       useReducer 案例介紹
143 |     </a>
144 |   
145 |   </div>
146 |   <div class="mt-3 text-end p-2 bg-light rounded">
147 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
148 |   </div>
149 | </div>
150 | 
151 | </aside>
152 |     
153 |   </div>
154 | </div>
155 | 
156 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
157 |   <div class="container-fluid">
158 |     <a class="navbar-brand" href="/">React 練習手冊</a>
159 |     <div class="collapse navbar-collapse" id="navbarCollapse">
160 |       <ul class="navbar-nav">
161 |         <li class="nav-item">
162 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
163 |         </li>
164 |         <li class="nav-item">
165 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
166 |         </li>
167 |         <li class="nav-item">
168 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
169 |         </li>
170 |         <li class="nav-item">
171 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
172 |         </li>
173 |         <li class="nav-item">
174 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
175 |         </li>
176 |         <li class="nav-item">
177 |           <a class="nav-link active" href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
178 |         </li>
179 |       </ul>
180 |     </div>
181 |   </div>
182 | </nav>
183 | 
184 | <footer class="footer py-2 bg-light">
185 |   <div class="container text-center">
186 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
187 |   </div>
188 | </footer>
189 | <link rel="stylesheet" href="/stylesheets/all.css">
190 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
191 | </body>
192 | </html>
193 | 


--------------------------------------------------------------------------------
/hooksAdv/useMemo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html><head><title>useMemo</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js" integrity="sha512-1/8Tj23BRrWnKZXeBruk6wTnsMJbi/lJsk9bsRgVwb6j5q39n0A00gFjbCTaDo5l5XrPVv4DZXftrJExhRF/Ug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2 | </head><body class="bg-lighter">
  3 | <div class="container main my-5"><div class="row"><main class="col post">
  4 | <!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">useMemo</h1><small>檔名：<code>useMemo.html</code></small></div>
  5 | <!-- 🔥🔥練習開始🔥🔥 -->
  6 | <div id="root"></div>
  7 | <script type="text/babel">
  8 | const { useState, useEffect } = React;
  9 | 
 10 | let num = 0;
 11 | const App = () => {
 12 |   const [price, setPrice] = useState(100);
 13 |   const [qty, setQty] = useState(1);
 14 | 
 15 |   const total = price * qty;
 16 |   num++;
 17 |   console.log(`程式碼已經被計算 ${num} 次`);
 18 | 
 19 | 
 20 |   return (<>
 21 |     {price} {qty}
 22 |     <input type="number" value={price} onChange={(e) => setPrice(parseInt(e.target.value))} />
 23 |     <input type="number" value={qty} onChange={(e) => setQty(parseInt(e.target.value))} />
 24 |     <div>
 25 |       總價：{total}
 26 |     </div>
 27 |   </>)
 28 | }
 29 | 
 30 | 
 31 | ReactDOM.createRoot(document.querySelector('#root'))
 32 |   .render(<App/>)
 33 | </script>
 34 | <!-- 🙇🙇練習結束🙇🙇 -->
 35 | </main>
 36 |   
 37 |     <aside
 38 |       class="col-md-3"><div class="sticky-top" style="top: 76px">
 39 |   
 40 |   <div class="list-group">
 41 |   
 42 |     <a href="/hooksAdv/lifeCycle.html"
 43 |       class="list-group-item list-group-item-action
 44 |         
 45 |         ">
 46 |       hook 的生命週期概念
 47 |     </a>
 48 |   
 49 |     <a href="/hooksAdv/useMemo.html"
 50 |       class="list-group-item list-group-item-action
 51 |         
 52 |         active">
 53 |       useMemo
 54 |     </a>
 55 |   
 56 |     <a href="/hooksAdv/useMemoSort.html"
 57 |       class="list-group-item list-group-item-action
 58 |         
 59 |         ">
 60 |       useMemo 過濾、排序
 61 |     </a>
 62 |   
 63 |     <a href="/hooksAdv/memoComponent.html"
 64 |       class="list-group-item list-group-item-action
 65 |         
 66 |         ">
 67 |       memo 元件
 68 |     </a>
 69 |   
 70 |     <a href="/hooksAdv/useCallback.html"
 71 |       class="list-group-item list-group-item-action
 72 |         
 73 |         ">
 74 |       useCallback
 75 |     </a>
 76 |   
 77 |     <a href="/hooksAdv/useLayoutEffect.html"
 78 |       class="list-group-item list-group-item-action
 79 |         
 80 |         ">
 81 |       useLayoutEffect
 82 |     </a>
 83 |   
 84 |     <a href="/hooksAdv/useCustomHook.html"
 85 |       class="list-group-item list-group-item-action
 86 |         
 87 |         ">
 88 |       自定義 Hook
 89 |     </a>
 90 |   
 91 |     <a href="/hooksAdv/useDebugValue.html"
 92 |       class="list-group-item list-group-item-action
 93 |         
 94 |         ">
 95 |       useDebugValue
 96 |     </a>
 97 |   
 98 |     <a href="/hooksAdv/useCustomHook2.html"
 99 |       class="list-group-item list-group-item-action
100 |         
101 |         ">
102 |       自定義 Hook 2
103 |     </a>
104 |   
105 |     <a href="/hooksAdv/useCustomHook3.html"
106 |       class="list-group-item list-group-item-action
107 |         
108 |         ">
109 |       使用現成的 Hooks
110 |     </a>
111 |   
112 |     <a href="/hooksAdv/crossComponent.html"
113 |       class="list-group-item list-group-item-action
114 |         
115 |         ">
116 |       跨元件的狀態問題
117 |     </a>
118 |   
119 |     <a href="/hooksAdv/useContext.html"
120 |       class="list-group-item list-group-item-action
121 |         
122 |         ">
123 |       跨元件狀態
124 |     </a>
125 |   
126 |     <a href="/hooksAdv/useContext2.html"
127 |       class="list-group-item list-group-item-action
128 |         
129 |         ">
130 |       跨元件狀態 進階
131 |     </a>
132 |   
133 |     <a href="/hooksAdv/useReducerIntro.html"
134 |       class="list-group-item list-group-item-action
135 |         
136 |         ">
137 |       狀態管理 useReducer
138 |     </a>
139 |   
140 |     <a href="/hooksAdv/useReducer.html"
141 |       class="list-group-item list-group-item-action
142 |         
143 |         ">
144 |       useReducer 案例介紹
145 |     </a>
146 |   
147 |   </div>
148 |   <div class="mt-3 text-end p-2 bg-light rounded">
149 |     <small class="text-black-50 fw-light mb-0">文件版本：2022/10/31</small>
150 |   </div>
151 | </div>
152 | 
153 | </aside>
154 |     
155 |   </div>
156 | </div>
157 | 
158 | <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
159 |   <div class="container-fluid">
160 |     <a class="navbar-brand" href="/">React 練習手冊</a>
161 |     <div class="collapse navbar-collapse" id="navbarCollapse">
162 |       <ul class="navbar-nav">
163 |         <li class="nav-item">
164 |           <a class="nav-link " href="/intro/createApp.html">認識 React</a>
165 |         </li>
166 |         <li class="nav-item">
167 |           <a class="nav-link " href="/es6/shorthand.html">JS 必備觀念</a>
168 |         </li>
169 |         <li class="nav-item">
170 |           <a class="nav-link " href="/components/intro.html">元件基礎</a>
171 |         </li>
172 |         <li class="nav-item">
173 |           <a class="nav-link " href="/hooks/startHooks.html">Hooks</a>
174 |         </li>
175 |         <li class="nav-item">
176 |           <a class="nav-link " href="/form/basicForm.html">表單</a>
177 |         </li>
178 |         <li class="nav-item">
179 |           <a class="nav-link active" href="/hooksAdv/lifeCycle.html">Hooks 進階</a>
180 |         </li>
181 |       </ul>
182 |     </div>
183 |   </div>
184 | </nav>
185 | 
186 | <footer class="footer py-2 bg-light">
187 |   <div class="container text-center">
188 |     <small class="text-black-50 fw-light mb-0">六角學院 React 課程專屬文件</small>
189 |   </div>
190 | </footer>
191 | <link rel="stylesheet" href="/stylesheets/all.css">
192 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
193 | </body>
194 | </html>
195 | 


--------------------------------------------------------------------------------