React — Proof of Concept

In this repository, I've implemented (or implementing) all the concepts related to React and its related technologies (like Redux, Context API & GraphQL). Please feel free to go through this repository for your own learning/revision as I'll be doing the same if I ever need to revise/reinforce my knowledge on React (or it's related technologies).

Resources

• ReactJS Docs
• MOOC by Andrei Neagoie & Yihua Zhang
• MOOC by Academind, taught by Maximilian Schwarzmüller

Child Repositories & Deployments

• Monsters Rolodex: GitHub Repo & Live Deployment
• Build My Burger: GitHub Repo & Live Deployment

Table of Contents

React Basics [Making Monsters Rolodex Project] ⚛ + 👹

1. How to use create-react-app to initialize a react project: Tutorial here | Files that are added after first init
2. First Change in the React App: Changes Made
3. Class Components, Initializing State in constructor() & Using setState() on an HTML Element in JSX: Changes Made
4. Rendering a list of items in react using key prop: Changes Made
5. props, props.children, functional components, making new components & usage of componentDidMount() life-cycle method: Changes Made
6. Sending state from one component to another, component nesting & reason why we use components: Changes Made
7. Handling DOM Events in JSX, Getting Data from User Input & setState()'s asynchronous behaviour: Changes Made
8. Dynamic rendering of components due to setState() and render() methods: Changes Made
9. Difference between .js and .jsx files, functional v. class components & destructuring props object as a parameter in a functional component: Changes Made
10. Writing our own methods inside the App component & why are life-cycle defined normally like a function and not as an arrow function: Changes Made
11. Deploying a static app on GitHub Pages & Finishing Touches: Deploying Static Websites to GitHub Pages, Changes Made & Monsters Rolodex App Live Here

React Core Concepts ⚛❓

1. What does create-react-app command actually does? An in-depth understanding of React & ReactDOM: Commit Changes Here & Basic File Structure for React Apps
2. Wrapping all the basics in one example — props, props.children, setState(), state, React.Component, event-handling, etc: Commit Changes
3. Using the useState() Hook for State Manipulation: Commit Changes
4. Passing Method References b/w Components: Commit Changes
5. Adding Two Way Binding: Commit Details
6. Styling Components - Inline Styling using JSX & Importing External Style Scripts: Commit Details
7. Overall wrap-up of all the basics: Assignment Solution in Javascript & Assignment Solution in Typescript

Working with Lists & Conditionals 📜

1. Rendering Content Conditionally
   1. Using the ternary operator: Commit Details
   2. Using control flow if-else [recommended way]: Commit Details
2. Outputting Components in a List using map(): Commit Details
3. Affecting state from a generated List of Components
   1. Updating State Directly (flawed approach, can lead to unknown behaviour of the apps): Commit Details
   2. Updating State Immutably (correction to the flawed approach) using splice() or ... [Spread Operator]: Commit Details
4. Lists & Keys
   1. Usage of key prop: Commit Details
   2. Making Lists Flexible w. <input> element inside the component: Commit Details
5. Section wrap-up & Assignment: My Solution in JavaScript, Instructor's Solution in Javascript & My Solution in TypeScript (Use App)

Styling React Components & Elements 🩰🎀👚

1. Setting Styles Dynamically: Commit Details
2. Setting Class Names Dynamically: Commit Details
3. Adding & Using Radium — npm i --save radium
   1. Implementing pseudo-classes like :hover: Commit Details
   2. Implementing Media Queries @media using {StyleRoot} from 'radium': Commit Details
4. Adding & Using Styled Component — npm i --save styled-components 💄
   1. Styling components using Tagged Templates with styled-components library: Commit Details
   2. How styled-components library generates the CSS required for the respective component: Commit Details
   3. Dynamic styling with props inside a tagged template string: Commit Details & Do the same in TypeScript
5. Working with CSS Modules
   1. Why do we need CSS Modules? Commit Details
   2. Using CSS Modules: SETTINGS_README.md & Commit Details
   3. Media Queries using CSS Modules: Commit Details
6. Using ErrorBoundaries if an Error occurs in the react app, using componentDidCatch(err, info) method: Commit Details 🚫✅

Deep Dive Into Components & React Internals 🏊🏾‍♂️⚛

1. A Better Project Directory Structure: Commit Details
2. Splitting an App into Components for cleaner structure/readability: Commit Details
3. Sending props to <App/> component: Commit Details
4. Component Creation Lifecycle in Action: Commit Details
5. Component Update Lifecycle
   1. When props change: Commit Details
   2. When state changes: Commit Details
6. useEffect() and its uses
   1. Usage inside a functional component: Commit Details
   2. Controlling the Behaviour of useEffect(): Commit Details
7. Lifecycle Methods for Cleanup Work in class-based components using componentWillUnmount() & in functional components using useEffect(): Commit Details
8. Optimization in React
   1. Using Lifecycle Method - shouldComponentUpdate(): Commit Details
   2. Using React.memo() for optimizing functional components: Commit Details
   3. Checking all the props info using shouldComponentUpdate: Commit Details
   4. Extending PureComponent instead of defining shouldComponentUpdate() to check all the props manually: Commit Details
9. Rendering Adjacent JSX Elements
   1. Using JS Arrays/Lists: Commit Details
   2. Using a HOC (like say, <Auxiliary /> component): Commit Details
   3. Using a built-in HOC for wrapping/rendering JSX elements — <React.Fragment>: Commit Details
10. Higher Order Components (HOC)
    1. Introduction to HOC: Commit Details
    2. Another form of HOC using Closure: Commit Details
    3. Passing Unknown props to HOC's using Closure: Commit Details
11. Setting State Correctly using setState((prevState, props) => ({...prevState, }));: Commit Details
12. Using PropTypes — npm i --save prop-types: Commit Details
13. Refs in React
    1. Why Refs? Introduction & Usage of Refs in class-based components (before React v16.3): Commit Details
    2. Usage of Refs in class-based components (after React v16.3) using React.createRef(): Commit Details
    3. Refs in functional components using useRef() hook: Commit Details
14. Context API in React
    1. Problems with prop chaining — Why use the concept of Context? Commit Details
    2. Using the Context API using React.createContext(): Commit Details
    3. Alternative way of using Context API in class-based components using contextType & Using functional components in functional components using useContext() hook: Commit Details

Reaching out to the Web (HTTP/AJAX) 🔁

Required Dependency: npm i --save axios | axios DOCS | API Endpoints: /posts, /posts/user_id

1. Creating an HTTP Request to GET Data using axios.get(url) method: Commit Details
2. Rendering Fetched Data to the View: Commit Details
3. Transforming the Fetched Data to Limit the Components on the View: Commit Details
4. Making a Post Selectable: Commit Details
5. Fetching Data on Update (w/o Creating Infinite Loops) in componentDidUpdate() lifecycle method: Commit Details
6. POSTing Data to the Server using axios.post(url, data, dataConfig) method: Commit Details
7. Sending a DELETE Request using axios.delete(url) method: Commit Details
8. Handling Errors Locally using .catch(err) method: Commit Details
9. Adding Interceptors using axios.interceptors to Execute Code Globally: Commit Details
10. Setting a Default Global Configuration for Axios using axios.defaults: Commit Details
11. Creating and Using Axios Instance using axios.create() method: Commit Details

Single Page Applications with Routing — react-router 🔀

1. Setting Up Route Links in <Blog /> Component: Commit Details
2. Setting Up The Router Package npm i --save react-router react-router-dom: Commit Details
3. Preparing the Project for Routing — Making <NewPost />, <FullPost /> & <Posts /> Components as a Container for Proper Routing: Commit Details
4. Setting Up and Rendering Routes using path, exact & render attributes inside the <Route /> Component: Commit Details
5. Rendering Components for Routes using render and component prop inside the <Route /> Component: Commit Details
6. Switching between Pages using Links
   1. Inefficient Way to Re-route — Entire Page Reloads using <a href="/">Home</a> Component: Commit Details
   2. Efficient Way to Re-route — The Page Doesn't Reload using <Link to="/">Home</Link> Component: Commit Details
7. Using the Props (Routing Info) Sent to the Components Rendered from the <Route /> Component: Commit Details
8. The withRouter() HOC & Route Props: Commit Details
9. Absolute vs. Relative Paths: Commit Details
10. Styling the Active Route using <NavLink to="<route>" exact activeClassName="<class-name>" activeStyle={<style-object>}/> Component: Commit Details
11. Detecting Dynamic Routes using <Route to="/:id" /> & Passing Route Parameters: Commit Details
12. Extracting Route Parameters using this.props.match.params: Commit Details
13. Using Unique Route Names to Load a Single Route: Commit Details
14. Using <Switch /> to Load a Single Route at a time: Commit Details
15. Navigating to Specified Routes Programmatically, using this.props.history.push() method, instead of using the <Link /> Component: Commit Details
16. Understanding Nested Routes
    1. Introduction & Usage: Commit Details
    2. Naming Routes Logically & Relative URLs in Nested Routes using this.props.match.url: Commit Details
    3. Creating Dynamic Nested Routes by Defining Proper Lifecycle Methods: Commit Details
17. Redirecting Requests
    1. Redirecting using the <Route /> Component (Not Recommended): Commit Details
    2. Redirecting using the <Redirect from="<route-name>" to="<route-name>" /> Component inside a <Switch /> Component (Recommended): Commit Details
    3. Conditional Redirects using <Redirect to="<route-name>"/> Component: Commit Details
    4. Using this.props.history.push()/replace() to Redirect: Commit Details
    5. Working with Navigation Guards: Commit Details
    6. Handling the 404 Not Found Case using pathless <Route />: Commit Details
    7. Lazy Loading / Code Splitting 😴 — 💥Important💥
       1. Loading Routes Lazily Using Asynchronous Dynamic import() method inside our own custom-made HOC: Commit Details
       2. Lazy Loading Components Asynchronously with React.lazy() method & <React.Suspense fallback={<div>Loading...</div>} /> Component: Commit Details
       3. Resolving Errors in <NewPost /> Due to Lazy Loading — Wrapping <NewPost /> with withRouter() HOC: Commit Details
    8. Setting a basename prop for the <BrowserRouter /> Component for Proper Routing & Server Deployment: Commit Details
18. Assignment Solution: My Solution @CodeSandBox, Instructor's Solution @CodeSandBox — v1

State Management Using Redux (Basic Concepts) ♻⚛

Dependency Installations: npm i --save redux | npm i --save react-redux

1. Understanding the Redux Flow 🌊: Read @CodeSandBox | Image - Direct Link
2. State Management With Redux Using Pure JS on Node Runtime — node <file-name>.js
   1. Setting Up Reducer & Store: Commit Details
   2. Dispatching Actions & Adding Logic for Actions in Reducer: Commit Details
   3. Adding Subscriptions: Commit Details
3. Integrating Redux into React ⚛🔌♻
   1. Setting Up Redux Before Connecting to React: Commit Details
   2. Connecting Redux STORE to React using <Provider /> Component: Commit Details
   3. Dispatching ACTIONs from within a React Component: Commit Details | Assignment Solution @CodeSandBox | Commit Details for Assignment
4. Handling Redux STORE
   1. Updating State Immutably: Commit Details
   2. Updating Arrays in the State Immutably: Commit Details
5. Outsourcing ACTION Types: Commit Details
6. Combining Multiple REDUCERS: Commit Details
7. Redux Basics Assignment: Solution @CodeSandBox & Commit Details
8. Combining Local UI state & Redux STORE: Commit Details

State Management Using Redux (Advanced Concepts) ♻⚛

1. What is MIDDLEWARE && Adding Middleware In Practice using applyMiddleware() function: Read @CodeSandBox & Commit Details
2. Using the Redux DevTools: Setting Up Redux STORE for Redux DevTools & Commit Details
3. Introduction & Usage of ACTION Creators: Commit Details
4. Handling Asynchronous Code using redux-thunk — npm i --save redux-thunk: Commit Details
5. Restructuring ACTIONS: Commit Details
6. Where to Put Data Transforming Logic? Commit Details
7. Using ACTION Creators & getState(): Commit Details
8. Using Utility Functions
   1. Inside the Counter REDUCER: Commit Details
   2. Inside the Results REDUCER: Commit Details
9. A Leaner Switch Case Statement: Commit Details

Working With Webpack 📦☑

1. How Webpack Works: Commit Details
2. Basic Webpack Workflow Requirements: Commit Details
3. Webpack Project Setup using npm — npm i --save-dev webpack webpack-dev-server: Commit Details