50 | {portlandTaps.length && (
51 | 
52 | )}
53 |
54 | );
55 | }
56 |
57 | export default CustomHookComponent;
58 |
--------------------------------------------------------------------------------
/src/EvenMoreReactComponent.tsx:
--------------------------------------------------------------------------------
1 | import { ReactElement, ReactNode } from "react";
2 |
3 | export interface HeadingProps {
4 | title: string;
5 | }
6 | export const Heading = ({ title }: HeadingProps) => {
7 | return {title}
; 8 | }; 9 | 10 | export const List:-
19 | {items.map((item, index) => (
20 |
- {render(item)} 21 | ))} 22 |
29 |
32 | );
33 | }
34 |
35 | export default TestComponent;
36 |
--------------------------------------------------------------------------------
/src/UseContextComponent.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useContext } from "react";
2 |
3 | import UserContext, { UserState } from "./store";
4 |
5 | function ConsumerComponent() {
6 | const user = useContext- {str}} />
31 |
10 |
13 | );
14 | }
15 |
16 | function UseContextComponent() {
17 | const [user, userSet] = useStateFirst: {user.first}
11 | Last: {user.last}
12 | {val}
;
14 | }
15 |
16 | export default UseEffectComponent;
17 |
--------------------------------------------------------------------------------
/src/UseReducerComponent.tsx:
--------------------------------------------------------------------------------
1 | import { useReducer } from "react";
2 |
3 | const initialState = {
4 | counter: 100,
5 | };
6 |
7 | type ACTIONTYPES =
8 | | { type: "increment"; payload: number }
9 | | { type: "decrement"; payload: number };
10 |
11 | function counterReducer(state: typeof initialState, action: ACTIONTYPES) {
12 | switch (action.type) {
13 | case "increment":
14 | return {
15 | ...state,
16 | counter: state.counter + action.payload,
17 | };
18 | case "decrement":
19 | return {
20 | ...state,
21 | counter: state.counter - action.payload,
22 | };
23 | default:
24 | throw new Error("Bad action");
25 | }
26 | }
27 |
28 | function UseReducerComponent() {
29 | const [state, dispatch] = useReducer(counterReducer, initialState);
30 |
31 | return (
32 |
33 |
58 | );
59 | }
60 |
61 | export default UseReducerComponent;
62 |
--------------------------------------------------------------------------------
/src/UseRefComponent.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 |
3 | function UseRefComponent() {
4 | const inputRef = useRef{state.counter}
34 |
35 | {" "}
45 | |
46 |
56 |
57 |
8 | ;
9 |
16 |
17 | );
18 | }
19 |
20 | export default UseRefComponent;
21 |
--------------------------------------------------------------------------------
/src/UseStateComponent.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | function UseStateComponent() {
4 | const [arr, arrSet] = useState
9 |
20 | );
21 | }
22 |
23 | export default UseStateComponent;
24 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: auto;
3 | max-width: 800px;
4 | padding: 1rem;
5 | font-size: x-large;
6 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
7 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
8 | sans-serif;
9 | -webkit-font-smoothing: antialiased;
10 | -moz-osx-font-smoothing: grayscale;
11 | }
12 |
13 | code {
14 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
15 | monospace;
16 | }
17 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |
10 |
13 | {JSON.stringify(arr)}
14 |
15 |
16 |
17 | {JSON.stringify(name)}
18 |
19 |