Ever wonder how to create real UI components in React?

Below, we’ve made complete React component examples. For free.

BE NOTIFIED ABOUT NEW POSTS

Day 1

Sign Up Form

Build an animated sign-up form using ReactCSSTransitionGroup

Day 2

Checkout Form

Create a checkout form with credit card information

Day 3

Netflix Landing Page

Search for movies and TV shows with Netflix-like landing page

Day 4

Calculator

Learn how to use Yarn and the create-react-app command line tool

Day 5

App Icon

Use the `fetch` API to retrieve data and learn more about CSS transitions

Day 6

Profile Page

Convert an application from using `createClass` to using function components and class components

Day 7

Reactagram

Create an Instagram - like filter app using CSS filters and reusuable components

Day 8

404 Page with React Router

Learn how to create a 404 page with React Router v4

Day 9

A Music Player

Build a music player with some of the new features in React 16

Course Authors

Sophia Shoemaker

Sophia Shoemaker became addicted to React in 2014. She is a full stack developer but React is her technology of choice. She loves working on her pet project Shop Sifter and editing the Fullstack React Newsletter.

Recently, she became a mentor at Hackbright Academy and is excited to encourage and empower women looking to get involved in programming. When she isn't cobbling code, she can be found flying in her husband's Beechcraft Bonanza and playing with her 2 kids.

Connect with Sophia on Twitter at @wisecobbler.

Jack Oliver

Hi, I'm Jack! I'm a Developer & Designer living in Stockholm, Sweden. I've worked with super cool people; from Mercedes-Benz, Farfetch, NotOnTheHighStreet, and Mimecast, and am currently building cool stuff at Observify. Part-time photographer, full-time joker. I'm currently doing 100 days of React on Codepen check it out here.

Connect with me on twitter @mrjackolai.

Follow Along At Home

We’re releasing a new episode of React Daily UI every couple of weeks. Put in your email to be notified when as we release them.

input name="list" type="hidden" value="8924UeZ6gL8ZGppw4ViBRQ6Q"> No spam ever. Easy to unsubscribe.