AI-powered learning
Save this course
Learn React.js, Redux & Immutable.js while building a weather app
Gain insights into building a weather app with React, Redux, Immutable.js, and Jest. Learn about their problems and solutions, enhancing your app's performance and testing capabilities.
26 Lessons
4h
Updated today
Join 2.9 million developers at
Join 2.9 million developers at
LEARNING OBJECTIVES
- Build a React weather app using JSX, components, props, and local state
- Fetch and display OpenWeatherMap data by constructing safe requests with encodeURIComponent
- Create interactive forecast graphs in React using Plotly.js and a reusable Plot component
- Handle Plotly graph click events to update state and render selected temperature details
- Implement Redux actions, reducers, and React bindings to manage global app state predictably
- Use redux-thunk to move async data fetching into Redux action creators
- Write Jest tests for Redux actions, reducers, and React components (including snapshots)
Learning Roadmap
1.
1. React basics
1. React basics
Get familiar with React basics, reusable components, and JSX for dynamic web development.
2.
2. Your first React app
2. Your first React app
Get started with building a React weather app, managing state, and fetching API data.
3.
3. Creating a forecast graph
3. Creating a forecast graph
4 Lessons
4 Lessons
Work your way through creating dynamic forecast graphs in React using Plotly.js.
4.
4. State Management
4. State Management
4 Lessons
4 Lessons
Grasp the fundamentals of state management with Flux, Redux, and Redux-Thunk.
5.
5. ImmutableJS
5. ImmutableJS
4 Lessons
4 Lessons
Enhance React app performance using ImmutableJS for predictable and efficient state management.
6.
6. Testing
6. Testing
6 Lessons
6 Lessons
Follow the process of running, testing, and verifying a React weather app.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Complete more lessons to unlock your certificate
Developed by MAANG Engineers
ABOUT THIS COURSE
I'm Max Stoiber (@mxstbr) - the creator of react-boilerplate, one of the most popular react starter kits (10K+ stars on github).
I'll teach you how to build a real-world application using React, Redux and Immutable.js. We will use interactive playgrounds to create our app from scratch (no setup required).
The course can be divided into 4 logical parts:
1. React: Understand what is React and what problem it solves. We'll build our first weather app using just React.
2. Redux: Identify potential issues in our React app and learn how Redux & Redux-Thunk can solve those issues.
3. Immutable.js: Learn Immutable.js and how it can help in making our Redux apps performant.
4. Jest: Lastly, we will learn how to test our React/Redux app using Jest.
If you are going to build a production app, chances are that you are going to use all of the above technologies so let's get started.
* Understanding of Javascript is required.
** Understanding of ES6 (let/const, arrow functions etc.) would be beneficial.
ABOUT THE AUTHOR
Max Stoiber
Max is the technical cofounder of Spectrum.chat. He makes styled-components, react-boilerplate, KeystoneJS and micro-analytics.
Trusted by 2.9 million developers working at companies
A
Anthony Walker
@_webarchitect_
E
Evan Dunbar
ML Engineer
S
Software Developer
Carlos Matias La Borde
S
Souvik Kundu
Front-end Developer
V
Vinay Krishnaiah
Software Developer
Built for 10x Developers
No Passive Learning
Learn by building with project-based lessons and in-browser code editor
Personalized Roadmaps
The platform adapts to your strengths & skills gaps as you go
Future-proof Your Career
Get hands-on with in-demand skills
AI Code Mentor
Write better code with AI feedback, smart debugging, and "Ask AI"
MAANG+ Interview Prep
AI Mock Interviews simulate every technical loop at top companies
Free Resources
