React (beginner to guru)

Uplatz offers comprehensive training on React. This is online video-based training course. You will be awarded Course Completion Certificate at the end of the course.

React is a popular JavaScript library for building user interfaces, particularly single-page applications where updates to the UI need to be fast and responsive. Developed and maintained by Facebook, it allows developers to create reusable UI components, which can then be combined to build complex user interfaces.

React simplifies the process of building complex UIs by breaking them down into smaller, reusable components. It optimizes updates to the user interface using a virtual DOM and encourages a declarative approach to UI development, where developers describe what the UI should look like for a given state, and React takes care of updating the DOM to match.

React Features

1. Components:

   • The core building blocks of React applications.
   • A component is essentially a JavaScript function or class that can accept inputs (called "props") and returns React elements (which describe what should appear on the screen).
   • Components can be stateful (maintain internal data/state) or stateless (purely presentational).

2. JSX (JavaScript XML):

   • A syntax extension for JavaScript that looks similar to HTML.
   • JSX allows developers to write markup directly within JavaScript, making it easier to visualize and build the UI structure.
   • Example of JSX: <div>Hello, world!</div>

3. State:

   • An object that determines how a component renders and behaves.
   • Unlike props, which are passed to the component from the parent, state is managed within the component itself.
   • State changes trigger re-rendering of the component, reflecting updated data in the UI.

4. Props (Properties):

   • Short for properties, props are inputs to components.
   • They are read-only, meaning a component cannot change its own props but can use them to render content.

5. Virtual DOM:

   • React maintains a virtual representation of the DOM (Document Object Model) in memory.
   • When the state of a component changes, React updates the Virtual DOM first.
   • It then compares the updated Virtual DOM with the previous version (a process called "reconciliation") and calculates the most efficient way to update the real DOM to match.
   • This makes updates faster and minimizes direct manipulation of the real DOM.

How React works

1. Component Rendering:

   • When a React component is first rendered, it generates a virtual representation of the DOM (using JSX).
   • This virtual DOM is a lightweight copy of the real DOM elements.

2. State and Prop Changes:

   • When a component’s state or props change, React re-renders the component.
   • It creates an updated virtual DOM to reflect these changes.

3. Reconciliation:

   • React compares the updated virtual DOM with the previous one.
   • It identifies the minimal number of changes needed to update the real DOM, reducing the number of expensive DOM manipulations.

4. Updating the Real DOM:

   • After determining the necessary changes, React updates the real DOM to reflect the new state of the UI.
   • This process is efficient and leads to fast, responsive user interfaces.

5. Lifecycle Methods (for Class Components):

   • In class-based components, React provides lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.
   • These methods allow developers to hook into different stages of a component’s life (mounting, updating, unmounting).

React Ecosystem

React is often used with other libraries and frameworks to build a complete application:

• React Router: For handling navigation and routing in single-page applications.
• Redux: For managing the global state of an application in a predictable way.
• React Native: For building mobile applications using React.

Reed courses certificate of completion

Digital certificate - Included

Uplatz Certificate of Completion

Digital certificate - Included

• React (beginner to guru) - all lectures 10:08:13

  • 1: Introduction to ReactJS Preview 08:04
  • 2: React Fundamentals 59:43
  • 3: React useState hook 21:28
  • 4: More about useState hook 42:52
  • 5: Change Parent State using Child Component 39:45
  • 6: React useEffect hook and Debouncing 54:21
  • 7: React useRef hook 17:00
  • 8: Overlay with useState, useEffect, useRef 20:01
  • 9: React useContext API 15:35
  • 10: React Styles Preview 32:15
  • 11: Task Manager Project with Tailwind CSS Library 50:03
  • 12: React Router 26:29
  • 13: React useReducer hook 23:38
  • 14: React Redux 26:24
  • 15: Context API vs Redux 16:38
  • 16: Authentication using Redux 21:43
  • 17: React Optimization 27:16
  • 18: React, Axios, Tailwind Project 16:21
  • 19: React Deployment 10:16
  • 20: React Query 34:30
  • 21: TypeScript 17:48
  • 22: React with TypeScript 20:44
  • 23: React Job Interview Questions 05:19

React (beginner to guru) - Course Syllabus

Lecture 1

Introduction to ReactJS

Introduction of ReactJS. Why React JS is worth to learn. What are Node.js and Vite

Lecture 2

React Fundamentals

Fundamentals of ReactJS. Installation of Node.js and Visual Studio Code along with various extensions. Setting up development environment.

Lecture 3

React useState hook

Fundamentals of React useState hook. How useState hook gives reactivitities to React app using differnt eamples.

Lecture 4

More about useState hook

More about React useState hook. Examples showing how form controls use useState hook for formBinding.

Lecture 5

Change parent state using child component

Change parent component's state from child component's event. This is important because React js data flow is always top to bottom components.

Lecture 6

React useEffect hook and Debouncing

React useEffect hook to capture side effects. One of its usage is debouncing. Trhrough debouncing we can optimize the performance of our React JS app.

Lecture 7

React useRef hook

React useRef hook fundamentals. Different uses of useRef hook.

Lecture 8

Overlay with useState, useEfffect, useRef

React overlay example with useState, useEfffect, useRef. It shows how to dialog modal window using React JS.

Lecture 9

React useContext API

React useContext hook API. It shows how to use global states with React along with Example.

Lecture 10

React Styles

React Styles using different ways. It shows how to use React Styles in different ways.

Lecture 11

Task manager project with Tailwind CSS library

Medium sized Task manager project. It uses Tailwind CSS library for styling. It also shows how to save data in temporary browse storage and get it.

Lecture 12

React router

React router fundamentals. This is very useful for SEO implementation in React apps.

Lecture 13

React useReducer hook

Fundamentals of useReducer hook. An example with useReducer hook along with tailwind library.

Lecture 14

React Redux

Fundamentals of React Redux. Example to show how to use React Redux.

Lecture 15

Context API vs Redux

Comparison between Context API and Redux. Where we should use Context API and where we should use Redux.

Lecture 16

Authentication using Redux

Authentication of user using React Redux. This is an advanced topic along with a small project.

Lecture 17

React Optimization

How to optimize React apps. Different methods are discussed. There are examples for lazy loading images also.

Lecture 18

React, Axios, Tailwind Project

React, Axios, Tailwind Project. Here we learned Axios library.

Lecture 19

Deployment

React app deployment. Discussion with various app deployment.

Lecture 20

React Query

React Query is a JavaScript library designed to simplify the complex task of data fetching and caching in React applications. It offers a set of hooks and utilities that enable you to manage data from various sources, including REST APIs, GraphQL, or even local state, effortlessly.

Lecture 21

TypeScript

Fundamentals of TypeScript. How it's better to use TypeScript than using JavaScript.

Lecture 22

React with TypeScript

Fundamentals of React using TypeScript. This is similar to React with JavaScript. But there are minor differences in it.

Lecture 23

Job Interview Questions

Here are some common Job Interview Questions. Please search the answers by yourself from the net.

Everyone

Passion and determination to achieve your goals!

• Front-End Developer
• React Developer
• Web Developer
• JavaScript Developer
• Full-Stack Developer
• UI Developer
• UX Developer
• Mobile App Developer (with React Native)
• Software Engineer
• Front-End Engineer
• Lead React Developer
• React Architect
• Solutions Architect
• Director of Front-End Engineering
• Chief Technical Officer (CTO)
• Freelance/Remote React Developer
• Software Developer
• Programmer
• Cloud Engineer

Currently there are no Q&As for this course. Be the first to ask a question.