Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jofaval/react-from-the-ground-up

React repository for a compendium of react knowledge, both on personal projects and professional experience
https://github.com/jofaval/react-from-the-ground-up

advanced beginner computer-science intermediate javascript nextjs react react-saga reactjs redux redwoodjs remix software-engineering typescript zero-to-hero

Last synced: 3 days ago
JSON representation

React repository for a compendium of react knowledge, both on personal projects and professional experience

Awesome Lists containing this project

README 

        
# React, from the ground up



React From Zero to Hero or From the Ground Up



## Contents



1. [Introduction](#introduction)

   1. [React](#react)

1. [Lessons](#lessons)

1. [Assessments](#assessments)

1. [Examples](#examples)



## Introduction



[⬆ Back to the contents](#contents)



JavaScript is an EDD (Event-Driven Development) language with a functional paradigm and prototype chaining.



TypeScript is the typed, and thus safer, version of JavaScript. Is it recomended? Yes, maybe as a beginner it may be hard, but it sure will be worth it on the long run.



### React



[⬆ Back to the contents](#contents)



React nurtures from the events, this is something to have in mind while trying to understand React, and probably other JS frameworks.

Created by Meta (previously Facebook), [https://github.com/facebook/react](https://github.com/facebook/react).



Contrary to many other (JS) frameworks out there, React doesn't provide the solutions, rather, it gives you the tools to find the solution that better fits your needs/requirements. But it is true that React is just a library, a really powerful library, but not a framework.



## Slides



I've also decided to include slides for those visual learners. And because they may be easier to maintain, or more visually appealing at least.



All the slidewse are at it's respective folder at [`/slides`](./slides/).



## Lessons



[⬆ Back to the contents](#contents)



You can also check the lessons content at the [`/lesssons`](./lessons/) folder.



It's categorized to my own like, perspectives, opinions and experience. And it's not necessarily, intermediate do this and that, or this is harder or easier, it's just, maybe, how I would have liked to actually learn react if I were to start all over again.



0. [Fundamentals](./lessons/0.-Fundamentals/)

   1. [Pure functions](./lessons/0.-Fundamentals/1.-pure-functions/)

   1. [Memoization](./lessons/0.-Fundamentals/2.-memoization/)

   1. [Promises](./lessons/0.-Fundamentals/3.-promises/)

   1. [TypeScript](./lessons/0.-Fundamentals/4.-typescript/)

   1. [Closures](./lessons/0.-Fundamentals/5.-closures/)

   1. [HOCs](./lessons/0.-Fundamentals/6.-hoc/)

1. [Beginner](./lessons/1.-Beginner/)

   1. [JSX](./lessons/1.-Beginner/0.-jsx/)

   1. [Components](./lessons/1.-Beginner/1.-components/)

   1. [Life Cycle](./lessons/1.-Beginner/2.-life-cycle/)

   1. [React Hooks](./lessons/1.-Beginner/3.-hooks/)

   1. [Classes](./lessons/1.-Beginner/4.-classes/)

   1. [Error Boundary](./lessons/1.-Beginner/5.-error-boundary/)

2. [Intemediate](./lessons/2.-Intemediate/)

   1. [Context API](./lessons/2.-Intemediate/.-context/)

   1. [React Hooks](./lessons/2.-Intemediate/.-hooks/)

   1. [HOCs](./lessons/2.-Intemediate/.-hocs/)

   1. [Suspense](./lessons/2.-Intemediate/.-suspense/)

3. [Advanced](./lessons/3.-Advanced/)

   1. [React Hooks](./lessons/3.-Advanced/.-hooks/)

   1. [Structure](./lessons/3.-Advanced/.-structure/)

   1. [Concurrent](./lessons/3.-Advanced/.-concurrent/)

4. [Extensions](./lessons/.-Extensions/)

   1. [React Dev Tools](./lessons/.-Extensions/react-dev-tools/)

   1. [Redux Dev Tools](./lessons/.-Extensions/redux-dev-tools/)

5. [Libraries](./lessons/.-Libraries/)

   1. [Enzyme](./lessons/.-Libraries/.-enzyme/)

   1. [Prettier](./lessons/.-Libraries/.-prettier/)

   1. [React Error Boundary](./lessons/.-Libraries/.-react-error-boundary/)

   1. [React Intl](./lessons/.-Libraries/.-react-intl/)

   1. [React Query](./lessons/.-Libraries/.-react-query/)

   1. [React Redux](./lessons/.-Libraries/.-react-redux/)

   1. [React Router](./lessons/.-Libraries/.-react-router/)

   1. [React Saga](./lessons/.-Libraries/.-react-saga/)

   1. [Styled Components](./lessons/.-Libraries/.-styled-components/)

6. [Frameworks](./lessons/.-Frameworks/)

   1. [Astro](./lessons/.-Frameworks/.-astro/)

   1. [Docusaurus](./lessons/.-Frameworks/.-docusaurus)

   1. [Gatsby](./lessons/.-Frameworks/.-gatsby/)

   1. [NextJS](./lessons/.-Frameworks/.-next.js/)

   1. [React Native](./lessons/.-Frameworks/.-react-native/)

   1. [Redwood](./lessons/.-Frameworks/.-redwood.js/)

   1. [Remix](./lessons/.-Frameworks/.-remix.js/)



## Assessments



[⬆ Back to the contents](#contents)



You can find some assessments at [`/assessments`](./assessments/).



1. [Todo List](./assessments/todo-list/)



## Examples



[⬆ Back to the contents](#contents)



You can find some examples at [`/examples`](./examples/).



1. [Hello World](./examples/hello-world/)

1. [Good Input](./examples/good-input/)