Learn React.js, JSX, Components, Props, State, React Router and much more from scratch and master Modern Reactjs
What you will learn
Get Introduced to React JS.
Learn about rendering elements in React.
Learn about the concept of Components and Props in React.
Learn different topics such state and Lifecyle in React.
Apply event handlers concept using example in React.
Implement Conditional Rendering in React using examples.
Learn about lists and keys, React forms, Fragments in React.
Look at the difference between Inheritance and Composition.
Learn and apply Pure components using examples in React.
Description
Welcome to the best online course on JavaScript.
React.js is an open-source JavaScript library. Used for building user interfaces specifically for single-page applications.
Allows us to create reusable UI components. React brings many advantages to the table, making it a better choice than other frameworks.
This course provides you with knowledge on the advanced level used by Web developers.
In this course, you will cover:
- Introduction to React JS.
- Introduction of JSX.
- Learn about the Components of React.js.
- Learn about the Props in React.js.
- Learn about the State and Lifecycle.
- Learn how to apply Event Handlers in React.
- Learn about the topic – Conditional Rendering in React.js
- Learn about the Lists and Keys in React.
- Learn to create Forms in React.
- Introduction to React CSS.
- Apply Fragments in React.
- Difference between Inheritance vs Composition.
- Learn what is pure components?
- Learn about the concept of Memo in React.
- Introduction to Forwarding Refs in React.
- Learn about Portals in React.
- Introduction to Error Boundary in React.
- Introduction to Higher Order Component in React.
- Introduction to Render props in React.
- Introduction to Context in React.
- Introduction to HTTP in React.
- Introduction to React-Router in React.
Not only this, you will get to practice a lot of exercises on these topics.
We are also providing quizzes.
You will also have access to all the resources used in this course.
Enroll now and make the best use of this course.
English
language
Content
Introduction
React Introduction
React Versions
React Features
Prons and Cons of React
React Installation
INTRODUCTION of JSX
Introduction of Jsx
Why jsx?
Embedding expressions in jsx
Comments and Inline style in jsx
Rendering Elements
Components
What is React Components?
Class Components
Functional Components
Render a Component
React Props
Introduction to React Props
React state
Difference between React State vs Props
Default props
Props validating
Destructuring props and state
Setstate()
State and Lifecycle
Life cycle methods
Mounting
Updating
Unmounting
Event Handlers
What are Event Handlers in react?
Binding Event Handlers
Binding in render method
Arrow function in render method
Arrow function in class component
Binding in class constructor
Call an inline function in an onClick event handler
Call multiple functions in an onClick event handler
Conditional Rendering
React Conditional Rendering
If else statement
Element variable
Ternary Conditional Operator
Short Circuit Operator
Lists and Keys
Map() function
Rendering List in react
Rendering list of objects
List and Keys in react
Why we need keys
Index as key anti-pattern
When to use index as key
Forms
Controlled Component
Input form elements
Textarea Tag
Select tag
Submit a form
Handle multiple inputs form in react
React CSS
Introduction to styling
Inline styling
Regular CSS styling
CSS Modulers
Styled Component
Fragments
What is React Fragments?
Why do we use React fragments
Key attributes when rendering a list of items
Inheritance vs Composition
Inheritance vs composition in react
Composition in react js
Pure Components
What is Pure Component?
Regular component vs pure component
What is a Shallow Comparison?
What is react memo?
Refs
What is ref ?
Fetch input values using ref
Callback ref
Ref in class component
Forwarding Refs
What is forwarding refs?
Forwarding Ref technique
Portals
What is react portals?
Why do we need portal
Use case scenario
Event bubbling in react portal
Error Boundary
What is error boundary?
staticgetderivedfromerror()
componentdidcatch()
Higher Order Components
Click counter example
why hoc
What is hoc?
HOC pattern in click counter and hover counter
Counter functionality shared between components
Summary of HOC
Passing down props and parameter in hoc
Render Props
Why do we need render prop
Render prop pattern
What is render prop
Summary of render prop
Context
Why do we need context API
How to implement context api
Default value to context api
HTTP
Introduction of http
How to make get() request using axios
Render the fetch data in a component
How to post the data
How to post the object
React Router
What is react-router
How react-router works
Components of react-router