Image
Complete Modern React Course
  • 4 Months
  • 10
  • N/A
  • Basic understanding of HTML, CSS, and JavaScript
  • And finally the thirst to learn and dedication
  • Learn to build fast, user-friendly, and dynamic web apps using React
  • Learn modern React concepts such as hooks and master the principles of state management
  • Learn how to make reusable components, Higher-Order Components (HOC), and Code Optimization
  • Stunning projects that fit perfectly for your portfolio

React is by far the most popular JavaScript frontend library for building user interfaces in Single Page Applications (SPAs). React allows creation of large web applications capable of changing the data without page reloading. The main purpose of React is to be fast, scalable, and simple.

This course is a comprehensive hands on guide to learning and moving on to building practical web applications. This course covers all the modern topics such as hooks, context APIs and also concentrates on code optimization to allow you to become an industry ready React developer.

  1. Getting Started
    • Course Outline
    • Environmental Setup: Windows/Linux
    • VSCode Setup
    • Github: Basics and Setup
  2. React
    • Introduction to React
    • Single Page Applications (SPAs)
    • React as a Library
    • Introducing JSX
    • Components
    • Dynamic Values
    • Styling: Inline and Basic CSS
    • Event handling: onClick and onChange events
    • Handling State: The “useState” hook
    • Working With Multiple States
    • Rendering List
    • Conditional Rendering
    • Props
    • Passing Functions as Props
    • Reusing Components
    • The “useEffect” hook: Basics
    • The “useEffect” hook: Dependency array
    • Routing
  3. API Calls
    • What are APIs?
    • API calls in “useEffect”
    • Introducing Axios
    • Making GET, POST, PUT, and DELETE requests
    • Error Handling
    • Adding Loaders during API Calls
    • Creating a Custom “useFetch” Hook
  4. State Management using Context API
    • Introducing Centralized State Management
    • When do we need Central State
    • The “useContext” Hook
    • The “useReducer” Hook
  5. Optimization
    • Memoization: The “useCallback” Hook
    • Memoization: The “useMemo” Hook
    • “useMemo” vs React.memo
  6. Projects
    • Project Management System
    • Covid-19 Tracker
  7. What’s Next
    • Create your web developer CV
    • Next steps in the learning curve
    • Coding Challenge
    • Apply for internship/placement