Skip to content

Commit b7590c8

Browse files
ThomasCode92ThomasCode92
committed
React Essentials - Practice Project
1 parent e184592 commit b7590c8

File tree

17 files changed

+4522
-4
lines changed

17 files changed

+4522
-4
lines changed

‎README.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ Learn React with [this complete guide](https://www.udemy.com/course/react-the-co
1010

1111
### Table of Content
1212

13-
| Module | Description | Resources |
14-
| ---------------------------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
15-
| React Essentials | Basics of Components, JSX & State | [Folder](./complete-path/react-essentials/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/react-essentials) |
16-
| React Essentials - Deep Dive | Beyond the Basics | [Folder](./complete-path/essentials-deep-dive/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/essentials-deep-dive) |
13+
| Module | Description | Resources |
14+
| ------------------------------------ | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
15+
| React Essentials | Basics of Components, JSX & State | [Folder](./complete-path/react-essentials/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/react-essentials) |
16+
| React Essentials - Deep Dive | Beyond the Basics | [Folder](./complete-path/essentials-deep-dive/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/essentials-deep-dive) |
17+
| RReact Essentials - Practice Project | Apply Knowledge & Practice Concepts | [Folder](./complete-path/essentials-practice/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/essentials-practice) |

‎complete-path/essentials-practice/.eslintrc.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"root": true,
3+
"env": { "browser": true, "es2020": true },
4+
"parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
5+
"extends": [
6+
"eslint:recommended",
7+
"plugin:react/recommended",
8+
"plugin:react/jsx-runtime",
9+
"plugin:react-hooks/recommended",
10+
"plugin:prettier/recommended"
11+
],
12+
"plugins": ["react-refresh", "prettier"],
13+
"rules": {
14+
"react/prop-types": "off",
15+
"prettier/prettier": "warn"
16+
}
17+
}

‎complete-path/essentials-practice/.prettierrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"tabWidth": 2,
3+
"singleQuote": true,
4+
"semi": true,
5+
"arrowParens": "avoid"
6+
}

‎complete-path/essentials-practice/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# React Essentials - Practice Project
2+
3+
## Key Topics
4+
5+
- Build an "_Investments Calculator_" Web App
6+
- Build, Configure & Combine **Components**
7+
- Manage Application **State**
8+
- Output **List** & **Conditional** Content
9+
10+
## Running the Application
11+
12+
To run the application, follow these steps:
13+
14+
```bash
15+
git clone https://github.com/ThomasCode92/react-complete-guide
16+
cd complete-path/essentials-practice # navigate to project folder
17+
npm run install # install dependencies
18+
npm run dev # start development server
19+
```
20+
21+
Open [http://localhost:5173](http://localhost:5173) in a browser to view the application.

‎complete-path/essentials-practice/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link
6+
rel="icon"
7+
type="image/svg+xml"
8+
href="/investment-calculator-logo.png"
9+
/>
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11+
<title>React Investment Calculator</title>
12+
</head>
13+
<body>
14+
<div id="root"></div>
15+
<script type="module" src="/src/index.jsx"></script>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)