Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neonsy/react-first-steps
This repository contains my learning journey, focusing solely on react
https://github.com/neonsy/react-first-steps
javascript learning-react nodejs react vite
Last synced: 1 day ago
JSON representation
This repository contains my learning journey, focusing solely on react
- Host: GitHub
- URL: https://github.com/neonsy/react-first-steps
- Owner: Neonsy
- License: mit
- Created: 2024-07-30T20:16:12.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-08-06T21:29:06.000Z (3 months ago)
- Last Synced: 2024-08-07T01:58:27.560Z (3 months ago)
- Topics: javascript, learning-react, nodejs, react, vite
- Language: JavaScript
- Homepage:
- Size: 115 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# React First Steps
This repository contains my learnings steps, as I venture into React.
Branches are named after the chapter they are for, and will contain the code for that chapter.
The `main` branch will contain the full code, added linearly from all the branches.
While I do want to learn ReactQuery, ReactRouter, NextJS and TypeScript, I'm not going to be using them in this repository.
I'll be solely using React, in correlation with Vite.
## Goal
As the project's name suggests, the steps taken here will be the first towards learning several technologies, that work brilliantly together.
I have varying experience, but I want to learn them properly.
My goal is to learn React, and to learn how to use it with Vite.
However, the following represents my full learning goal, that I'll pursue after completing this project:
- **[React](https://github.com/facebook/react)**
- **[Vite](https://github.com/vitejs/vite)**
- [NextJS](https://github.com/vercel/next.js)
- [NextAuth](https://github.com/nextauthjs/next-auth)
- [ReactQuery](https://github.com/TanStack/query)
- [TRPC](https://github.com/trpc/trpc)
- [DrizzleORM](https://github.com/drizzle-team/drizzle-orm)
- [TypeScript](https://github.com/microsoft/TypeScript)
- [TailwindCSS](https://github.com/tailwindlabs/tailwindcss)
- [ShadcnUI](https://github.com/shadcn-ui/ui)
## Sections
The following represents the sections / steps, that I've taken through this project:
- [How React Works](/notes/01-how-react-works.md)
- [How Components Work](/notes/02-how-components-work.md)
- [What Is JSX](/notes/03-what-is-jsx.md)
- [Reusability of Components](/notes/04-reusability-of-components.md)
- [What Are Props](/notes/05-what-are-props.md)
- [Destructuring Props](/notes/06-destructuring-props.md)
- [Immutability Of Props](/notes/07-immutability-of-props.md)
- [Passing Arrays And Objects With Props](/notes/08-passing-arrays-and-objects-with-props.md)
- [Displaying Arrays Or Lists](/notes/09-displaying-arrays-or-lists.md)
- [Array Of Objects](/notes/10-array-of-objects.md)
- [Components In Loops](/notes/11-components-in-loops.md)
- [Conditionally Rendering](/notes/12-conditionally-rendering.md)
- [Conditionals Using Element Variables](/notes/13-conditionals-using-element-variables.md)
- [Event Handling](/notes/14-event-handling.md)
- [Introduction To States](/notes/15-introduction-to-states.md)
- [State In React Code](/notes/16-state-in-react-code.md)
- [Multiple States](/notes/17-multiple-states.md)
- [Input Fields In React](/notes/18-input-fields-in-react.md)
- [Multiple Inputs](/notes/19-multiple-inputs.md)
- [Form Submission](/notes/20-form-submission.md)
- [Use Effect Hook](/notes/21-use-effect-hook.md)
- [**`Hooks In React`**](/notes/22-hooks-in-react/)
### [Todo Project](/notes/project-01-todo-app.md)
Now hold on for a second before you judge me for doing a todo project.
I'm aware that that's a classic trope, but I think for learning important concepts for the first time, it's a good idea `to do` a `todo` project. (**Pun intended**)
If I decide to do another project (in this repository), seeing that `main` is the latest version of the repository, you can find the code for the todo project in the [projects branch](../../tree/Project-01-Todo-App/).
> [!NOTE]
> As I'm going to continue with NextJS, I won't be reworking the todo project in this repository, so that I can focus on learning the NextThing (**Pun 2.0**).
>
> But yeah, I now know of prop drilling vs useContext and avoiding useEffect 😃😆
#### Images
##### Start
##### Adding Items
##### Marking Items
##### Scrollbar
