├── 01_Welcome_Welcome_Welcome
    ├── 3_Watch_Before_You_Start
    │   └── README.md
    ├── 4_Read_Before_You_Start
    │   └── README.md
    ├── 1_Course_Roadmap_and_Projects
    │   ├── README.md
    │   └── .DS_Store
    ├── 5_Downloading_Course_Material
    │   └── README.md
    └── 2_Building_Our_First_React_App
    │   ├── src
    │       ├── index.js
    │       └── App.js
    │   ├── package.json
    │   └── public
    │       └── index.html
└── README.md


/01_Welcome_Welcome_Welcome/3_Watch_Before_You_Start/README.md:
--------------------------------------------------------------------------------
1 | No code in this section.


--------------------------------------------------------------------------------
/01_Welcome_Welcome_Welcome/4_Read_Before_You_Start/README.md:
--------------------------------------------------------------------------------
1 | No code in this section.


--------------------------------------------------------------------------------
/01_Welcome_Welcome_Welcome/1_Course_Roadmap_and_Projects/README.md:
--------------------------------------------------------------------------------
1 | No code in this section.


--------------------------------------------------------------------------------
/01_Welcome_Welcome_Welcome/5_Downloading_Course_Material/README.md:
--------------------------------------------------------------------------------
1 | No code in this section.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # The-Ultimate-React-Course-2024
2 | A practice-heavy approach to master React by building polished apps, backed up by diagrams, theory, and looks under the hood of React.
3 | 


--------------------------------------------------------------------------------
/01_Welcome_Welcome_Welcome/1_Course_Roadmap_and_Projects/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somekindofwallflower/The-Ultimate-React-Course-2024/main/01_Welcome_Welcome_Welcome/1_Course_Roadmap_and_Projects/.DS_Store


--------------------------------------------------------------------------------
/01_Welcome_Welcome_Welcome/2_Building_Our_First_React_App/src/index.js:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | 
 4 | import App from "./App";
 5 | 
 6 | const rootElement = document.getElementById("root");
 7 | const root = createRoot(rootElement);
 8 | 
 9 | root.render(
10 |   <StrictMode>
11 |     <App />
12 |   </StrictMode>
13 | );
14 | 


--------------------------------------------------------------------------------
/01_Welcome_Welcome_Welcome/2_Building_Our_First_React_App/src/App.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | export default function App() {
 4 |   const [advice, setAdvice] = useState("");
 5 |   const [count, setCount] = useState(0);
 6 | 
 7 |   async function getAdvice() {
 8 |     const res = await fetch("https://api.adviceslip.com/advice")
 9 |     const data = await res.json();
10 |     setAdvice(data.slip.advice);
11 |     setCount((c) => c + 1)
12 |   }
13 | 
14 |   useEffect(function() {
15 |     getAdvice();
16 |   }, [])
17 |   return (
18 |     <div>
19 |       <h1>{advice}</h1>
20 |       <button onClick={getAdvice}>Get Advice</button>
21 |       <Message count={count} />
22 |     </div>
23 |   );
24 | }
25 | 
26 | 
27 | function Message(props) {
28 |   return (
29 |     <p>
30 |       You have read <strong>{props.count}</strong> pieces of advice
31 |     </p>
32 |   )
33 | }


--------------------------------------------------------------------------------
/01_Welcome_Welcome_Welcome/2_Building_Our_First_React_App/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "react",
 3 |     "version": "1.0.0",
 4 |     "description": "React example starter project",
 5 |     "keywords": [
 6 |       "react",
 7 |       "starter"
 8 |     ],
 9 |     "main": "src/index.js",
10 |     "dependencies": {
11 |       "loader-utils": "3.2.1",
12 |       "react": "18.2.0",
13 |       "react-dom": "18.2.0",
14 |       "react-scripts": "5.0.1"
15 |     },
16 |     "devDependencies": {
17 |       "@babel/runtime": "7.13.8",
18 |       "typescript": "4.1.3"
19 |     },
20 |     "scripts": {
21 |       "start": "react-scripts start",
22 |       "build": "react-scripts build",
23 |       "test": "react-scripts test --env=jsdom",
24 |       "eject": "react-scripts eject"
25 |     },
26 |     "browserslist": [
27 |       ">0.2%",
28 |       "not dead",
29 |       "not ie <= 11",
30 |       "not op_mini all"
31 |     ]
32 |   }


--------------------------------------------------------------------------------
/01_Welcome_Welcome_Welcome/2_Building_Our_First_React_App/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 | 	<meta name="theme-color" content="#000000">
 8 | 	<!--
 9 |       manifest.json provides metadata used when your web app is added to the
10 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11 |     -->
12 | 	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13 | 	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14 | 	<!--
15 |       Notice the use of %PUBLIC_URL% in the tags above.
16 |       It will be replaced with the URL of the `public` folder during the build.
17 |       Only files inside the `public` folder can be referenced from the HTML.
18 | 
19 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20 |       work correctly both with client-side routing and a non-root public URL.
21 |       Learn how to configure a non-root public URL by running `npm run build`.
22 |     -->
23 | 	<title>React App</title>
24 | </head>
25 | 
26 | <body>
27 | 	<noscript>
28 | 		You need to enable JavaScript to run this app.
29 | 	</noscript>
30 | 	<div id="root"></div>
31 | 	<!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 | </body>
42 | 
43 | </html>


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