React.js Training Certification - eLearning

React.js eLearning

Program Overview:

This React.js course is designed for beginners who want to build a strong foundation in developing modern web applications using React.js, one of the most popular JavaScript libraries. This course equips learners with the fundamental skills and knowledge to create dynamic, interactive, and responsive user interfaces efficiently.

Program Features:

• Course & material are in English
• Beginner - intermediate for aspiring software engineer
• 1 year access to the self-paced study eLearning platform 24/7
• 14 hours of video content
• 50 hours study time recommended
• MEAN Stack virtual Lab included
• 2 End-project course
• No exam for the course but student will get certification of training completion

Key Learning Outcomes:

• Know how to build amazing single-page applications with React and Redux
• Learn and apply fundamental concepts behind structuring Redux applications
• Realize and appreciate the power of building composable components
• Understand and use NPM, Babel, and ES6 JavaScript syntax.

Target Audience:

This React.js certification course is designed for web developers who design and build UI/UX solutions for mobile and web apps and want to design with React as efficiently as possible using a JavaScript library.

• Web Developers
• Web Designers
• Full-stack developer
• Mobile developer

Prerequisites:

For this course, you must have experience building front-end web applications with HTML, CSS, and JavaScript.

Course Content

Course Introduction

• What is react
• Setting up the environment

Starting (GitHub Finder) and Setting up React

• Project introduction
• Creating a React application and viewing the file structure
• Create React App (CRA) Cleanup and preparation
• Introduction to JavaScript Syntax Extension (JSX) and Fragments
• Expressions and Conditionals in JSX

Components States and Props

• Lists and Passing a State with Props
• Stateless Functional Components
• Handling HTTP requests and updating states
• Spinner component and refactoring
• Environment variables

Event Passing Props React Router and MOre

• Events and search components
• Passing props up and searching users
• Clearing users from your state
• Setting up alert state and component
• Setting up a react router
• Adding a single user component and data
• Creating a user component UI and Layout
• Repos and the Repoitem component

Refactoring Hooks and context API

• Overview of hooks and context API
• Using a Search-class to function with the use state hook
• Using a User class to function with the use effect hook
• App class function component
• Implementing context API and using the Reducer
• Creating reducers
• Moving user state to the context API
• Moving repos state to the context API
• Creating alert context workflow
• Creating the home and NotFound components
• Preparing and deploying to Netlify

Mongo DB express React and Node (MERN)

• Setting up MongoDB atlas
• Creating dependencies and a basic express server
• Setting up Backend routes
• Connecting MongoDB to the application

Backend user contacts and JSON web Token Authentication

• User model and validation
• Hashing passwords and registering routes
• Creating and responding with a JSON web token
• Creating an Authentication route
• Authenticating Middleware and protecting routes
• Creating a contact model and getting the contacts route
• Adding a contact route
• updating contacts and deleting routes

Setting up your client and contacts UI

• Setting up react and concurrently
• Setting up cleanup, Navbar, and a router
• Creating contacts, Context, and a global state
• Creating the contacts and contactitem components
• Deleting a contact from the UI
• Setting and clearing current contacts
• Adding actions for editing and updating contacts
• Creating a contact filter form and state
• Creating a Basic add and delete animation

React or Express Authentication

• Creating authentication context and initial state
• Creating register and login forms
• Creating alert context, states, and components
• Creating a user registration form
• Loading a user and setting a token
• Creating user login
• Creating the logout and Navbar components
• Creating the PrivateRoute component

Integrating and Deploying the Contacts API

• Adding contacts to the database
• Getting and clearing contacts
• Deleting contacts
• Updating contacts
• Preparing and deploying to Heroku

Start IT Logger (Redux) components and UI

• Setting up React and the JSON
• Setting up Materialize CSS
• Creating the SearchBar and Logs components
• Creating the Logitem and Preloader Components
• Creating the AddBtn and AddLogModal components
• Adding the edit and Tech Modal components

Redux State Management

• Setting up the redux store and provider
• Setting up Logs Reducer, Actions, and Types
• Connecting Redux to a component
• Adding, Deleting, Updating, Searching Logs

Technicians State and its components

• Techs reducer, actions and components
• Using the select component
• Adding technicians
• Deleting technicians

Course End Project:

• Building an Event Finder App in React

Build a React app where users can view and promote upcoming events, set up a JSON server for testing until backend APIs are ready, and finally manage the state using Redux.

• Pokemon Search Application

In the world of pokemon, where the user should be able to search  for different pokemons, you have to create an application to search them with the following functionalities:

The Pokemon application should have the list of pokemon details which will be provided in the form of JSON data i.e., it should have name, image, CP, attack, defense type etc.
It should have a search bar so that user can search the pokemon based on the name of pokemon.Since we have many pokemon, apply pagination, so that user can only see 10 pokemon at a time.