React with Redux Certification Training
Course Curriculum : Your 10 module Learning Plan
About Edureka
https://www.edureka.co/reactjs-redux-certification-training
Edureka is a leading e-learning platform providing live instructor-led interactive online training. We
cater to professionals and students across the globe in categories like Big Data & Hadoop, Business
Analytics, NoSQL Databases, Java & Mobile Technologies, System Engineering, Project Management
and Programming. We have an easy and affordable learning solution that is accessible to millions of
learners. With our students spread across countries like the US, India, UK, Canada, Singapore,
Australia, Middle East, Brazil and many others, we have built a community of over 1 million learners
across the globe.
About Course
Edureka’s React with Redux Certification Training will train you to build efficient React applications by
mastering the concepts of React, Redux and React Native. In this course, you will learn how to build
simple components & integrate them into more complex design components. After completing this
training you will be able to build the applications using React concepts such as JSX, Redux,
Asynchronous Programming using Redux Saga middleware, Fetch data using GraphQL, perform
Testing using Jest, successively Deploy applications using Nginx and Docker plus build Mobile
applications using React Native
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
React with Redux Course Description
About React with Redux Course
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.
What will you learn in this course?
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.
Who should go for this training?
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
What are the pre-requisites for this Course?
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
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)
What are the objectives of our React with Redux Certification
Training?
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
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
React with Redux Course Curriculum
Introduction to Web Development and React
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
Components and Styling the Application Layout
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
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
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
Handling Navigation with Routes
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
React State Management using Redux
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:
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
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
Asynchronous Programming with Saga 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
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
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.
React Hooks
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:
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
Fetch API data using useEffect() hook
Pass multiple Context using useContext() hook
Writing custom hooks
Building weather application using React hooks
Fetch Data using GraphQL
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:
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
Build a GraphQL API and execute queries using GraphiQL tool
Fetch Space Launch Data using Apollo-GraphQL
React Application Testing and Deployment
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
Introduction to React Native
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:
What is React Native
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
Use of JSX elements With React Native
The anatomy of a React Native application
React Native installation and setup
Running the app on Android Simulator and Android Device
Working with Styles and Layout
Connecting React Native to Redux
Hands On:
Shopping Items list using Native React
Building React Native Application with API
Learning Objective: In this module, you will build and release an Android mobile application using
React Native.
Topics:
Integration of Native Modules
Navigation in React Native Apps
Navigation in Web Apps vs Native Apps
Handling User Inputs
Networking: Sending HTTP Requests
Displaying and Saving Data
Configuring & Building the Application
Releasing the Application
Hands On:
Dynamic Shopping cart using React Native
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
React with Redux Projects
What are the system requirements for this course?
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)
How will I execute the Practicals?
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.
Which Project will be a part of this course?
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
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
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.
www.edureka.co
© 2019 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.