Skip to content

Commit b3e337f

Browse files
anthonydmaysanthonydmays
authored
feat: adds lesson_25 homework and lesson_26 pre-work (#583)
Signed-off-by: Anthony D. Mays <[email protected]>
1 parent 815ec63 commit b3e337f

28 files changed

+4385
-1
lines changed

‎lesson_25/README.md

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,26 @@ Please review the following resources before lecture:
1515

1616
## Homework
1717

18-
- TODO(anthonydmays): Assign some homework
18+
- [ ] Complete the [Introduction to React](#introduction-to-react) exercise.
19+
- [ ] Do pre-work for [lesson 26](/lesson_26/).
20+
21+
### Introduction to React
22+
This exercise will give you hands-on experience with the React framework and supporting tools to enhance a dynamic front-end application that communicates with a backend API.
23+
24+
#### Starting the servers
25+
26+
1. Copy the React [template](./template/) folder to your own unique folder. Make necessary code changes in your folder only.
27+
2. Install the React web server in your copy using `npm install` and then run it using the `npm run dev` command.
28+
29+
#### Create new components
30+
3. Modify the [Home](./template/src/pages/Home/Home.tsx) component to create new `Program` and `ProgramList` components. The needed HTML and CSS has already been provided for you.
31+
- The `Program` component should allow you to configure the title and description to display.
32+
33+
#### Create a page for adding new programs
34+
35+
4. Create a new page (similar to the Home page component) that allows users to provide a new program title and description in a form.
36+
37+
> [!NOTE]
38+
> You can use the [React Router tutorial](https://reactrouter.com/en/main/start/tutorial#updating-contacts-with-formdata) to learn how to handle form submissions.
39+
40+
[react-router-link]: https://reactrouter.com/en/main/start/tutorial

‎lesson_25/template/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎lesson_25/template/.prettierrc

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"bracketSpacing": false,
3+
"singleQuote": true,
4+
"trailingComma": "es5",
5+
"arrowParens": "avoid",
6+
"importOrder": [
7+
"<THIRD_PARTY_MODULES>",
8+
"interface",
9+
"(?=content|api)",
10+
"context/",
11+
"mock/",
12+
"config",
13+
"utils/",
14+
"hooks/",
15+
"(components/|./index)",
16+
".svg",
17+
"^../(.*)$",
18+
"(?=./styles.module.scss)"
19+
],
20+
"endOfLine": "auto",
21+
"importOrderSeparation": true,
22+
"importOrderSortSpecifiers": true,
23+
"plugins": ["@trivago/prettier-plugin-sort-imports"]
24+
}

‎lesson_25/template/eslint.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// .eslintrc.js
2+
import eslintConfigPrettier from 'eslint-config-prettier';
3+
4+
export default [eslintConfigPrettier];

‎lesson_25/template/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Code Different - Cohort 24Q1</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)