lovindata/reactbyexamples

✨👾 The objective is to do an easy-to-access codes snippets collections of important ReactJs concepts. ReactJs possesses JSX.Element to consider page components as functions instead of declarative HTML. Then each of these component lifecycle can be easily managed using React Hooks.

ReactByExamples - React with TypeScript plus using TailwindCSS and Firebase services ✨

✨👾 The objective is to do an easy-to-access codes snippets collections of important ReactJs concepts. ReactJs possesses JSX.Element to consider page components as functions instead of declarative HTML. Then each of these component lifecycle can be easily managed using React Hooks. Both JSX.Element and React Hooks are based internally on the concept of Virtual DOM allowing high efficient page rendering for the final user.

Table of contents 📃

🔎📚 For a better understanding of each subject please take the time to run the code snippets. They all compile & are runnable ✅. So do not hesitate to fork this git repository and execute them on your own computer 👍.

Remarks:

• NodeJs needs to be install on your computer and I used VSCode as my IDE
• For the links below, when necessary please checkout imports dependency
• Social Media Application is deployed, you can test it in Live 🔴
  • [UP✅] - Social Media Application
  • ⚠️ This project was only made for personal learning & fun, and it is not intented to be production ready. So, you are personally responsible for all the actions and what you are doing with the application

🔎 Subject	📃 Description	👾 Code snippets
Introduction & Basics	This part focuses on understanding JSX.Element as web page components, some TypeScript and quick React Router Dom basics.	React Components & Props
		TypeScript HOF
		React Router Dom
React Hooks	This part focuses on understanding all most used React Hooks as functions to manage components (JSX.Element) lifecycle. (Ordered according most used)	State Hook
		Effect Hook
		Query Hook
		Form Hook
		Custom Hook
Global data OR states	This part focuses on how you can to pass down data globally to components via Context Hook or RTK. (because only using React Props leads to unmaintainable boilerplate code)	Context Hook
		Redux Toolkit (RTK)
Quick projects	This part contains completed good exercices to practice.	Todo List Application
		Social Media Application
Tailwinds CSS	This part focuses on core styling concepts for React components with Tailwind CSS from using basic Flexbox, Spacing, ... layout technics to Transform animations, passing by the Tailwind CSS darkMode config and much more.	Core concepts
		Landing Page Application

References 📚

Main highly used 🤩

• ReactJs docs
• TypeScript docs
• Firebase Hosting
• Firestore - NoSQL database
• TailwindCSS - Getting Started
• Fireship courses
• PedroTech courses (👈😍 Premium quality contents to absolutely checkout)

Sub references 👍

• Bro Code - Learn CSS margins in 4 minutes 📏
• Tailwind Labs - 05: Composing Utilities with @apply – Tailwind CSS v2.0: From Zero to Production
• Fireship - CSS Flexbox in 100 Seconds
• CSS - Position
• Margin auto for positioning elements in flex