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 ?

Don't 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.

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 don't 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.

We will be using concepts like react hooks, redux setup, refs, material components & state persistence while building this React app and then 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.

Section 1: Welcome to the workshop

Video: A React Journey.

Section 2: Introduction to React

Video: What is React ?
Video: What is the "Virtual DOM" ?
Video: The JSX syntax
Video: Styling JSX elements with JSS
Video: Render components inside JSX
Video: Incremental bundle size of React apps
Video: A walkthrough of React website

Section 3: Introduction to Redux

Video: What is Redux ?
Video: Three principles of Redux
Video: Redux-Saga workflow
Video: A walkthrough of Redux official website
Video: Redux dev tools chrome extension

Section 4: Project MSK Todos - App design

Video: High level UI design
Video: Todo Item component design

Section 5: Let's write code and build the application

Article: Ready ... Steady .... Wait !
Video: Create the react app from scratch
Video: Installing dependencies
Video: Redux-Sage setup from scratch
Video: Material UI website walkthrough
Video: Let's add an AppBar on top
Video: Adding classes with MakeStyles
Video: Adding a New todo
Video: Marking Todo as completed
Video: Deleting todos
Video: Marking Todo as important
Video: TodoAdder component issues
Video: State persistence in browser

Section 6: Unit testing with JEST

Video: A walkthrough of JEST documentation
Video: Setting up JEST in the app
Video: Write few unit tests
Video: Generate coverage report

Section 7: The Project Source code

Video: Download the source code
Video: Congratulations on completing the workshop

Warm regards,

Manoj Satish Kumar

Manoj Satishkumar

React, Redux & Material UI workshop for Beginners