Learn React with Short Daily Emails

Do you want to learn React, but are short on time? React Daily will send you a bite sized, 1 – 2 minute email everyday. The emails are designed to teach you in small chunks, and use spaced repetition to reinforce the most important topics.

Beginner

New to React or just getting started? Start here to learn the basics.

Powered by ConvertKit

Advanced

Already know React? Stay on top of the current trends and learn new topics here.

Powered by ConvertKit

Why Daily Emails?

I’ve talked to a lot of people recently who want to learn React, but don’t feel like they have enough time to devote to it. Whether you’re learning it for a side project, or want to add another skill to your resume, learning React can be great for your professional development… but it can also be daunting. I’ve designed these emails to start simple and build on each other so you can learn React doing what you already do everyday – just reading your email.

Sample Emails

Beginner Day 4

Components

React applications are broken into a series of components. A component is a bit of JavaScript code that outputs objects via a render method. Those objects are JavaScript representations of DOM elements.

Components can have more than just a render method; they will often have helper methods that calculate what to render. All components also have the concept of internal state. State (along with props) is how React handles user input. When a user interacts with React elements (clicking a button, submitting a form, etc), we define how those actions change the component’s state. That state change will then call the render method, which in turn changes the DOM.

Important Note: Never call the render method manually. It is always called automatically when a component’s props or state are updated. Later, you will learn how to force a render by calling the forceUpdate method, or how to avoid re-rendering a component by defining shouldComponentUpdate.

Advanced Day 7

CSS in JS

There are many ways to style components. Using className and standard CSS is a typical way to style React applications, but there are several difficulties at scale, including the fact that CSS has a global namespace, but is paradoxically difficult to share and reuse properly. These issues are addressed by a pattern called CSS in JS

We’ll investigate multiple CSS in JS patterns and libraries in the future. The first approach is: CSS Modules. Using this approach you can import css into your js files:

      import styles from "./style.css";
      

Compose selectors:

        .firstClass {
          background: blue;
        }

        .secondClass {
          composes: firstClass;
          color: yellow;
        }
        

And declare dependencies:

        .secondClass {
          composes: firstClass from "./style.css";
        }
        

Further Reading:
React CSS in JS
Comparison of CSS in JS techniques
Modular CSS with React

Can I just see all the emails at once?

No. There are several good options if you want to learn React from a course, tutorial, or eBook. Daily emails are different because they limit your exposure to too much information at once – and prevent the overwhelming feeling you might get when you learn a new topic.

Why did you build this?

In the past two months I’ve started a React meetup and released a React eBook. Through that process I’ve talked to a lot of beginners who want to learn React but don’t know where to begin, or who are overwhelmed by the amount of new things to learn. I built this to provide a free, simple resource to help them on that journey.

About the Author

Chris Achard

I’m a React and React Native consultant with 10 years of software development experience. I’ve been using React since the first week it was released by Facebook, and love using it for building user interfaces. I hope that by releasing this, I can help more people learn React. I also love helping out! Send me an email if you need help with React: chris@nanohop.com

Ready to Learn React?

Beginner

New to React or just getting started? Start here to learn the basics.

Powered by ConvertKit

Advanced

Already know React? Stay on top of the current trends and learn new topics here.

Powered by ConvertKit