React Developer
Course Description
React is a JavaScript library for building user interfaces. It was originated by Facebook and is maintained by a a community of individual developers and companies. React can be used as a base in the development of component based web sites and single-page applications. React depends on plugins and libraries for certain features that are a core part of other frameworks. This course will cover plugins for routing (React Router), ajax calls (React Query) and state management (Redux) as well as the core React functionality. This course will highlight the current features in React and highlight the things that have changed. React has evolved quite considerably over the years and some tutorials that you can find on the internet are out of date even if they are only a few years old.
Duration: 5 days
Prerequisites
Understanding of HTML, CSS and JavaScript. This is a beginners course and no experience of React, Angular or Vue is expected.
Introduction
Using Components for Web Application Development - React, Angular & Vue History of React The node.js ecosystem Setting up a development environment
JavaScript ES6 Features
let and const Destructuring The Spread operator Optional chaining (?.) Arrow functions Understanding map operations Types of imports
React Core features
React Hello World React Components Rendering a component Introduction to JSX
React Components
Class Components Functional Components JSX syntax Fragments Props Events Understanding how components are rendered and re-rendered Styling components Conditional rendering Rendering a list Higher order components
React Hooks
What is a "React Hook"? useState; useEffect; useCallback; useMemo
React Forms
Binding to form elements Event handling Validation Understanding state - state management Custom validation
React Router
Single Page Applications
Adding react router to the project
Configuring react router
Query strings and url parameters
React Query
Understanding Ajax A brief history of Ajax calls in React React-Query Create an api using json-server Make an ajax call Loading animation Full Crud example
Authentication
Authentication and Authorization Using OAuth with React Adding Authentication to React Add a Login button Add a Logout button View logged in user profile Create higher order component to apply authentication
Advanced Styling
What are "Styled Components"? Using Bootstrap Material UI Library
Advanced State Management
Understanding State The useState hook What is "prop-drilling"? The useContect hook Introducing Redux Reducers
React Best Practices
Thinking in React Some React anti-patterns Understanding Virtual DOM Component lifecycle Integrating with other libraries
Deploying Your React App
Build your app Upload to firebase Apply a custom domain