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
Props
Read
- ReactJS Fundamental — Props & State Simplified | by InfinityPaul
- Components and Props — React
- Render Props — React
- ReactJS Props Validation — javatpoint
Watch
Mixins
Read
- React Tutorial => Mixins
- Replacing Mixins in React. If you want to run the code, here’s a… | by Aristides Staffieri
Watch:
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:
Reconciliation algorithm
Read
- Reconciliation — React
- https://medium.com/@coolram2104/digging-deeper-inside-the-reconciliation-algorithm-of-react-f0d428ba4ae9
Watch:
State
Read
Watch
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:
Navigation
Read:
Watch:
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:
Resources
Constructor
Component composition:
Read:
- Thinking in React: Component Composition — DEV Community
- Composition vs Inheritance — React
- Component Composition in React
Watch:
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:
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:
CSS Modules
Read:
Watch:
LESS/SASS
Read:
- Sass vs. Less
- SASS vs LESS vs SCSS — That are the differences — IONOS
- Differences Between Sass and LESS Preprocessors
Watch:
HTTP
Read:
- Making http request in React.js
- How to send HTTP Requests in React
- React + Fetch — HTTP POST Request Examples
Watch:
Source code:
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:
Refs
Read:
Watch:
Error Boundaries
Read:
- Error Boundaries — React
- Error Handling in React 16 — React Blog
- Use react-error-boundary to handle errors in React
Watch:
Portal
Read:
- https://www.jayfreestone.com/writing/react-portals-with-hooks/
- https://blog.bitsrc.io/understanding-react-portals-ab79827732c7
Watch:
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:
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:
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:
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:
Project
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:
useCallback
Read:
- https://www.geeksforgeeks.org/react-js-usecallback-hook/
- https://dmitripavlutin.com/dont-overuse-react-usecallback/
Watch:
useCallback vs useMemo
Read:
Watch:
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
Custom Hook function
TypeScript
Read:
Watch:
Redux
Read:
- React Redux Quick Start
- React Redux — javatpoint
- Using Redux and Context API.
- Redux vs React’s Context API
Watch:
Topic Wise
Introduction to One Store:
Provider Component
Actions
Reducers
Sagas
Dispatchers
View Controllers
Selector:
Apollo client:
Read:
Watch:
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:
React test utilities
Read:
Watch:
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:
Performance tools
React UI Frameworks:
Material UI
Read:
Watch:
React Bootstrap
Read:
Watch:
Atomize
Read:
Watch:
Ant Design
Read:-
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
Social Media App
Weather App
Entertainment App
Simple Calculator
React TikTok clone app:
Amazon Clone:
Resume generator
Food ordering 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:
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:
React Native:
Read:
Watch: