Skip to content

Commit 25b6f3a

Browse files
kavyashreeshahkavyashreeshah
committed
Updated
1 parent dfcaf92 commit 25b6f3a

File tree

6,360 files changed

+219186
-30700
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

6,360 files changed

+219186
-30700
lines changed

‎Section 20/.gitignore ‎Section 1 Getting Started/.gitignore

File renamed without changes.

‎Section 1 Getting Started/README.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Course Code & Materials
2+
3+
This repository contains the course source code and other extra materials like slides.
4+
5+
## How to use
6+
7+
The code snapshots are organized in multiple **branches** where every branch **represents a course section**.
8+
9+
For example, the branch [Section 1 Getting Started](https://github.com/PacktPublishing/React---The-Complete-Guide-includes-Hooks-React-Router-and-Redux-Second-Edition) holds all code snapshots and extra materials for section 1 of the course ("Getting Started").
10+
11+
You can switch branches via the branch dropdown above the directory explorer.
12+
13+
![Click on the branch dropdown and then select the appropriate branch for the course section you're looking for](./selecting-a-branch.jpg)
14+
15+
In most branches, you'll find multiple folders which organize the section-specific content further:
16+
17+
- Often, you'll find a `/code` subfolder which contains any relevent code snapshots for the given course section
18+
- You also often find `/slides` folders which - guess what - contain the slides for the module
19+
- `/extra-files` typically contains extra files like `.css` files that might be attached to individual lectures in that course module
20+
21+
The folder names should generally be self-explanatory but also feel free to simply click around and see which materials are available.
22+
23+
## Using code snapshots
24+
25+
Code snapshots (which you find in `/code`) are there for you to compare your code to mine and find + fix errors you might have in your code.
26+
27+
You can either view my code directly here on Github (you can open + view code files without issues here) or you download the snapshots.
28+
29+
The subfolders in the `/code` folder are named such that mapping them to the course lectures is straightforward.
30+
31+
### Downloading code snapshots
32+
33+
You can download all the content of a branch via the "Code" button here on Github. You can then either [clone](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) the repository or simply download the selected branch content as a ZIP file.
34+
35+
**Important:** You always download the **entire branch content!**
36+
37+
You can then dive into the interesting folders (e.g. the individual code snapshots) locally on your hard drive.
38+
39+
### Running the attached code
40+
41+
You can use the attached code simply to compare it to yours. But you can also run it.
42+
43+
To run my code, navigate into a specific code snapshot folder via the `cd` command in your command prompt or terminal first.
44+
45+
Then run `npm install` to install all required dependencies (this will create a `/node_modules` folder).
46+
47+
**Important:** If you're using the code for a module that requires API keys or a backend (e.g. the module about sending Http requests), you'll have to use **your backend URLs** or API keys. Mine won't work (I disabled my projects).

‎Section 1 Getting Started/S01 - Useful Resource Links.txt

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
S01 - Useful Resource Links
2+
3+
Vanilla JavaScript Demo:
4+
https://codesandbox.io/s/vanilla-js-demo-6049kj
5+
6+
React Demo:
7+
https://codesandbox.io/s/react-vs-vanilla-demo-uc08fv
8+
9+
Updated React Demo App:
10+
https://codesandbox.io/s/first-react-app-start-7ec9fd
11+
12+
Finished First React App:
13+
https://codesandbox.io/s/first-react-app-zj5cx1
14+
15+
Course Resources:
16+
https://github.com/academind/react-complete-guide-code
17+
18+
----
19+
You will find multiple code snapshots for this module here in this Github repository: https://github.com/academind/react-complete-guide-code/tree/01-getting-started
20+
21+
Usage instructions can be found on the page that link is leading to.
22+
23+
Simply pick one of the snapshots in the /code folder - the subfolder names are chosen such that they are easy to match against lecture names in this course section.
24+
25+
You will also find section slides (if available) in that Github repository.

‎Section 1 Getting Started/code/edited-first-app/package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "first-react-app",
3+
"version": "1.0.0",
4+
"description": "",
5+
"keywords": [],
6+
"main": "src/index.js",
7+
"dependencies": {
8+
"loader-utils": "3.2.1",
9+
"react": "18.2.0",
10+
"react-dom": "18.2.0",
11+
"react-scripts": "5.0.1"
12+
},
13+
"devDependencies": {
14+
"@babel/runtime": "7.13.8",
15+
"typescript": "4.1.3"
16+
},
17+
"scripts": {
18+
"start": "react-scripts start",
19+
"build": "react-scripts build",
20+
"test": "react-scripts test --env=jsdom",
21+
"eject": "react-scripts eject"
22+
},
23+
"browserslist": [
24+
">0.2%",
25+
"not dead",
26+
"not ie <= 11",
27+
"not op_mini all"
28+
]
29+
}

‎Section 1 Getting Started/code/edited-first-app/public/index.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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>

‎Section 1 Getting Started/code/edited-first-app/public/react-logo-xs.png

30.8 KB
Loading

‎Section 1 Getting Started/code/edited-first-app/src/App.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { useState } from "react";
2+
import "./styles.css";
3+
4+
const content = [
5+
[
6+
"React is extremely popular",
7+
"It makes building complex, interactive UIs a breeze",
8+
"It's powerful & flexible",
9+
"It has a very active and versatile ecosystem"
10+
],
11+
[
12+
"Components, JSX & Props",
13+
"State",
14+
"Hooks (e.g., useEffect())",
15+
"Dynamic rendering"
16+
],
17+
[
18+
"Official web page (react.dev)",
19+
"Next.js (Fullstack framework)",
20+
"React Native (build native mobile apps with React)"
21+
],
22+
[
23+
"Vanilla JavaScript requires imperative programming",
24+
"Imperative Programming: You define all the steps needed to achieve a result",
25+
"React on the other hand embraces declarative programming",
26+
"With React, you define the goal and React figures out how to get there"
27+
]
28+
];
29+
30+
export default function App() {
31+
const [activeContentIndex, setActiveContentIndex] = useState(0);
32+
33+
return (
34+
<div>
35+
<header>
36+
<img src="react-logo-xs.png" alt="React logo" />
37+
<div>
38+
<h1>React.js</h1>
39+
<p>i.e., using the React library for rendering the UI</p>
40+
</div>
41+
</header>
42+
43+
<div id="tabs">
44+
<menu>
45+
<button
46+
className={activeContentIndex === 0 ? "active" : ""}
47+
onClick={() => setActiveContentIndex(0)}
48+
>
49+
Why React?
50+
</button>
51+
<button
52+
className={activeContentIndex === 1 ? "active" : ""}
53+
onClick={() => setActiveContentIndex(1)}
54+
>
55+
Core Features
56+
</button>
57+
<button
58+
className={activeContentIndex === 2 ? "active" : ""}
59+
onClick={() => setActiveContentIndex(2)}
60+
>
61+
Related Resources
62+
</button>
63+
<button
64+
className={activeContentIndex === 3 ? "active" : ""}
65+
onClick={() => setActiveContentIndex(3)}
66+
>
67+
React vs JS
68+
</button>
69+
</menu>
70+
<div id="tab-content">
71+
<ul>
72+
{content[activeContentIndex].map((item) => (
73+
<li key={item}>{item}</li>
74+
))}
75+
</ul>
76+
</div>
77+
</div>
78+
</div>
79+
);
80+
}

‎Section 1 Getting Started/code/edited-first-app/src/index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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+
);

‎Section 1 Getting Started/code/edited-first-app/src/styles.css

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: sans-serif;
7+
background-color: #181c1f;
8+
color: #bdd1d4;
9+
margin: 2rem;
10+
}
11+
12+
header {
13+
margin: 2rem 0;
14+
display: flex;
15+
gap: 1.5rem;
16+
align-items: center;
17+
}
18+
19+
header img {
20+
width: 3rem;
21+
object-fit: contain;
22+
}
23+
24+
header h1 {
25+
margin: 0;
26+
color: #48d9f3;
27+
}
28+
29+
header p {
30+
margin: 0;
31+
color: #82c2ce;
32+
}
33+
34+
#tabs {
35+
max-width: 32rem;
36+
margin: 2rem 0;
37+
overflow: hidden;
38+
}
39+
40+
#tabs menu {
41+
margin: 0;
42+
padding: 0;
43+
display: flex;
44+
gap: 0.25rem;
45+
}
46+
47+
#tabs button {
48+
font: inherit;
49+
font-size: 0.85rem;
50+
background-color: #282f33;
51+
border: none;
52+
border-bottom-color: #48d9f3;
53+
color: #e0eff1;
54+
border-radius: 4px 4px 0 0;
55+
padding: 0.75rem 1rem;
56+
cursor: pointer;
57+
transition: all 0.2s ease-out;
58+
}
59+
60+
#tabs button:hover,
61+
#tabs button.active {
62+
background-color: #48d9f3;
63+
color: #273133;
64+
}
65+
66+
#tab-content {
67+
background-color: #2d3942;
68+
border-radius: 0 4px 4px 4px;
69+
padding: 1rem;
70+
}
71+
72+
#tab-content li {
73+
margin: 0.75rem 0;
74+
}

‎Section 1 Getting Started/code/react-vs-vanilla-js-example/just-js/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Vanilla JavaScript</title>
5+
<meta charset="UTF-8" />
6+
<link rel="stylesheet" href="styles.css" />
7+
<script src="index.js" defer></script>
8+
</head>
9+
10+
<body>
11+
<header>
12+
<img src="js-logo-xs.png" alt="JavaScript logo" />
13+
<div>
14+
<h1>Vanilla JavaScript</h1>
15+
<p>i.e., JavaScript without any (UI) framework or library</p>
16+
</div>
17+
</header>
18+
19+
<div id="tabs">
20+
<menu>
21+
<button id="btn-why-react" class="active">Why React?</button>
22+
<button id="btn-core-features">Core Features</button>
23+
<button id="btn-resources">Related Resources</button>
24+
</menu>
25+
<div id="tab-content"></div>
26+
</div>
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)