Upgrade

your skills

React JS Course Curriculum

Our React JS course in Chennai exclusively framed a course content which covers all the important
and latest concepts from scratch to advance level which is prepared by our React professional expert
trainers to make it suitable for beginners as well. Our React JS course content ensures to cover all the
skill set up to industrial standard to lead a successful career path.
Who We Are
Credo Systemz boasted as the Best IT Training institute
in Chennai, aim in educating the workforce to the IT
industry. Along with a team of highly experienced and
qualified trainers, we offer state of the art training with
excellent infrastructure to keep you above par for the
emerging IT skill trends. I recommend Credo Systemz for
With individual attention to our Customers, unique
React JS course based on my train-
mentorship from trainers with hands-on project training, ing experience which has upskilled
career & placement guidance, we have 15000+ happy my knowledge with hands on train-
customers who have distinguished us from our competi-
ing. As a beginner my trainer made
tors, with their satisfied reviews.
it easily for me to learn with ex-
plaining every concept very clearly
using many examples. He is very
Why Choose US friendly, readily available to clear
Be it an individual or a corporate collaboration, our ded- my doubt and help us to complete
icated team will serve and assist you for your needs to real world projects with code re-
enhance the effectiveness of training with utmost com- views.
mitment to your professional development. Also, with
comprehensive course duration & Flexible schedule &
training pattern, allowing candidates to choose between
week day \ week end sessions, or online learning ses-
sions or for our corporate friends to conduct the training Jenisha
in their office premises, we are committed to deliver as
per the need of our customer.

Real Time Projects Lifetime Support & Access

Live project based on most of Lifetime access to our LMS and
the selected use cases, involv- Technical Forum for 24x7 online
ing the various packages of support team who will resolve
React JS. all your technical queries.

Hands-on Assignments Assured Placement

Every React JS sessions will be We have dedicated Placement
followed by practical assign- Team that is constantly engag-
ments which aggregate to a ing with the industry to find the
minimum of 60 hours. right opportunity for you.

Expert Faculty Certification

Our React JS curriculum has
been specifically designed and
delivered by our expert faculty
who has great industry exposure.
Successful completion of the
final project will get you certi-
fied as a React JS Professional
by Credo Systemz.Services.
2 w w w. c r e d o s y s t e m z . c o m
JavaScript, ES6 JS - Program Curriculum

01 JavaScript

Topics

• Introduction • Variable Mutation • Functions

• What is JavaScript? • Basic Operator • Function statement
• JavaScript Features • Operator Precedence • Function Statement Example
• JavaScript Libraries • Shorthand operator • What is Array
• Understanding HTML, • Problem statement • Real world Problem
CSS, JavcScript Ecommerce
• Decision making
• JavaScript VersionES5 statement-if else • Real world problem transport
• ES6/ES2015 • if else - example • Space and the Complexity
• ES7/ES2016 • Comparing the problem • Built in function Complexity
statement solution
• ES8/ES2017 • Examples of Array
• Switch statement - example
• Data Types • Objects, When to use it
• Boolean logic
• Number • Objects and Methods
• Boolean logic example
• String • Loops and Iteration
• Ternary operator
• Boolean • For Loop
• Ternary operator example
• Undefined • Continue and Break Statement
• Tips
• Null

02 ES6 JavaScript

Topics

• History of JavaScript • Tips and Arrow Functions • Classes example

• Features • Exports and Imports • Inheritance
• let & const and its example • Tips for exports and im • Spread and rest Parameter
ports
• Arrow Functions • Destructing
• Classes
• Alternative

3 w w w. c r e d o s y s t e m z . c o m
REACT JS - Program Curriculum

01 What is React JS?

Topics

• React JS Introduction • Work flow of React JS

• Advantages of React JS • Scope of React JS

02 Overview of JSX

Topics

• Introduction of Virtual DOM. • Containers and components • What are the JavaScript ex
pressions available in JSX?
• Difference between JS and • What is Child Components?
JSX.
• What is Namespaced
• React Components overview components?

03 React JS
Environment Setups

Topics

• Node setup • ES6 Introduction and features. in React JS?

• How to use NPM? • Webpack Overview • React JS browser plugins
overview.
• How to create package.json • Best IDE for React JS and
and purpose of it? How to write optimized code

Hands-on Practicals:

• NPM Installation by locally • Create a Basic App with React

and Globally JS and other Supported
NPMs.

4 w w w. c r e d o s y s t e m z . c o m
04 A Real-Time Application
by using React JS
Topics
• Create a React component • What is React JS render?
with JSX template.
• How to create Nested
Components?
Hands-on Practicals:
• Create a Small React Module
05 React JS forms
and UI
Topics
• Lists of Form components.
• Setup Controlled and
Uncontrolled form
components.
Hands-on Practicals:
• Create a React Form.
• Client-side form validation.
• Introduction of Props
validation with data types.
• React Props overview.
• Flow of States, Initialize
states and update states.
• Use All the states in the
created Application.
• How to write Styles?
• Control Input elements. • Animations overview
• How to set default values on
all formats of Input elements.
• React JS Form validations.
• Applying form components.
• Submit and Rest the form.
5 w w w. c r e d o s y s t e m z . c o m
06 React JS Component
Life Cycles Overview

Topics

• Initial Render • Stage Change • Component didMount

• Props Change • Component willMount • Component Unmount

Hands-on Practicals:

• Applying Different Lifecylces • When to choose

in the Application. Appropriate lifecycles.

07 Routing in React JS
and Other JS concepts

Topics

• Single Page Application Router? statement in JSX?

Overview.
• History of Router • IIFE in JSX for complex logic
• How to configure React overview.
• How to Handle Conditional

Hands-on Practicals:

• Create a Single Page • Applying Routing. ponents based on the url.

Application.
• Dynamically render the com

08 Event Handling
in JSX

Topics

• onBlur, onKeyUp, onChange • How to Sharing events

and other useful primary between the components?
events in React JS.

Hands-on Practicals:

• Create a Single Page • Dynamically render the

Application. components based on the url.
• Applying Routing.
6 w w w. c r e d o s y s t e m z . c o m
09 How to write Styles
in React JS?

Topics

• CSS and inline styles in React • Introduction to styled

JS overview. components

Hands-on Practicals:

• Styling the application using • How to use Animations in the

styled component Application.

10 React Router with

Navigation

Topics

• How to Load the router • How to Pass and receive pa • Integration of React-cookie
library? rameters? overview.
• Configure the React Router?

11 Flux, Redux overview

Topics

• What is Flux Architecture? • How Flux works? • Dispatchers

• What are the Flux • Flux and React works • View Controllers
Components available? together.
• Selectors
1. Stores. • Introduction to One Store.
2. Dispatchers. • Provider Component
3. View Controllers. • Actions.
4. Actions. • Reducers.
5. Views. • sagas

Hands-on Practicals:

• Redux application Development with Real-time Project

7 w w w. c r e d o s y s t e m z . c o m
12 Unit Testing Overview

Topics

• What are the necessary Tools • Introduction to JEST. • How to Test React Router?
required for Unit Testing?
• How to Test React
• React Unit Testing overview Component?

13 Integration with other

libraries

Topics

• Gulp & Browserify • React with jQuery • React & AJAX

14 React Server Integration

with Deployment

Topics

• https • httpster • npm

15 Hooks

Topics

• Understanding Hooks • The useContext hook

• The useState hook • The useReducer hook
• Side effects using the • Writing your own hook
useEffect hook

8 w w w. c r e d o s y s t e m z . c o m
16 Code Spliting

Topics

• Code splitting & Suspense • Route Based Code Splitting • Lazy Loading

17 Isomorphic React

Topics

• Server Side Rendering • SSR with React - Setup • SSR with React - The
& Server Toolchain

18 Testing Component

Topics

• Using Jest with Test Utils • Using Jest with the • Using Jest with Enzyme
from React-DOM React Testing Library

19 Epilogue

Topics

• The React ecosystem

20 New Features of
React 16

Topics

• Handling exceptions in • Error boundaries

components

9 w w w. c r e d o s y s t e m z . c o m
21 Webpack Primer and
Isomorphic React

Topics

• Webpack and its use • Working with loaders • Server-side rendering (SSR)
• Setting up and installing • Quick word on lazy loading, • Working with render To Stat
Webpack code splitting, and tree shaking icMarkup and renderToString
methods
• Working with the configuration • Setting up a hot module re
file of Webpack placement

22 F etch data using

GraphQL L

Topics

• What is GraphQL? • GraphQL datatypes side of GraphQL

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

10 w w w. c r e d o s y s t e m z . c o m
Real Time Projects For - Case Studies

1 2 3

Payment HTTP App Realtime

Portal Project with various API Ecommerce App

Build a Paymnet portal with
multiple components and its
interactions. Utlize its life hooks,
various events and implement
forms with validations.
Connect your React JS App with
various APIs like Weather, News,
Jokes. Here you can experience
how to resolve CORS error and
Request, Response life cycle.
Create a new Ecommerce project
with Authorization and
Authentication. All forms with
validations and send AJAX
request to backend.

All the way from skilling to placement

end-to-end Career Support

SESSIONS WITH MOCK

INDUSTRY MENTORS INTERVIEWS
Attend sessions from top Mock interviews to make you
industry experts and get guidance prepare for cracking interviews
on how to boost your career growth by top employers

RESUME GUARANTEED INTERVIEWS

PREPARATION & JOB SUPPORT
Get assistance in creating Get interviewed by our
a world-class resume from 400+ hiring partners
our career services team

11 w w w. c r e d o s y s t e m z . c o m
Completion Certificate
Credo Systemz's certificate is
highly recognized by 1000 +Global
companies around the world.
Recent Placed Candidates

Ram Kumar
Batch : Jan 2021

Suganya
Batch : Feb 2021

Sathish
Batch : Aug 2021

Vinoth
Batch : Mar 2021

Kunal
Batch : Jul 2021

Ramya
Batch : Oct 2021
GET IN TOUCH

CREDO SYSTEMZ – VELACHERY

info@credosystemz.com New # 30, Old # 16A, Third Main Road,
Rajalakshmi Nagar, Velachery,
(Opp. to Murugan Kalyana Mandapam),
www.credosystemz.com Chennai - 600 042.

CREDO SYSTEMZ – OMR

Plot No.8, Vinayaga Avenue,
Velachery – +91-9884412301 Rajiv Gandhi Salai, (OMR), Okkiampettai,
OMR – +91-9600112302 Landmark - Behind Okkiyampet Bus Stop,
Next to Buhari Hotel,
Chennai – 600 097.