online course
Diving into React and Redux:
from basics to PRO
Learn how to create dynamic interfaces and manage data effectively by developing your own projects from scratch.
online course
24/7 access to the platform
$3200 per month - developer salary after the course
76% of course participants found a job
What is React and what is it for?
Use React to create modern front-end applications
React allows you to develop interactive and high-performance user interfaces using a component-based approach, making the code modular, reusable, and easy to maintain.
Use Redux for state management in your application
Redux helps you manage your application’s state centrally, simplifying data handling and ensuring predictable changes, which is especially useful in complex projects.
Use REST API to access server data
REST API enables interaction with the server to get, send, and update data, making the application dynamic and integrated with backend systems.
Use hooks - React Hooks
React Hooks give you the ability to use state and other React features without writing classes, which simplifies the code and makes it more readable and compact.
Course program
Module 1 Introduction
About this course What is React? Your first React app Setting up the development environment How to download the example code Modern JS and its versions
Module 2 ECMAScript
Introduction - how to use this section? Keywords let and const Arrow functions Default parameters Rest parameter Spread operator for arrays Object destructuring Array destructuring Template strings Objects Object Spread operator Prototypes Classes
Module 3 Basics of React
What our first project will be Creating an empty React project React elements React components JSX Exercise - Code Review 1 React project structure (part 1) Props - component properties Arrays as component properties Collections and keys How to import CSS React project structure - part 2
Module 4 State of components and event handling
Class components Event handling State - the state of a React component How setState() works Updating state that depends on previous state Custom events setState() - removing an element setState() - adding an element Data in a React application setState() - editing elements Working with forms Controlled components
Module 5 Finishing the Todo App
How to use this section Implementing search Implementing filters
Module 6 Working with the server
What will our next project be? New address for the SWAPI service Creating an empty project Choosing an HTTP API for the browser How the Fetch API works Error handling in Fetch API Creating a client for the API Creating StarDB components A component that fetches data from the API Transforming API data Creating a loading indicator Loading indicator logic Handling network errors in the component Working with API - conclusions
Module 7 Component lifecycle
Why do components need a "lifecycle"? Lifecycle methods componentDidMount() Using componentDidMount() in practice componentDidUpdate() Using componentDidUpdate() in practice componentWillUnmount() Using componentDidCatch() in practice componentDidCatch()
Module 8 React Patterns
React Patterns - Introduction Using Functions Render Functions Element Props Children Practice - Refactoring a Component Working with props.children Cloning Elements Higher-Order Components (HOC) Refactoring Components Composition of Higher-Order Components Context Using the Context API Using HOC to Work with Context Transforming Props in Higher-Order Components Updating Context Refactoring: Cleaning Up Code Refactoring Higher-Order Components (Optional Lesson) compose() Function (Optional Lesson) defaultProps Property propTypes Property NPM - Installing Additional Packages prop-types Libraries
Module 9 React Hooks
What are React Hooks New Project useState() useContext() useEffect() useEffect() - Exercises Using useEffect() for Data Fetching Creating Custom Hooks useCallback() and useMemo() Rules and Limitations of Hooks
Module 10 React-Router
What is Routing Basics of react-router Link How Route Works Dynamic Paths withRouter Relative Paths Optional Parameters Authorization and "Protected" Pages Switch (Handling Non-existent Addresses)
Module 11 Redux
Introduction to Redux Installing Libraries Reducer Redux Store Pure Functions UI for Redux Actions with Parameters Action Creator Project Structure bindActionCreators() Using React and Redux react-redux and the connect() Function mapDispatchToProps() mapDispatchToProps as an Object
Module 12 Redux application development
Our next project Project Initialization Project structure react+redux Supporting components Redux components React-Redux application framework Routing Reading data from Redux Store Sending actions to Redux Store (action dispatch) Styles (optional video) Working with asynchronous data Differences between setState() and reducer Error handling mapDispatchToProps: ownProps argument Naming Convention for actions Container Components Connecting a new component to Redux Redux: adding elements to an array Redux: update elements in an array Redux: removing items from an array Organizing reducer code Store Enhancers Middleware Thunk Next Steps
Module 13 Building React Applications - Babel
Building a React application Create a new project Install Babel Babel plugins Babel Configuration (.babelrc) Babel Presets Optimize the build for specific browsers Dynamic browser selection (browserslist) Configuration files browserslist Polyfills Working with JSX Dependency Organization
Module 14 Building React Applications - WebPack
What is WebPack Installing WebPack WebPack configuration file Webpack Loader Loader configuration Loaders for different file types React and Babel Loader Loader composition CSS preprocessors. Sass. Simplifying webpack.config.js syntax Plugins HtmlWebpackPlugin: using templates Mini CSS Extract Plugin Wepback Dev Server Configuration for production
Reviews
Martin
Loved the course. Very correct presentation of the material, starting from the very basics of javascript. As a developer, I can immediately see that the authors have experience in real projects and plus they can consistently explain what comes from where and what is needed for what
Oleg
“Great course for understanding React+Redux. The quality and presentation of the material is top notch. I finally understood many aspects of JS as well as the framework itself. Thank you!!!
Saveliy
The course is just fire! The presentation of material is so accessible that even complex topics become understandable. Practical assignments help to consolidate knowledge, and examples from real projects show how to apply React and Redux in work. I'm very glad I chose this course!
Max
The course is perfect for both beginners and those who are already familiar with JavaScript. Everything is explained from scratch, yet without too much water. I finally got a handle on components, state, and Redux. The practice after each lesson helps to apply the knowledge immediately. Very satisfied with the result!
We have developed a flexible tariff system
Corporate
Free
  • 1 modules
  • No feedback
  • Open Access
  • Without certificate
checkout
Basic
$12
  • 3 modules
  • Access to general chat with mentors
  • Access 6 months
  • Without certificate
checkout
Medium
$44
  • 10 modules
  • Access to general chat with mentors
  • Access 12 months
  • Certificate
checkout
Advanced
$68
  • 14 modules
  • Mentor feedback
  • Access 18 months
  • Certificate
checkout
Corporate
$400
  • Groups of 5 or more
  • 10 modules
  • Access to group chat
  • Feedback from mentors
  • Access 12 months
  • Certificate
checkout
Course experts
Alexey Petrov
Lead Frontend Developer | Author of React and Vue.js courses | Specializes in creating high-load web applications. Over 12 years of experience. Worked with Angular, React, Vue.js, Next.js and GraphQL.
Ekaterina Smirnova
Senior Software Engineer | Expert in front-end development | She has participated in creating interactive interfaces for educational platforms and CRM-systems. Her projects have been implemented in large companies, including corporations from the USA and Germany. More than 9 years of experience. She has worked with React, Redux, TypeScript, Webpack and Node.js.
Return Guarantee
We remain flexible to suit your needs. That's why we guarantee a full refund if you change your mind within three days.
Questions
How long does it take to study?
You can study at your own pace, there is no time limit.
How much time do you recommend spending per week?
We recommend 5-10 hours per week. This is the best way to complete the course.
I am a beginner and have never created a website before. Will this course be suitable for me?
You need a basic understanding of JavaScript, CSS, and HTML to get started.
Am I confident that I can understand the technology?
Yes, you will definitely be able to do it. The course material is presented in a clear and structured way, which will allow you to master all the intricacies of the work step by step.