Information Technology
Hands on Training icon
Hands On Training
Hands on Training icon

React, Redux & Material UI Workshop for Beginners

Course Cover

5

(1)

compare button icon
Offer Percent Icon

1 Coupon Available

Login To View All

Course Features

icon

Duration

3.39 hours

icon

Delivery Method

Online

icon

Available on

Lifetime Access

icon

Accessibility

Desktop, Laptop

icon

Language

English

icon

Subtitles

English

icon

Level

Beginner

icon

Teaching Type

Self Paced

icon

Video Content

3.39 hours

Course Description

Are you a beginner to React, Redux or Material UI ?

Do you feel setting up redux saga, understanding and remembering it is difficult ?

Do you find it difficult to understand all the different pieces involved like Webpack, JSX and Transpilation ?

Are you confused about how to properly unit test React components using Jest ?

Do not worry, I have been there too.

So I decided to create a workshop for it in order to bring clarity to the absolute beginners who want to get started in just 1 day. You just need basic javascript knowledge to join the workshop

Skills can pay the bills.

The number of jobs for the trio combination of ( React, Redux, Material UI ) has increased and they are demanding skills to have in your CV in 2021.

The fact is, not everyone can easily understand and start building projects with React and use Redux with Material UI right away. But as a beginner, you will need a bit of push. Online documentation is great. I do not deny it. But with my hands on experience, I believe I can help you give that initial push.

Code with me and learn how to bootstrap without generators.

AGENDA

Introduction to React and Redux.

Redux devtools.

Introduction to Material UI.

Understanding concepts like JSX, Babel and Webpack.

Learn about JSS, Virtual DOM and NPM.

Best practices for UI design for beginners.

PROJECT DETAILS

We will build a sophisticated Todo app

Understand React concepts as we build the app

We will use React hooks to build the app.

Material UI components and appropriate usage.

App state finalisation and discussion.

Redux Saga set up for the app from scratch.

Project structure explanation.

Introduction to unit testing using Jest.

Write few unit tests.

You will be able to download

Full project source code

We will be using concepts like react hooks, redux set up, refs, material components and state persistence while building this React app and than give you the source code for future reference. You can use this as a bootstrap while working on your office projects and quickly configure stuff. Say No to StackOverflow for things that you can remember. This saves you time to focus on the core logic in your projects.

Unit testing with Jest

Unit testing the redux state of a react component is so critical because the reducer function dictates the behaviour of your app simply because it controls the entire state.

Mocking external libraries and exports are crucial during testing because we are interested to verify only our code changes.

In order to achieve this, we will make use of jest mock fn( ) to bypass the undesired portions of the code and make sure our redux reducer is stable and protected from future code changes which may introduce potential damage.

I hope you like the workshop.

Warm regards,

Manoj

Course Overview

projects-img

Post Course Interactions

projects-img

Hands-On Training,Instructor-Moderated Discussions

projects-img

Case Studies, Captstone Projects

Skills You Will Gain

Prerequisites/Requirements

Basic knowledge of Javascript

Basic knowledge of Javascript

What You Will Learn

Create a Todo app from scratch with React

Setup Redux-Saga in the application

Use Material UI components to build the app

State persistence for the redux store

Course Instructors

Author Image

Manoj Satishkumar

Instructor

I have a decade of experience in building professional websites and front-end applications.I love the javascript ecosystem and I have designed & developed multiple products in my career.I have worked...
Course Cover
Offer Percent Icon

1 Coupon Available
Get upto 50% Discount