Everything about REACT JS

Awesome resources to learn React today!

Promo: You can get the Complete DSA Guide (and Bundle) from 30dayscoding.com => which covers all patterns, data structures, and algorithms with detailed information + solutions (for FREEEEEE). Email us telling how we did at 30dayscoding@gmail.com.

Introduction

• ReactJS Introduction — javatpoint
• React.js (Introduction and Working)

Props

Read

• ReactJS Fundamental — Props & State Simplified | by InfinityPaul
• Components and Props — React
• Render Props — React
• ReactJS Props Validation — javatpoint

Watch

• ReactJS Tutorial — 9 — Props

Mixins

Read

• React Tutorial => Mixins
• Replacing Mixins in React. If you want to run the code, here’s a… | by Aristides Staffieri

Watch:

• 12 React Fundamentals Mixins

JSX

Read:

• https://reactjs.org/docs/introducing-jsx.html
• https://reactjs.org/docs/jsx-in-depth.html
• https://www.w3schools.com/react/react_jsx.asp

Watch:

• ReactJS Tutorial — 8 — JSX
• What is JSX?

Reconciliation algorithm

Read

• Reconciliation — React
• https://medium.com/@coolram2104/digging-deeper-inside-the-reconciliation-algorithm-of-react-f0d428ba4ae9

Watch:

• https://www.youtube.com/watch?v=osL7c1Ug7qo
• https://www.youtube.com/watch?v=hvxhIMkWR94

State

Read

• ReactJS | State in React
• https://reactjs.org/docs/hooks-state.html
• React State

Watch

• ReactJS State: SetState, Props and State Explained

State vs props:

• https://www.javatpoint.com/react-state-vs-props

State Management

Read

• State Management Battle in React 2021: Hooks, Redux, and Recoil
• https://kentcdodds.com/blog/application-state-management-with-react
• React State Management Ultimate Battle: React Hooks vs Redux | TSH.io
• How To Manage State on React Class Components

Watch

• Managing React Application State Management — Talk by Kent C. Dodds
• React State Management using Redux (Build a shopping Cart🔥 )

Architecture

Read:

• React JS — Architecture + Features + Folder structure + Design Pattern
• https://www.simform.com/react-architecture-best-practices/
• https://dev.to/kpiteng/react-clean-architecture-114f

Watch:

• A High Level Overview of React
• React Van | Client-Side Architecture of a React/Redux Application

Navigation

Read:

• React Navigation on the Web
• react-navigation: Hello React Navigation

Watch:

• ReactJS Basics — #16 React Router — Navigation & Parameters

React Component Life Cycles:

Read:

• React Component Life-Cycle — javatpoint
• State and Lifecycle — React
• How to understand a component’s lifecycle methods in ReactJS.
• ReactJS — Component Life Cycle

Watch:

• ReactJS Basics — #14 Component Lifecycle
• ReactJS Tutorial — 22 — Component Lifecycle Methods

Resources

• React.Component
• React Render HTML
• React Component API — javatpoint

Constructor

• React Constructor — javatpoint

Component composition:

Read:

• Thinking in React: Component Composition — DEV Community
• Composition vs Inheritance — React
• Component Composition in React

Watch:

• https://www.youtube.com/watch?v=3XaXKiXtNjw
• https://www.youtube.com/watch?v=of7isf3YBZ4

Pass data from parent to child

Read:

• Passing Data Between a Parent and Child in React
• How to pass data from Parent component to Child component in React

Watch:

• ReactJS Basics — #12 Passing Data between Parent and Child Components

Pass data from child to parent

Read:

• How to pass data from a child component to its parent in ReactJS ?
• Passing Data from Child to Parent with React Hooks

Component styling:

Radium

Read:

• Radium: A toolchain for React component styling | by Nishit Maheta
• 30 — Adding and Using Radium In React

Watch:

• Radium Tutorial — Styling React Components in JavaScript

CSS Modules

Read:

• Next Adding a CSS Modules Stylesheet
• CSS Modules and React

Watch:

• Styling React Components with CSS Modules
• Using CSS modules in React js

LESS/SASS

Read:

• Sass vs. Less
• SASS vs LESS vs SCSS — That are the differences — IONOS
• Differences Between Sass and LESS Preprocessors

Watch:

• ReactJS from scratch Part 5 — how to write Sass less Scss in React (node-sass)

HTTP

Read:

• Making http request in React.js
• How to send HTTP Requests in React
• React + Fetch — HTTP POST Request Examples

Watch:

• React + Fetch — HTTP POST Request Examples
• ReactJS Tutorial — 41 — HTTP and React

Source code:

• https://github.com/academind/react-complete-guide-code/tree/14-sending-http-requests

Routing

Read:

• ReactJS | Router
• Understanding The Fundamentals of Routing in React | by Edmond Atto | The Andela Way
• How To Handle Routing in React Apps with React Router
• ReactJS — Router

Watch:

• ReactJS Basics — #15 React Router — Route Setup
• React tutorial for Beginners #50 Dynamic Routing

Refs

Read:

• Refs and the DOM — React
• ReactJS | Refs
• ReactJS — Refs

Watch:

• ReactJS Tutorial — 28 — Refs
• Learn useRef in 11 Minutes

Error Boundaries

Read:

• Error Boundaries — React
• Error Handling in React 16 — React Blog
• Use react-error-boundary to handle errors in React

Watch:

• ReactJS Tutorial — 32 — Error Boundary
• Error Boundaries in React JS | Advanced React

Portal

Read:

• https://www.jayfreestone.com/writing/react-portals-with-hooks/
• https://blog.bitsrc.io/understanding-react-portals-ab79827732c7

Watch:

• https://www.youtube.com/watch?v=HpHLa-5Wdys
• https://www.youtube.com/watch?v=SmMZqh1xdB4

API

Read:

• https://rapidapi.com/blog/how-to-use-an-api-with-react/
• https://reactjs.org/docs/react-api.html
• https://reactjs.org/docs/faq-ajax.html
• React + Fetch — HTTP GET Request Examples

Watch:

• React + Fetch — HTTP GET Request Examples
• React js Tutorial — How To Get Data From An API With React

Local Storage

Read:

• 13 responses to “How to use localStorage with React”
• LocalStorage in ReactJS
• Creating Favorites List Using LocalStorage in React [Part I]

Watch:

• React Context & Hooks Tutorial #21 — Adding Local Storage

Handling Side Effects: useEffect, Reducer, and Context Api

useEffect

Read:

• https://reactjs.org/docs/hooks-effect.html
• https://www.geeksforgeeks.org/reactjs-useeffect-hook/
• https://daveceddia.com/useeffect-hook-examples/
• https://overreacted.io/a-complete-guide-to-useeffect/
• https://dennyscott.io/use-effect-dependency-array/

Watch:

• https://www.youtube.com/watch?v=0ZJgIjIuY7U
• https://www.youtube.com/watch?v=06Y6aJzTmXY

useReducer

Read:

• https://alligator.io/react/usereducer/
• https://www.geeksforgeeks.org/reactjs-usereducer-hook/
• https://www.knowledgehut.com/blog/web-development/usereducer-in-react
• https://dev.to/techcheck/react-hooks-usereducer-pnj

Watch:

• https://www.youtube.com/watch?v=IHJ-TO_1nME
• https://www.youtube.com/watch?v=kK_Wqx3RnHk

Project

• https://github.com/ZhangMYihua/useReducer-example

React Context API

Read:

• https://reactjs.org/docs/context.html
• https://www.toptal.com/react/react-context-api
• https://www.telerik.com/blogs/understand-react-context-api
• https://www.loginradius.com/blog/async/react-context-api-guide-with-Example/

Watch:

• https://www.youtube.com/watch?v=sP7ANcTpJr8
• https://www.youtube.com/watch?v=5LrDIWkK_Bc

useCallback

Read:

• https://www.geeksforgeeks.org/react-js-usecallback-hook/
• https://dmitripavlutin.com/dont-overuse-react-usecallback/

Watch:

• https://www.youtube.com/watch?v=_AyFP5s69N4
• https://www.youtube.com/watch?v=-Ls48dd-vJE

useCallback vs useMemo

Read:

• https://kentcdodds.com/blog/usememo-and-usecallback/

Watch:

• https://www.youtube.com/watch?v=uojLJFt9SzY

Projects:

• https://github.com/alperg/react-usecontext
• https://github.com/iamshaunjp/react-context-hooks/tree/lesson-3/contextapp
• https://github.com/academind/react-complete-guide-code/tree/10-side-effects-reducers-context-api

Rules of Hooks

• https://reactjs.org/docs/hooks-rules.html

Custom Hook function

• https://www.freecodecamp.org/news/how-to-create-react-hooks/

TypeScript

Read:

• https://www.typescriptlang.org/docs/
• https://www.tutorialspoint.com/typescript/index.htm

Watch:

• https://www.youtube.com/watch?v=NjN00cM18Z4
• https://www.youtube.com/watch?v=WBPrJSw7yQA

Redux

Read:

• React Redux Quick Start
• React Redux — javatpoint
• Using Redux and Context API.
• Redux vs React’s Context API

Watch:

• React Redux (with Hooks) Crash Course — 2021
• React Redux Tutorials — 1 — Introduction

Topic Wise

Introduction to One Store:

• https://www.jstor.org/stable/2632826

Provider Component

• https://react-redux.js.org/api/provider

Actions

• Redux — Actions.

Reducers

• https://www.pluralsight.com/guides/how-to-write-redux-reduce

Sagas

• https://redux-saga.js.org/docs/introduction/BeginnerTutorial/

Dispatchers

• https://react-redux.js.org/using-react-redux/connect-mapdispatch

View Controllers

• https://blog.andrewray.me/the-reactjs-controller-view-pattern/#:~:text=Not%20to%20be%20confused%20with,%2F%3E%20in%20the%20render%20function.

Selector:

• https://redux.js.org/usage/deriving-data-selectors

Apollo client:

Read:

• https://www.apollographql.com/docs/react/get-started/
• https://www.apollographql.com/docs/

Watch:

• https://www.youtube.com/watch?v=YyUWW04HwKY

Unit Testing Component

Jasmine

Read

• https://egghead.io/lessons/react-unit-testing-a-react-component-using-jasmine-and-webpack
• https://styleguide.pivotal.io/guides/unit-testing-with-jasmine/

Watch:

• https://www.youtube.com/watch?v=4UQ1beAJL7o
• https://www.youtube.com/watch?v=rw4KlxKEENQ

React test utilities

Read:

• https://reactjs.org/docs/test-utils.html
• https://github.com/testing-library/react-testing-library

Watch:

• https://www.youtube.com/watch?v=EaFovv7wELY

Performance optimizations

PureRender Mixin

• https://reactjs.org/docs/pure-render-mixin.html
• https://subscription.packtpub.com/book/web_development/9781785289644/8/ch08lvl1sec67/purerendermixin

Expensive DOM manipulations:

• https://www.pluralsight.com/guides/virtual-dom-explained
• https://www.youtube.com/watch?v=8YNeCyQtPo0

Performance tools

• https://reactjs.org/docs/perf.html
• https://reactjs.org/docs/optimizing-performance.html

React UI Frameworks:

Material UI

Read:

• How to Implement Material-UI in React | Engineering Education (EngEd) Program
• Learn Material-UI

Watch:

• Material UI Tutorial #1 — Intro & Setup
• Material UI React Tutorial

React Bootstrap

Read:

• React-Bootstrap · React-Bootstrap Documentation
• React Bootstrap — javatpoint

Watch:

• https://www.youtube.com/watch?v=8pKjULHzs0s

Atomize

Read:

• Atomize React: Design System for React JS
• Atomize : Simple Design System for React — DEV Community

Watch:

• Atomize React

Ant Design

Read:-

• Getting Started
• Use in create-react-app

Watch:

• Tutorial 1 : Ant Design and React JS : Learn how to create a Dashboard layout
• Ant Design — The World’s 2nd Most Popular React UI Library

React Projects

Simple Todo list app

• How To Build a React To-Do App with React Hooks

Social Media App

• https://github.com/dch133/Social-Media-App

Weather App

• How to Build a Weather Application with React and React Hooks

Entertainment App

• Jaff1/kodflix: JafFlix — Entertainment App, built using React.js

Simple Calculator

• ahfarmer/calculator: Simple calculator built with React

React TikTok clone app:

• 🔴 Let’s Build a Tik Tok Clone with REACT JS for Beginners

Amazon Clone:

• Crio Projects — Amazon clone using React

Resume generator

• Crio Projects — Resume Builder Web Application

Food ordering app

• Food delivery App

Gatsby

Read:

• https://www.gatsbyjs.com/docs/tutorial/
• https://developer.okta.com/blog/2020/02/18/gatsby-react-netlify#:~:text=Gatsby%20is%20a%20tool%20for,static%20files%20for%20your%20website.
• https://www.gatsbyjs.com/docs/conceptual/building-with-components/

Watch:

• https://www.youtube.com/watch?v=8t0vNu2fCCM
• https://www.youtube.com/watch?v=GuvAMcsoreI

Next.js

Read:

• nextjs.org Create a Next.js App | Learn Next.js
• Getting Started
• https://www.freecodecamp.org/news/an-introduction-to-next-js-for-everyone-507d2d90ab5 4/

Watch:

• Next.js Crash Course 2021
• Next.js Tutorial — 1 — Introduction

React Native:

Read:

• Introduction · React Native
• React Native Tutorial

Watch:

• React Native Tutorial #1 — Introduction
• Full React Native Project Tutorial for beginners.
• React Native Crash Course 2020