React JS

Learning Objective: In this module, you will learn about MVC architecture, what is React and difference between single and multiple page applications. You will also learn how to install React, make use of NPM packages and ES6 concepts.

Topics:

• Building Blocks of Web Application Development
• Single-page and Multi-page Applications
• Different Client-side Technologies
• MVC Architecture
• Introduction to React
• Installation of React
• JSX and its use case
• DOM
• Virtual DOM and its working
• ECMAScript
• Difference between ES5 and ES6
• NPM Modules

Hands On:

• Installation of Node.js, React and Visual Studio Code
• Creating First React Application

Learning Objective: In this module, you will learn React core concepts like Components, State and Props. You will also learn how to build the application layout using forms and style sheets.

Topics:

• React Elements
• Render Function
• Components
• Class Component
• Component Constructor
• Functional Components
• Multiple Components
• Props
• Props with Class based Component
• Props with Function based Component
• States
• Component Lifecycle
• React Events
• React Forms
• Different Form Concepts
• Styling in React
• Inline Styling
• CSS Stylesheet
• Building Music Shop Application using React Components

Hands On:

• Build a Music Store Application using React Components

Learning Objective: In this module you will learn to build an application using different route techniques and consume remote data by integrating API in React applications.

Topics:

• Routing
• react-router
• Features of react-router
• Configuration of routing using react-router
• Navigation using Links
• 404 page (Not found Page)
• URL Parameters
• Nested Routes
• Implementing styles using NavLink
• Application Programming Interface
• Build a REST API using json-server
• API consumption in React application using Fetch method
• Build a dynamic Music Store application using Routing and API connectivity

Hands On:

• Dynamic Music Store Application with Routing and API connectivity

Learning Objective: In this module, you will learn how to integrate Redux with React. Also, you will understand the other key terminologies associated with Redux to build a web application.

Topics:

• Need of Redux
• What is Redux?
• Redux Architecture
• Redux Action
• Redux Reducers
• Redux Store
• Principles of Redux
• Pros of Redux
• NPM Packages required to work with Redux
• More about react-redux package

Hands On:

• Building an application to list the food items using React and Redux
• Building News application using React, Redux, and promise middleware

Learning Objective: In this module, you will learn how to write and handle the Asynchronous actions using Redux-Saga Middleware.

Topics:

• Need of Async operations
• Async Workflow
• Action Creators
• How to write Action Creators?
• Handling Async Actions via Reducers
• Middleware
• Redux-Saga
• Generators in Redux-Saga
• Saga Methods()
• Major Sections of Redux-Saga
• Building a Product List application using Redux-Saga Middleware
• Debugging application using Redux Devtools

Hands On:

• Building a Product list application using Redux-Saga Middleware.

Learning Objective: In this module, you will learn how to implement Class component- Stateful features within Functional components using React Hooks.

Topics:

• Caveat of JavaScript classes.
• Functional components and React hooks
• What are React hooks?
• Basic hooks
• useState() hook
• How to write useState() hook when state variable is an array of objects
• useEffect() hook
• Fetch API data using useEffect() hook
• useContext() hook
• Rules to write React hooks
• Additional hooks
• Custom hooks

Hands On:

• Fetch API data using useEffect() hook
• Pass multiple Context using useContext() hook
• Writing custom hooks
• Building weather application using React hooks

Learning Objective: In this module, you will learn how to augment React components with GraphQL to query the data.

Topics:

• What is GraphQL?
• Cons of Rest API
• Pros of GraphQL
• Frontend backend communication using GraphQL
• Type system
• GraphQL datatypes
• Modifiers
• Schemas
• GraphiQL tool
• Express framework
• NPM libraries to build server side of GraphQL
• Build a GraphQL API
• Apollo client
• NPM libraries to build client side of GraphQL
• How to setup Apollo client

Hands On:

• Build a GraphQL API and execute queries using GraphiQL tool
• Fetch Space Launch Data using Apollo-GraphQL

Learning Objective: In this module, you will learn how to perform application testing using Jest and later deploy the application using Docker and Nginx

Topics:

• Define Jest
• Setup Testing environment
• Add Snapshot testing
• Integrate Test Reducers
• Create Test Components
• Push Application on Git
• Deploy App on Nginx
• Create Docker for React Application

Hands On:

• Testing application using Jest
• Application Deployment via Nginx and Docker

Learning Objective: In this module, you will understand React Native terminologies, learn how to integrate React Native with Redux and build a mobile application using React Native

Topics:

• Native Applications
• React Native
• React Native Elements
• Expo CLI
• Build a shopping cart mobile application using React Native
• React Native installation and setup
• Working with Styles and Layout

Hands On:

• Shopping Items list using Native React

Learning Objective: In this module, you will build and release an Android mobile application using React Native.

Topics:

• Native modules
• Native Navigation libraries
• Integration of Redux with React Native
• React Native and Redux major components
• Redux Thunk middleware
• NPM libraries
• Shopping cart application using React Native and Redux
• Integration of Redux actions, store and reducers In React Native application

Hands On:

• Dynamic Shopping cart using React Native

React is a JavaScript library used to build responsive and streamlined user interface for web and mobile applications. It lets you compose complex UIs from small and isolated pieces of code called “components”. React can render on the server using Node and can power native apps using React Native. React with Redux will let you to write applications that behave consistently, run in different environments and are easy to test and deploy.

The React with Redux and Native certification training is designed to provide you the knowledge and skills required to become a successful web and mobile application developer. It starts with the fundamental concepts of React and its architecture. The training then focuses on Redux and its features, demonstrates how React and Redux can be used together to build extensive web applications and later guides you on how to develop responsive UIs to handle user interactions in a mobile environment using React Native.

On completion of the training, learner will be able to:

• Develop a proper understanding of Web Development Architecture
• Create application using React components
• Perform Navigation using Routes
• Build Web Applications using React with Redux
• Program Async Actions using Redux-Saga Middleware
• Write Queries using GraphQL
• Execute Test Cases using Jest
• Deploy Applications using Docker and Nginx
• Build Mobile Applications using Native React

The following professionals can go for this course:

• Freshers and Aspiring Frontend (JavaScript) Developers
• UI/UX Developers
• Web Developers
• Software Developers
• Developers upgrading from Angular, Vue and other similar UI JavaScript Frameworks

• Fundamentals of programming and object-oriented concepts
• HTML + CSS + JavaScript Knowledge (You don’t need to be an expert but should be familiar with the basics of these topics)

• Hardware Requirements:
  • Memory – Minimum 4 GB RAM
  • Processor – Intel Core i3 CPU @2.00 GHz or later
  • Storage – 20 GB HDD/SDD or above
• Software Requirements:
  • Operating System – Windows 7 or later, Ubuntu 14 or later
  • Visual Studio Code (for web application development) and Expo (for mobile application development)
  • Chrome or Mozilla (latest version)

All the React and React Native applications will be built and debugged using open source code editors such as Visual Studio Code and Expo respectively. The detailed step by step installation guides are available on LMS. In case you come across any doubt, the 24*7 support team will promptly assist you.

• Domain: Entertainment and Media
  Background: E-cube a web application is developed using traditional web development methodologies. Due to tight coupling of UI components, on addition of any new feature maintaining the website was difficult for the development team. To overcome this limitation and enhance the user experience, company decided to upgrade their website using React library. In order to maximize the customer reach, along with web application they want to build a mobile application using React Native.
  Goal: The goal of this project is to build an online ticket booking application for latest movies, upcoming movies, concerts and other LIVE events.

You will never miss a lecture at Certadda! You can choose either of the two options: View the recorded session of the class available in your LMS or You can attend the missed session, in any other live batch.

Your access to the Support Team is for lifetime and will be available 24/7. The team will help you in resolving queries, during and after the course.

Post-enrolment, the LMS access will be instantly provided to you and will be available for lifetime. You will be able to access the complete set of previous class recordings, PPTs, PDFs, assignments. Moreover the access to our 24×7 support team will be granted instantly as well. You can start learning right away.

Yes, the access to the course material will be available for lifetime once you have enrolled into the course.