- Master React JS components with Redux actions in Flux. Yarn, React Redux, Redux Thunk Reactjs, React.js test renderer
- Free tutorial
- Rating: 3.8 out of 53.8 (374 ratings)
- 33,285 students
- 2hr 6min of on-demand video
- Created by Mateusz Grzesiukiewicz
- English
What you’ll learn
- Create reusable stateless and easily testable components
- Create pure & easily testable action handlers (reducers)
- Connect stateless views with stateless reducers through React containers
- Refactor applications to be more testable and reusable (decoupled)
- Understand React Flux architecture and how to connect all the bits
Requirements
- Basic Javascript knowledge (with ES6 syntax)
- Web development basics like HTML structure, DOM tree
- I will assume you know what React is, and preferably created at least one application
- I will also assume you know Components, JSX, ES6 syntax and understand the data flow in React
Description
Interested in building applications that scale well, are bug free and easy to maintain?
This is a course for you. I will show you how to write reusable React and Redux code.
React is the library that modern Javascript developers need to know. Truly knowing how to write reusable React JS views and Redux reducers will get you a job, and enable you to build quality frontend applications.
Important: This course is concise and focuses on the ability to write decoupled React.js & Redux code.
All videos are professionally edited for your convenience.
Who this course is for:
- Those with Javascript skills who want to learn React library and start with good practices
- Experienced React developers who struggle to maintain their projects
- Anyone who strives to write reusable code using modern Javascript libraries
- Redux users who embrace Flux architecture but use other library for Views than React
- Those who struggle to write easily testable React or Redux code
Show less
Course content
6 sections • 33 lectures • 16h 9m total lengthCollapse all sections
#1: Introduction and source code deep dive3 lectures • 11min
- Application introduction02:03
- Project setup01:19
- Deep dive into source code to refactor08:00
#2: Refactoring ES6 classes to React stateless components5 lectures • 23min
- Splitting into separate files09:18
- Refactoring to function syntax – Button & Digits components04:11
- Refactoring Operators & ControlPanel03:43
- Dealing with stateful component – Display03:15
- Making Display stateless02:49
#3: Decoupling React view from Redux store6 lectures • 31min
- Installing redux and adding redux store04:12
- Adding redux actions and action handlers08:55
- Important change to src/index.js00:13
- Remove event emitter dependency06:57
- History view refactor08:25
- Decoupling history from store02:38
#4: Refactoring to reusable Presentational Components using ReactRedux library6 lectures • 33min
- Digit container and digit presentational component07:47
- Redux Thunk to fix history issue07:16
- Refactoring History to presentational component04:54
- Container Higher Order Components (HOC) to access dispatch06:16
- Polishing components props to be more reusable04:07
- Delegate passing store to ReactRedux provider02:17
#5: Testing decoupled application4 lectures • 27min
- Smoke test and sanity test07:32
- Snapshot testing14:08
- Enzyme public tests03:28
- Test coverage reports02:13
Source Code Lectures9 lectures • 14hr 3min
- Source code – beginning05:49
- Source code – 2.201:40:45
- Source code – 2.501:44:54
- Source code – 3.101:45:01
- Source code – 3.501:44:11
- Source code – 4.101:44:34
- Source code – 4.201:44:54
- Source code – 4.501:45:18
- Source code – Course finish01:47:36
