Web Development Using React JS

Changing lives, businesses, and nations through talent transformation in digital technologies.

  • Rakibul Thumbnail
    Course Language Hindi & English
  • Duration 3-4 Months
  • Review
    (4.5)
Line Shape Image
Line Shape Image

Short Overview

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies

  • Introduction to HTML
  • History of HTML
  • Components of HTML
  • Structure of HTML
  • Body section
  • Categories of Tag in Body Section
  • How to display images

  • Creating List
  • Ordered List
  • Unordered List
  • Definition List

  • How to work with background?
  • How to print special characters?

  • Creating Tables in HTML
  • Attributes of Table
  • Generating Irregular Tables

  • How to work with forms?
  • How to work input controls?
  • Using <select> Tag
  • Generating Drop Down List
  • Generating Scrollable List
  • How to work text area?

  • Introduction to HTML 5
  • Improvements Given by HTML 5
  • Web Forms 2.0
  • New Input Elements
  • New Form Attributes
  • DataList Tag
  • Playing Audio
  • Controlling Audio
  • Playing Video

  • Introduction to CSS
  • Advantages of CSS
  • Versions of CSS
  • Versions of CSS
  • Types of CSS
  • CSS Selectors
  • Project
  • Inheritance in CSS
  • CSS Units
  • Absolute v/s Relative Units
  • Styling Background using CSS
  • Handling Font in CSS
  • Various Font Properties
  • What are Google Fonts
  • How to use Google Fonts
  • Project
  • Handling Text in CSS
  • Various Text Properties
  • Removing Underline from Links
  • Handling Link in CSS
  • Pseudo-Classes
  • Making Links Look Like Button
  • Styling Lists in CSS
  • Making Nav Bar Using List
  • Styling Tables in CSS
  • Styling Table Border
  • Creating Zebra Striped Tables
  • Making Tables Responsive
  • Project
  • The <div> and <span> Tags
  • The Difference
  • Introduction to semantic HTML
  • Popular Semantic HTML Tags
  • The CSS Box Model
  • Border, Padding and Margin
  • Handling Overflow
  • Setting Element Pos using Float
  • The Visibility Property
  • The Display Property
  • Positioning in CSS
  • Various Types of Positioning in CSS
  • Other properties used with Positioning
  • Styling form in CSS
  • Attribute Selectors
  • Styling Controls

  • What is JavaScript?
  • Who runs our JavaScript code?
  • Relationship with HTML and CSS
  • What JavaScript can do in Browser?
  • What JavaScript can't do?
  • Java v/s JavaScript
  • History of JavaScript

  • JavaScript Embedding
  • Writing to the document
  • Using Browser Console
  • Comments in JavaScript

  • Declaring variables in JavaScript
  • Data Types
  • Primitive Data Types and Non-Primitive Data Types
  • Difference between null and undefined
  • Var v/s let

  • Types of Dialog Box
  • Accepting Numeric input through Dialog box
  • Using Template String

  • Types of Operators
  • Type Conversion & Type Coercion
  • Standard rules of Number Conversion
  • Controlling Decimal Points

  • If
  • If else
  • If else if else
  • Nested if
  • Ternary Operator
  • Switch

  • While loop
  • Do while loop
  • For loop
  • For/of loop
  • For/in loop

  • Array Definition
  • Creating Array
  • Using Loop with array
  • Array with mixed type
  • Creating Array using Constructor
  • Array Methods

  • What is Function?
  • Function calling
  • Calling Function from link
  • Variable scope
  • Returning values
  • Calling function via Button
  • Anonymous Functions
  • Some important built-in functions

  • Objects in JavaScript
  • Creating Objects
  • Adding properties, changing properties, and Deleting properties
  • Adding methods
  • Nested Objects
  • Creating object using object literal

  • The toString() method
  • Overriding toString()
  • Object equality in JavaScript
  • What is JSON?
  • The 'this' keyword and using of 'this' keyword

  • The Arrow function
  • Restriction on Arrow function
  • Callback function
  • Anonymous function as callbacks
  • Why we need callback?

  • The Date object
  • The String object
  • The Math object

  • DOM introduction
  • What is DOM?
  • What can be done with DOM?
  • DOM selection methods

  • Setting/Getting Text Content
  • Changing CSS
  • Adding & Removing classes

  • Traversing the DOM
  • DOM properties
  • DOM properties drawback
  • Modern DOM properties
  • Creating new element
  • append() & preprend()

  • Event Introduction
  • Event categories
  • Ways of handling events
  • Using function for event handling
  • Cancelling the default behaviour

  • Using DOM event handler
  • Working with MouseEvents
  • Working with KeyBoard Events
  • Determining the key Pressed

  • Using DOM level 2 event handler
  • The event object
  • Event Bubbling
  • Event delegation

  • Accessing form object through JavaScript
  • Accessing Form data
  • The submit event & how to handle submit event
  • Other form events

  • Creating A ToDo List App
  • Apply All The Concepts Learnt Till Now

  • What Is React ?
  • What Problem React Solves ?
  • What Are Single Page Application’s ?
  • Challenges In Developing A SPA
  • React Advantages.
  • Is React A Framework OR Library ?

  • Two Ways To Develop A React App.
  • Developing Using CDN.
  • Developing Using Create React App.
  • Difference between CDN And Create React App
  • Developing The First App
  • Creating Function Based React Element
  • Creating Siblings
  • Creating Nested Components

  • What is JSX ?
  • Why JSX ?
  • Characteristics Of JSX ?
  • Coding JSX
  • Expressions In JSX
  • Inserting A Large Block Of HTML
  • Conditional Rendering
  • Different Ways Of Conditional Rendering

  • Modules
  • Exports and Imports
  • Classes
  • Spread & Rest Operators
  • Destructuring

  • Two Types Of Components
  • Class Components
  • How To Create Class Components
  • Industry Recommended Way Of Structuring A React Application

  • What are props ?
  • Using Props In React
  • Some Important Points About Props
  • How To Iterate Over Arrays In JSX
  • Using map() Method Of Array
  • Default props

  • Styling In React
  • Different Ways Of Styling
  • Inline Styling
  • JS Object Styling

  • Introduction To CRA
  • Installation Of Node Package Manager
  • Creating A New Project Using Create-React-App
  • Introduction To CRA
  • Installation Of Node Package Manager
  • Creating A New Project Using Create-React-App.

  • Exercise To Better Understand Request Flow
  • CRA Conventions
  • How To Load Images In CRA ?
  • How To Add CSS Files In CRA ?

  • What Is State ?
  • How It Is Different Than Props ?
  • Different Ways Of Initializing State
  • Why To Update The State ?
  • Correct Way To Update The State
  • Points To Remember

  • Event Handling Basics
  • How React's Event Handling Differs From JS ?
  • Concept Of Binding
  • Passing Arguments To Event Handlers
  • Different Ways Of Passing Arguments
  • React Keyboard Events
  • Getting The Key Pressed

  • React Design Principles
  • Recommended Way Of State Updation
  • What To Keep In State ?
  • Data Flow In State

  • React Design Principles
  • Recommended Way Of State Updation
  • What To Keep In State ?
  • Data Flow In State

  • Form Recap
  • How Forms Work In React ?
  • Uncontrolled Components V/s Controlled Components
  • Adding Multiple Fields
  • Creating Dynamic Keys

  • Modifying The ToDo List App Using React
  • Apply All The Concepts Learnt Till Now

  • Uncontrolled Components
  • Creating Ref
  • Accessing Ref

  • TextArea In HTML
  • TextArea In React
  • DropDown List In HTML
  • DropDownList In React

  • React Component Life Cycle Phases
  • React Component Life Cycle Methods
  • Mounting Phase Methods
  • Updating Phase Methods
  • Unmounting Phase Methods

  • What Is A Fragment ?
  • Need Of A Fragment
  • Syntax

  • Introduction
  • What Is localStorage ?
  • Methods Of localStorage

  • Introduction To Hooks
  • What Exactly Are Hooks ?
  • Rules Of Hooks
  • Types Of Hooks

  • Introduction To useState() Hook
  • Syntax Of useState()

  • Introduction To useEffect()
  • Syntax
  • Use Of Dependencies Argument
  • Performing Clean Up

  • Introduction To Context API In React
  • The useContext() Hook
  • Project

  • Introduction To Reducer In JS
  • The reduce() Method
  • Understanding useReducer() Hook
  • Project

  • Multi page React sites
  • React Router Setup
  • Links and Nav Links
  • Switch and exact match
  • Fetching Data
  • Route Parameters
  • Introduction to React Router 6
  • The Route Component
  • Redirects and use Navigate

  • Fetch API in React to populate data
  • System With Minimum I3 Processor Or Better
  • At Least 4 Gb Of Ram

Ready to kick-start your career?

Join Us Now Join Us Now
Shape Image
Shape Image