Basic Front-End development technologies like HTML 5, CSS 3, Jquery, BootStrap and
JavaScript (ES6) knowledge is must for training and understanding of advance JavaScript
libraries/frameworks such as React.Js/Angular/Node.Js/Express.Js etc. and is a prerequisite of this training.
Look for latest training schedule for Front-End Web Development training.
Course Features
This course will help Students/JavaScript developers who look ahead to deal with ReactJS for the first time. We will try to introduce every concept by showing simple code examples that can be easily understood. After finishing all the modules, you will feel confident working with ReactJS.
Course Overview
React.js - Overview
ReactJS is JavaScript library used for building reusable UI components. According to React official documentation, following is the definition − React is a library for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time. Lots of people use React as the V in MVC. React abstracts away the DOM from you, offering a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native. React implements one-way reactive data flow, which reduces the boilerplate and is easier to reason about than traditional data binding.
React - Features
- JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.
- Components − React is all about components. You need to think of everything as a component. This will help you maintain the code when working on larger scaleprojects.
- Unidirectional data flow and Flux − React implements one-way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.
React - Advantages
Uses virtual DOM which is a JavaScript object. This will improve apps performance, since JavaScript virtual DOM is faster than the regular DOM. Can be used on client and server side as well as with other frameworks. Component and data patterns improve readability, which helps to maintain larger apps.
Course Mentor
- Professional with 7 years of Frontend Technologies development experience
Course Content
- React JS Introduction
- Advantages of React JS
- Work flow of React JS
- Scope of React JS
- Increasing Vocabulary
- Body Language
- Preparation of Self Introduction
- Introduction of Virtual DOM.
- Difference between JS and JSX.
- React Components overview
- Containers and components
- What is Child Components?
- What is Namespaced components?
- What are the JavaScript expressions available in JSX?
- Node setup
- How to use NPM?
- How to create package.json and purpose of it?
- ES6 Introduction and features.
- Webpack Overview
- Best IDE for React JS and How to write optimized code in React JS?
- React JS browser plugins overview.
- Create a React component with JSX template.
- How to create Nested Components?
- What is React JS render?
- React Props overview.
- Introduction of Props validation with data types.
- Flow of States, Initialize states and update states.
- Real-time Practicals
- NPM Installation by locally and Globally
- Create a Basic App with React JS and other Supported NPMs
- Create a Small React Module
- Use All the states in in the created Application.
- Lists of Form components.
- Setup Controlled and Uncontrolled form components.
- Control Input elements.
- How to set default values on all formats of Input elements.
- React JS Form validations.
- How to write Styles?
- Animations overview
- Initial Render
- Props Change
- Stage Change
- Component willMount
- Component didMount
- Component Unmount
- Real-time Practicals
- Create a React Form.
- Client-side form validation.
- Applying form components.
- Submit and Rest the form.
- Applying Different Lifecylces in the Application.
- When to choose Appropriate lifecycles.
- Single Page Application Overview.
- How to configure React Router?
- History of Router
- How to Handle Conditional statement in JSX?
- IIFE in JSX for complex logic overview.
- onBlur, onKeyUp, onChange and other useful primary events in React JS.
- How to Sharing events between the components
- CSS and inline styles in React JS overview.
- Introduction to styled components
- How to Load the router library?
- Configure the React Router?
- How to Pass and receive parameters?
- Integration of React-cookie overview.
- Real-time Practicals
- Create a Single Page Application
- Applying Routing
- Dynamically render the components based on the url
- Communicate Data between components.
- Applying all lists of events.
- Styling the application using styled component
- How to use Animations in the Application.
- What is Flux Architecture?
- What are the Flux Components available?
- Stores.
- Dispatchers.
- View Controllers.
- Actions.
- Views.
- How Flux works?
- Flux and React works together.
- Introduction to One Store.
- Provider Component
- Actions.
- Reducers.
- sagas
- Dispatchers
- View Controllers
- Selector
- What are the necessary Tools required for Unit Testing?
- React Unit Testing overview
- Introduction to JEST.
- How to Test React Component?
- How to Test React Router?
- Real-time Practicals
- Redux application Development with Real-time Project
-
27/Jan/2023
- |
- Friday
- |
- 10:30 AM
MERN Stack - JS Fullstack
Succeed as a new-age Full-Stack Developer with our comprehensive project-based learning program. Learn full-stack development by mastering JavaScript, React, Express, NodeJS, MongoDB (MERN stack) and more through internship-grade projects, hands-on activities.
