React JS Training

React JS Course

  • 24 hours of Instructor led Training
  • Comprehensive Hands-on with Modern JS (ES6 features)
  • Gain basic to intermediate React skills
  • Learn by doing, experience end-to-end development cycle
Group Discount
HRDF Claimable

Overview

React is the popular JavaScript library used to build interactive and state-of-the-art user interfaces. Its popularity lies in the fact that it can handle complex updates and still ensure speedy responses. Its modularity, maintainability, flexibility and scalability make it the ideal choice for use in applications that have fast changing data. With the React library you can develop dynamic front end applications using great features like component architecture, data binding, declarative views, universal apps and much more.
This comprehensive course from KnowledgeHut will help you step into the world of React and learn why this JavaScript library has taken the web application development world by storm. You will learn about the basics of the latest edition that is React 16, including its architecture and components and go on to mastering the advanced concepts such as building rich internet applications using React.JS, Flux and Redux. You will learn to create, build, and deploy react applications to cloud with maximum learning benefit. Enrol now and get hands-on mastery of this platform.

What You Will Learn

  • Learn how Single Page React application is different than traditional web development frameworks

  • Code using new ES6 language features

  • Develop an application from scratch using React 16

  • Understand the benefits of unidirectional data flow

  • Understand and use React, React Router, Redux, Redux Saga and other popular libraries

  • Creating redux middleware with Redux saga

  • Use styled-components to create presentational components (CSS in JS)

  • Taking the advantage of react and redux dev tools for better debugging

  • Taking the advantage of immutable.js library to follow the immutable state principle

  • Unit test React components, redux using Jest, Enzyme and sinon

  • Implementing server-side rendering for SEO benefits and to reduce initial load times

  • Use webpack bundler & its features-code splitting,lazy loading, tree shaking, hot module replacement

  • Create, build, and deploy react applications to cloud

  • React ecosystem and sources for good third-party libraries

Prerequisites
  • Basic HTML & CSS3
  • Intermediate javascript skills

Who should Attend

  • Those who want to learn client-side web development and apply it on large web apps
  • Candidates who intend to use react to build robust and scalable SPAs
  • All those who aspire to build a career in front end Web Application development

KnowledgeHut Experience

Instructor-led Interactive Classroom Experience

Interact with instructors in real-time— listen, learn, question and apply. Our instructors are industry experts and deliver hands-on learning.

Curriculum Designed by Experts

Our courseware is always current and updated with the latest tech advancements. Stay globally relevant and empower yourself with the latest tools and training.

Learn through Doing

Learn theory backed by practical case studies, exercises and coding practice. Get skills and knowledge that can be effectively applied in the real world.

Mentored by Industry Leaders

Our support team will guide and assist you whenever you require help.

Advance from the Basics

Learn concepts from scratch, and advance your learning through step-by-step guidance on tools and techniques.

Code Reviews by Professionals

Get reviews and feedback on your final projects from professional developers.

Curriculum

Learning Objective:

Understand the features of ES6 and new syntaxes.

  • History of Javascript
  • What is ES6
  • A word on babel
  • Block scope, let & const
  • Template literals
  • Arrow functions
  • Spread and Rest operators
  • Object literal improvements
  • Destructuring
  • Classes
  • Inheritance
  • Static properties and methods
  • Promises
  • Iterators and Iterables
  • Generators
  • Modules

Hands-on:

Create variables using let and const, create multi line strings with template literals, use spread and rest operators with functions, pull values for arrays and objects using destructuring, create arrow functions, create promises and generators for better async programming.

Learning Objective:

Understand how react makes things perform, learn how to set up, run and debug a react app.

  • What is React?
  • Why React?
  • React version history
  • React 16 vs React 15
  • Just React - Hello World
  • Using create-react-app
  • Anatomy of react project
  • Running the app
  • Debugging first react app

Hands-on:

Install create-react-app and create a new react project.

Learning Objective:

Understand the significance of JSX and know its syntax and features.

  • Working with React.createElement
  • Expressions
  • Using logical operators
  • Specifying attributes
  • Specifying children

Hands-on:

Create JSX expressions with different javascript expression, apply css via className and styles, use conditonals.

Learning Objective:

Understand the significance of component architecture and learn how to decompose UI into components and compose them back to make UI.

  • Significance of component architecture
  • Types of components
  • Functional
  • Class based
  • Pure
  • Component Composition

Hands-on:

Create class based and functional components.

Learning Objective:

Learn how to manage state in class based react components and how to make communication between components using props.

  • What is state and it significance
  • Read state and set state
  • Passing data to component using props
  • Validating props using propTypes
  • Supplying default values to props using defaultProps

Hands-on:

Create a stateful component and stateless component.
Pass data from parent component to child component using props.
Implement child to parent communication using callbacks.

Learning Objective:

Learn how to render lists and use key prop.

  • Using react key prop
  • Using map function to iterate on arrays to generate elements

Hands-on:

Create component which renders lists iteratively using map function of array.

Learning Objective:

Learn about React's synthetic event system and its working.

  • Understanding React event system
  • Understanding Synthetic event
  • Passing arguments to event handlers

Hands-on:

Handle different synthetic events.

Learning Objective:

Understand the significance of lifecycle methods and application in realtime use cases.

Hands-on:

Create a stateful component and implement lifecycle methods.

Learning Objective:

Understand how to handle forms in react.

  • Controlled components
  • Uncontrolled components
  • Understand the significance to defaultValue prop
  • Using react ref prop to get access to DOM element

Hands-on:

Create a component that uses different form controls.

Learning Objective:

Understand the significance of routing, configure routing for SPA.

  • Setting up react router
  • Understand routing in single page applications
  • Working with BrowserRouter and HashRouter components
  • Configuring route with Route component
  • Using Switch component to define routing rules
  • Making routes dynamic using route params
  • Working with nested routes
  • Navigating to pages using Link and NavLink component
  • Redirect routes using Redirect Component
  • Using Prompt component to get consent of user for navigation
  • Path less Route to handle failed matches

Hands-on:

Install and setup router, configure routing rules, implement declarative and imperative navigation.

Learning Objective:

Understand the how to manage state in just redux in plain vanilla JS app.

  • What is redux
  • Why redux
  • Redux principles
  • Install and setup redux
  • Creating actions, reducer and store

Hands-on:

Create actions, reducer and store. Dispatch actions and subscribe to store changes.

Learning Objective:

Understand the challenges of mutability and how immutable js helps over the mutability challenges.

  • What is Immutable.js?
  • Immutable collections
  • Lists
  • Maps
  • Sets

Hands-on:

Create immutable List, map and set. Perform CRUD operations.

Learning Objective:

Understand how to integrate redux into react application.

  • What is React Redux
  • Why React Redux
  • Install and setup
  • Presentational vs Container components
  • Understand high order component
  • Understanding mapStateToProps and mapDispatchtToProps usage

Hands-on:

Install and setup react redux
Configure Provider componet as top level component
Migrate react stateful component to connected component.

Learning Objective:

Understand the significance of middleware and learn how saga middleware works.

  • Why redux middleware
  • Available redux middleware choices
  • What is redux saga
  • Install and setup redux saga
  • Working with Saga helpers
  • Sagas vs promises

Hands-on:

Install and setup logger and saga middleware
Develop sagas use different side effects
Code sagas to fetch data from remote API using fetch/axios.

Learning Objective:

Understand significance of UI testing and learn how to unit test components, reducers using jest and enzyme.

  • Understand the significance of unit testing
  • Understand unit testing jargon and tools
  • Unit testing react components with Jest
  • Unit testing react components with enzyme

Hands-on:

Understand jest configuration
Install and setup enzyme
Write unit test to components and reducers.

Learning Objective:

Learn how to handle exceptions in components.

  • Understand error boundaries (new in react 16)

Hands-on:

Create a Error Boundary Component and integrate with existing components.

Learning Objective:

Understand the significance of Webpack and learn how to set up a react project from scratch.

  • What is webpack
  • Why webpack
  • Install and setup webpack
  • Working with webpack configuration file
  • Working with loaders
  • Quick word on code splitting, lazy loading, tree shaking
  • Setting up Hot Module Replacement

Hands-on:

Install and Setup webpack v4
Create a react boilerplate from scratch.

Learning Objective:

Understand the significance of isomorphic react and setup SSR.

  • What is server-side rendering (SSR)?
  • Why SSR
  • Working with renderToString and renderToStaticMarkup methods

Hands-on:

Extend the react boilerplate to enable SSR
Develop express JS app to serve SSR powered react app.

Project

Title: E-Store

Use your skills of react, redux and redux saga to build an e-commerce application that sells electronic products online.

Title: Bookpedia

Use your skills of react, redux and redux saga to build an application that provides details of famous books in multiple genres - a mini project like wikipedia but limited to book details.

reviews on our popular courses

Review image

The trainer was really helpful and completed the syllabus on time and also provided live examples which helped me to remember the concepts. Now, I am in the process of completing the certification. Overall good experience.

Vito Dapice

Data Quality Manager
Attended PMP® Certification workshop in May 2018
Review image

All my questions were answered clearly with examples. I really enjoyed the training session and extremely satisfied with the training session. Looking forward to similar interesting sessions. I trust KnowledgeHut for its interactive training sessions and I recommend you also.

Christean Haynes

Senior Web Developer
Attended PMP® Certification workshop in May 2018
Review image

The instructor was very knowledgeable, the course was structured very well. I would like to sincerely thank the customer support team for extending their support at every step. They were always ready to help and supported throughout the process.

Astrid Corduas

Telecommunications Specialist
Attended Agile and Scrum workshop in May 2018
Review image

The course material was designed very well. It was one of the best workshops I have ever seen in my career. Knowledgehut is a great place to learn and earn new skills. The certificate which I have received after my course helped me get a great job offer. Totally, the training session was worth investing.

Hillie Takata

Senior Systems Software Enginee
Attended Agile and Scrum workshop in May 2018
Review image

I liked the way KnowledgeHut course got structured. My trainer took really interesting sessions which helped me to understand the concepts clearly. I would like to thank my trainer for his guidance.

Barton Fonseka

Information Security Analyst.
Attended PMP® Certification workshop in May 2018
Review image

Trainer at KnowledgeHut made sure to address all my doubts clearly. I was really impressed with the training and I was able to learn a lot of new things. It was a great platform to learn.

Meg Gomes casseres

Database Administrator.
Attended PMP® Certification workshop in May 2018
Review image

The trainer took a practical session which is supporting me in my daily work. I learned many things in that session with live examples.  The study materials are relevant and easy to understand and have been a really good support. I also liked the way the customer support team addressed every issue.

Marta Fitts

Network Engineer
Attended PMP® Certification workshop in May 2018
Review image

I was totally surprised by the teaching methods followed by Knowledgehut. The trainer gave us tips and tricks throughout the training session. Training session changed my way of life. The best thing is that I missed a few of the topics even then I have thought those topics in the next day such a down to earth person was the trainer.

Archibold Corduas

Senior Web Administrator
Attended Certified ScrumMaster®(CSM) workshop in May 2018

Faq

The Course

Graphic user interfaces have changed the way businesses and individuals use computers. And among the frameworks that are dominating the graphic user interface build space is React. Developed in the labs of Facebook, React is among the most important skills you need to have if you are planning on developing a career as a front end developer. While average salaries are in the range of $112,125 per year, experienced React developers can earn up to $190,613

Annually, as per data from Neuvoo. This is the right time to get into the React space and KnowledgeHut will help you gain a stronghold in the framework through this hands-on and thorough course.

    You will:

  • Get basic knowledge on ES6
  • Be proficient with React & redux features

By the end of the course, you will have:

  • Completed several hands-on examples, 2 course projects which gives you basic to immediate skills of React
  • Prepared yourself with the foundational knowledge you need to begin a career of continuous learning

Participants will benefit if they have basic HTML & CSS3 knowledge along with intermediate JavaScript skills.

Yes, KnowledgeHut offers this training online.

On successful completion of the course you will receive a course completion certificate issued by KnowledgeHut.

Your instructors are Web development experts who have years of industry experience.

Finance Related

Any registration cancelled within 48 hours of the initial registration will be refunded in FULL (please note that all cancellations will incur a 5% deduction in the refunded amount due to transactional costs applicable while refunding) Refunds will be processed within 30 days of receipt of written request for refund. Kindly go through our Refund Policy for more details: http://www.knowledgehut.com/refund

KnowledgeHut offers a 100% money back guarantee if the candidate withdraws from the course right after the first session. To learn more about the 100% refund policy, visit our Refund Policy.

The Remote Experience

In an online classroom, students can log in at the scheduled time to a live learning environment which is led by an instructor. You can interact, communicate, view and discuss presentations, and engage with learning resources while working in groups, all in an online setting. Our instructors use an extensive set of collaboration tools and techniques which improves your online training experience.

Once you register for the course you will be provided with system requirements and lab setup document which contains detailed information to prepare the environment for the course

Have More Questions?