---
title: Learn React Fundamentals 🆓 and Advanced Patterns ⚛️ 🎁
date: 2017-12-04
description:
  Two and a half hours of new beginner (free) and advanced React material are
  now available egghead.io!
meta:
  keywords:
    - react
    - javascript
bannerCloudinaryId: kentcdodds.com/content/blog/learn-react-fundamentals-and-advanced-patterns/banner
bannerCredit: Artwork for egghead.io is created by the amazing
  [Maggie_Appleton](https://twitter.com/Mappletons)
---

I couldn't be more excited to introduce you to what I can call my best work to
date: Two new video courses available now on [egghead.io](http://egghead.io)!
The beginner material is **free forever** and the advanced stuff is worth a
subscription so I encourage you to give them a look!

### [The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-reactjs)

https://youtu.be/6JMIEhX-r1c

1.  [Introduction to The Beginner's Guide to ReactJS](https://egghead.io/lessons/react-introduction-to-the-beginner-s-guide-to-reactjs)
    (2:07)
2.  [Write Hello World with raw React APIs](https://egghead.io/lessons/react-write-hello-world-with-raw-react-apis)
    (3:24)
3.  [Use JSX with React](https://egghead.io/lessons/react-use-jsx-with-react)
    (5:48)
4.  [Create Custom React Components](https://egghead.io/lessons/react-create-custom-react-components)
    (5:15)
5.  [Validate Custom React Component Props with PropTypes](https://egghead.io/lessons/react-validate-custom-react-component-props-with-proptypes)
    (3:30)
6.  [Conditionally Render A React Component](https://egghead.io/lessons/egghead-conditionally-render-a-react-component)
    (2:43)
7.  [Rerender a React Application](https://egghead.io/lessons/react-rerender-a-react-application)
    (3:17)
8.  [Style React Components](https://egghead.io/lessons/react-style-react-components)
    (5:36)
9.  [Use Event Handlers with React](https://egghead.io/lessons/egghead-use-event-handlers-with-react)
    (3:42)
10. [Use Component State with React](https://egghead.io/lessons/react-use-component-state-with-react)
    (7:09)
11. [Stop Memory Leaks with componentWillUnmount Lifecycle Method in React](https://egghead.io/lessons/react-stop-memory-leaks-with-componentwillunmount-lifecycle-method-in-react)(1:14)
12. [Use Class Components with React](https://egghead.io/lessons/egghead-use-class-components-with-react)
    (4:16)
13. [Manipulate the DOM with React refs](https://egghead.io/lessons/egghead-manipulate-the-dom-with-react-refs)
    (2:23)
14. [Make Basic Forms with React](https://egghead.io/lessons/egghead-make-basic-forms-with-react)
    (3:35)
15. [Make Dynamic Forms with React](https://egghead.io/lessons/egghead-make-dynamic-forms-with-react)
    (3:42)
16. [Controlling Form Values with React](https://egghead.io/lessons/egghead-controlling-form-values-with-react)
    (8:48)
17. [Use the key prop when Rendering a List with React](https://egghead.io/lessons/egghead-use-the-key-prop-when-rendering-a-list-with-react)
    (4:29)
18. [Make HTTP Requests with React](https://egghead.io/lessons/egghead-make-http-requests-with-react)
    (3:29)
19. [Build and deploy a React Application](https://egghead.io/lessons/egghead-build-and-deploy-a-react-application)
    (3:02)

This course is for [React](https://reactjs.org) newbies and those looking to get
a better understanding of React fundamentals. With a focus on React
fundamentals, you'll come out of this course knowing what problems React can
solve for you and how it goes about solving those problems. You will have a good
grasp on what JSX is and how it translates to regular JavaScript function calls
and objects.

Each lesson in this course is just a single `index.html` file which will help
you **keep your focus on learning React and not distracted by all the tools that
make production applications work.** The course wraps up with a lesson on how to
move from these `index.html` files to a more production ready development
environment and even how to deploy your app to a great service like
[Netlify](https://www.netlify.com).

[Enjoy!](https://egghead.io/courses/the-beginner-s-guide-to-reactjs)

### [Advanced React Component Patterns](https://egghead.io/courses/advanced-react-component-patterns)

https://youtu.be/0aDl0ercM5I

1.  [Introducing Advanced React Component Patterns](https://egghead.io/lessons/react-introducing-advanced-react-component-patterns)
    (1:44)
2.  [Build a Toggle Component](https://egghead.io/lessons/react-build-a-toggle-component)
    (2:01)
3.  [Write Compound Components](https://egghead.io/lessons/react-write-compound-components)
    (4:06)
4.  [Make Compound React Components Flexible](https://egghead.io/lessons/react-make-compound-react-components-flexible)
    (4:01)
5.  [Make Enhanced React Components with Higher Order Components](https://egghead.io/lessons/react-make-enhanced-react-components-with-higher-order-components)
    (3:22)
6.  [Handle prop namespace clashes with Higher Order Components](https://egghead.io/lessons/react-handle-prop-namespace-clashes-with-higher-order-components)
    (3:47)
7.  [Improve debuggability of Higher Order Components](https://egghead.io/lessons/react-improve-debuggability-of-higher-order-components)
    (4:43)
8.  [Handle ref props with Higher Order Components](https://egghead.io/lessons/react-handle-ref-props-with-higher-order-components)
    (2:54)
9.  [Improve Unit Testability of Higher Order Components](https://egghead.io/lessons/react-improve-unit-testability-of-higher-order-components)
    (2:45)
10. [Handle static properties properly with Higher Order Components](https://egghead.io/lessons/react-handle-static-properties-properly-with-higher-order-components)
    (3:02)
11. [Use Render Props with React](https://egghead.io/lessons/react-use-render-props-with-react)
    (5:25)
12. [Use Prop Collections with Render Props](https://egghead.io/lessons/react-use-prop-collections-with-render-props)
    (2:05)
13. [Use Prop Getters with Render Props](https://egghead.io/lessons/react-use-prop-getters-with-render-props)
    (6:12)
14. [Use Component State Initializers](https://egghead.io/lessons/react-use-component-state-initializers)
    (2:46)
15. [Make Controlled React Components with Control Props](https://egghead.io/lessons/react-make-controlled-react-components-with-control-props)
    (4:06)
16. [Implement a React Context Provider](https://egghead.io/lessons/react-implement-a-react-context-provider)
    (6:47)
17. [Implement a Higher Order Component with Render Props](https://egghead.io/lessons/react-implement-a-higher-order-component-with-render-props)
    (1:52)
18. [Rerender Descendants Through shouldComponentUpdate](https://egghead.io/lessons/react-rerender-descendants-through-shouldcomponentupdate)
    (3:19)
19. [Use Redux with Render Props](https://egghead.io/lessons/react-use-redux-with-render-props)
    (6:49)

The goal of this course is to give you the knowledge of advanced patterns you
can use to make React components that are more flexible, simpler, and more fun
to build, use, and maintain. We'll start with a simple `<Toggle />` component
which we'll progressively refactor to each of the patterns so you can see the
relative trade-offs of the patterns and how they can be used together to
increase the usefulness of your component while at the same time simplifying
things for everyone.

Having built and shipped components using each of these patterns, I'll help you
understand and weigh the tradeoffs of each of them and you'll come to
intuitively know where to apply each pattern in your own components. When you're
finished with this course, hopefully you'll have a list of actionable things you
can do to rework the components that you're building to make them more flexible,
simpler, and more fun to build, use, and maintain.

[Enjoy!](https://egghead.io/courses/advanced-react-component-patterns)

### Free! 🤑

[The Beginner's course](https://egghead.io/courses/the-beginner-s-guide-to-reactjs)
is joining the ever growing [egghead.io](http://egghead.io)
"[Community Resources](https://egghead.io/community/resources)" which means
**_it will be free forever_**! I'm totally amazed by egghead and all the free
stuff they sponsor. Thank you egghead!!

[The Advanced course](https://egghead.io/courses/advanced-react-component-patterns)
was free for a week but is now used to fund egghead's community resources by
converting to subscriber-only content. Now's the best time to get a pro account.
egghead very rarely does sales, but it's running one right now! For a limited
time, you can get an egghead subscription for 30% off. **See**
[**egghead.io/gifts**](https://egghead.io/gifts) **for more information.**

### Reactions

I've made [a twitter moment](https://twitter.com/i/moments/939148994017509376)
with some reactions to the courses. Here are some of my personal favorites:

https://twitter.com/AndrewDelPrete/status/937710527123296256

https://twitter.com/leoijebor/status/937774376812007424

https://twitter.com/dissimile/status/938175229930680320

https://twitter.com/MichelleJLevine/status/938460230756614149

https://twitter.com/rossipedia/status/938468582756728833

https://twitter.com/john_d_pelingo/status/938563707914850304

https://twitter.com/andrejpk/status/938620711979143168

https://twitter.com/tim_shane/status/938833014733369345

https://twitter.com/deen_john/status/938842329443590144

https://twitter.com/afrocode_/status/938870873855004673

https://twitter.com/jspengy/status/938899609925160960

https://twitter.com/HozefaJ/status/939038622157750273

I'm really excited by all these positive responses! Thanks everyone!

### Conclusion

I can't tell you how excited I am for you to watch these things! If you learn
anything or enjoy the courses, I would ask you to do any of the following:

1.  [Become an egghead.io subscriber](https://egghead.io/pricing) to help
    support the community resources _and_ get access to the 2500+ videos already
    on there!
2.  [Tweet this blog post](https://twitter.com/intent/tweet?text=🎁⚛️%20“Learn%20React%20Fundamentals%20and%20Advanced%20Patterns”%20by%20@kentcdodds%20https://kentcdodds.com/blog/learn-react-fundamentals-and-advanced-patterns%20🎁⚛️)!
    Or
    [retweet my tweet](https://twitter.com/kentcdodds/status/937686244045176832)
    about it :)
3.  Upvote and discuss this blog post and the courses
    [on Reddit](https://www.reddit.com/r/reactjs/comments/7hq91g/learn_react_fundamentals_and_advanced_patterns)
4.  [Follow me on twitter](https://twitter.com/kentcdodds) to keep up with what
    I work on next
5.  [Subscribe to my weekly newsletter 💌](http://kcd.im/news)
6.  Write a blog post about your experience watching my courses!

https://twitter.com/kentcdodds/status/937686244045176832

Thanks everyone! And Merry Christmas! 🎁 🎄
