Browse Course
CLOSE

CATEGORIES

ReactJS - From Beginner To Pro

Create seamless and dynamic user interfaces with ReactJS.

  • (5 ratings) 22 students enrolled
Created byjins code Last Updated: 2021-06-29 20:44:09

Course Overview

ReactJS is one of the most important frontend libraries you can use in Modern Web Application development. Gone are the days of Web Apps that reloads the entire page on every user interaction. Nowadays the users expecting to have the same Desktop/Mobile app like rich user experience in Web apps too. Single Page Web Apps (SPA) are the new trend in Web Application Development that offers exactly the above mentioned benefits. ReactJS is the perfect choice to develop seamlessly interactive and rich Single Page Web applications.   ReactJS completely proves its power to handle complexity and rendering speed because ReactJS is developed by none other than the Tech Giant Facebook and is powering their Web Apps like Facebook , Instagram & WhatsApp Web and even their mobile Apps (built with React Native) and it has enormous Community Support. Best of all once you learn ReactJS you can apply the same knowledge to start developing Mobile Applications for both Android & iOS using React Native.   This Course is starting from the basics and progressing towards advanced as below   Introduction To React Basics of Modern JavaScript  - ES6 (Prerequisite) ReactJS core concepts (with examples) Building a modern fully responsive Real World Note Application with ReactJS.

1. What are the requirements?

  • A Basic understanding of HTML , JavaScript and CSS
  • Basic Knowledge to run Commands in Operating System

2. What am I going to get from this course?

  • Rock Solid Foundation of the ReactJS concepts
  • Basics of Modern JavaScript - ES6 features
  • Core ReactJS concepts, Best Practices , styling , common pitfalls , Popular Third Party Libraries and Deployment to Cloud, all with an example

3. Who this course is for?

  • This course is designed for anyone who is having a basic understanding of HTML , JavaScript and CSS
  • Web Developer who would like to switch in to the world of Rich User Experience provided by the Single Page Web Apps.

About the Author

  • Jinu is a Developer who is having 10 years of experience in both Front-end and Back-End technologies like ReactJS, React Native , Bootstrap, Zurb Foundation , jQuery, Material UI , Fluent UI , Node.JS , GraphQL, ASP.NET Web API, C#.  He always likes to teach what he knows, but in a more pragmatic way so that the audience can actually benefit from it as soon as possible.

Course Curriculum

Introduction to React

Simplest possible ReactJS Application Setup

Elements in ReactJS

  • Understanding React Elements
     
  • React Elements Attributes
     
  • React Elements Composition
     

JSX

  • Introduction To JSX
     
  • JSX Attributes
     
  • JSX Styling
     
  • JSX Interpolation
     
  • JSX Conditional Rendering
     
  • Virtual DOM In Action
     

ReactJS Online IDEs

  • Online Code Editors For React
     

Production Ready ReactJS Application Setup

  • Environment Setup - Software
     
  • VSCode Editor Setup
     
  • Modern JavaScript Intro
     

ES6 fundamentals

  • let const
     
  • Template Literals
     
  • Classes
     
  • Arrow Functions
     
  • Destructuring
     
  • Rest Parameters
     
  • Spread Operator
     
  • Map Function
     
  • Filter Function
     
  • Reduce Function
     
  • JavaScript Modules
     
  • Create-react-app
     
  • CRA Project Structure
     

React Components

  • Introduction To Components
     
  • Function Components
     
  • Class Components
     
  • Fragments
     
  • Component Composition
     

Component Props

  • Props Understanding Props in Components
     
  • Understanding Default Props
     

Component Styling

  • Inline Styling
     
  • CSS-Styling
     
  • CSS-Modules-Styling
     
  • Dynamic Styling
     
  • Understanding styled-components
     

Event Handling

  • Event Handling Intro
     
  • Synthetic Events
     
  • Event Bubbling
     
  • Callback Functions
     

Component State

  • State - Introduction
     
  • Immutable State Change
     
  • Understanding Immutability Helper Package
     
  • State Positioning - Local State
     
  • State Positioning - Sharing State and Container Components
     

Component Lifecycle

  • Phases Of Components
     
  • Lifecycle - Constructor
     
  • Lifecycle - Render
     
  • Lifecycle - component Did Mount
     
  • Lifecycle-component Did Update-1
     
  • Lifecycle - component Did Update - 2
     
  • Lists and Key Prop
     
  • Refs
     

Hooks

  • Hooks - Intro
     
  • Hooks - use State - Intro
     
  • Hooks - use State - with objects
     
  • Hooks - use State - with array
     
  • Hooks - use State - based on previous
     
  • Hooks - use Effect - Intro
     
  • Hooks - use Effect - after every render
     
  • Hooks - use Effect - conditionally
     
  • Hooks - use Effect - only once
     
  • Hooks - use Effect - cleanup
     
  • Hooks - use Ref - for DOM Reference
     
  • Hooks - use Ref - for storing values
     

AJAX/API calls in React

  • HTTP Calls from React App
     
  • Fetch - GET
     
  • Fetch - POST
     
  • Axios - GET
     
  • Axios - POST
     
  • Axios - multiple requests
     
  • HTTP Request Error Handling
     
  • Call API from Functional Component
     

Higher Order Components

  • HOC - Intro
     
  • HOC - Example
     

Render Props

  • Render Props - Intro
     
  • Render Props - Code Reuse
     

Form Handling

  • Form Handling - Controlled And Uncontrolled Inputs
     
  • Creating Registration Form
     
  • RegForm-Handling Text Inputs
     
  • RegForm - Handling Dropdowns
     
  • RegForm - Handling Radio Buttons
     
  • RegForm - Handling CheckBoxes
     
  • RegForm- ResettingForm
     
  • RegForm - Dynamically Binding Form Controls
     
  • RegForm - Form Validation
     

Formik

  • Formik - Introduction
     
  • Formik - Custom Handle Change
     
  • Formik - Input Validation
     
  • Formik - Conditional Validation
     
  • Formik - Validation with Yup
     
  • Formik - Conditional Validation with Yup
     

Debugging

  • Debugging React Apps - Terminal Window
     
  • Debugging React Apps - F12 Tools
     
  • React Developer Tools
     
  • Error Boundaries
     

Routing

  • Routing - Introduction
     
  • Routing - Basic Routing Example
     
  • Routing - Passing Props with Render Props
     
  • Routing - Route Props
     
  • Routing - with Router
     
  • Routing - Link
     
  • Routing - NavLink
     
  • Routing - Route Parameters
     

Context API

  • Introduction
     
  • Context API - Basics
     
  • Context API - Consumer
     
  • Context API - Custom Provider
     

ReactJS Project - ReactNotes

  • ReactNotes - App Design
     
  • ReactNotes - Project Setup
     
  • ReactNotes - Creating Topbar
     
  • ReactNotes - Creating Sidebar
     
  • ReactNotes - Making Sidebar Responsive
     
  • ReactNotes - Creating Content Component
     
  • ReactNotes - Setting Up Theme Provider share theme
     
  • ReactNotes - Implementing SideBar Toggle
     
  • ReactNotes - Implementing SideBar Toggle-2
     
  • ReactNotes - Creating Tag List
     
  • ReactNotes - Dynamically Binding TagList
     
  • ReactNotes - Creating Color List
     
  • ReactNotes - Dynamically Binding ColorList
     
  • .ReactNotes - Setting Up Selected Tag and Color State
     
  • ReactNotes - Setting Up Selected Tag and Color State-2
     
  • ReactNotes - Creating NoteList Page Component
     
  • ReactNotes - Fetching Notes from API
     
  • ReactNotes - Creating Note Component
     
  • .ReactNotes - Rendering Tags of a Note
     
  • ReactNotes - Rendering a Note Action Bar
     
  • ReactNotes - Rendering NoteList
     
  • ReactNotes - Masonry Layout in NoteList
     
  • ReactNotes - Creating AddTag Form in Sidebar
     
  • ReactNotes - AddTag Form Form Handling
     
  • ReactNotes - AddTag Form Validation
     
  • ReactNotes - AddTag Form Completing Insert Tag
     
  • ReactNotes - Creating component for Add Note and Search
     
  • ReactNotes - Creating AddEdit Modal Route
     
  • ReactNotes - Styling Note Editor Popup
     
  • ReactNotes - Maintaining Modal Route
     
  • ReactNotes - Preserving Previous Route During Navgation
     
  • ReactNotes - Fetching Note Detail with Id
     
  • ReactNotes - Creating AddEditNoteForm -1
     
  • ReactNotes - Creating AddEditNoteFrom-2
     
  • ReactNotes - Adding Form State
     
  • ReactNotes - Creating Color Editor
     
  • ReactNotes - Adding Form Validation
     
  • ReactNotes - Completing Create Note Functionality
     
  • ReactNotes - Completing Note Editing Functionality
     
  • ReactNotes - Deleting Notes
     
  • ReactNotes - Implementing Note Search -1
     
  • ReactNotes - Implemeting Note Search - 2
     
  • ReactNotes - Highlight Search Keyword in Notes
     
  • ReactNotes - Deploying App - Setting Up Environment Variables
     
  • ReactNotes - Deploying App - Deploying to Windows Server
     
  • ReactNotes - Deploying App - Deploying to Linux Server
     

reviews

    • anil kumar
      Awesome course , Especially the hands-on section is very helpful
      3 years ago
    • anand k
      Excellent course . The way of presentation in my mother tongue highly influenced me. AIso, I strongly suggests this course to anyone who looking to make some knowledge on React js.
      3 years ago
    • Midhun k
      This was very immersive and interesting course . I hope it will improve the knowledge and gave a strong foundation in React js.
      3 years ago

students

Quick Links

recentPosts

റെസ്യൂമെയും സി വിയും തമ്മിൽ എന്താ വ്യത്യാസം

Ever wondered whether CV and Resume are the same t... Read More

Oct 19, 2022 , 0 Comments

ഇന്റർവ്യൂ നടക്കുന്ന ദിവസം ഇതൊക്കെ ശ്രദ്ധിക്കാം

Do you have an interview scheduled for tomorrow? H... Read More

Oct 19, 2022 , 0 Comments

View More...

toprated

Computer Programming - An Intr

  In today’s world, computer programmin... Read More

Aug 24, 2020, 23 Comments

Machine Learning and Data Scie

Globally, the machine learning market is expected ... Read More

Jul 2, 2020, 15 Comments

View More...