• Stars
    star
    932
  • Rank 49,020 (Top 1.0 %)
  • Language
    CSS
  • Created over 8 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

100 Days of React UI Interfaces - https://codepen.io/collection/DoLZRm/4/

React Daily UI Dolpins

A collection of React apps built by Jack Oliver and blogged by Sophia Shoemaker and the Fullstack React team.

Check out the full CodePen collection here.

We are excited to be partnering with Jack Oliver, a designer and developer who is embarking on an ambitious project to create 100 React UI components in 100 days.

In the series, we will be taking Jack Oliver's code and design and desconstructing them to give you a step-by-step picture of how all the pieces fit together and hopefully inspire you to write some React code of your own.

Days

Day Preview Description Blog
001 Create a sign-up form βœ… 🐬 ➑️
002 Checkout form βœ… 🐬 ➑️
003 Netflix Landing Page βœ… 🐬 ➑️
004 3D Calculator βœ… 🐬 ➑️
005 Weather App Icon βœ… 🐬 ➑️
006 Profile Page βœ… 🐬 ➑️
007 Reactagram βœ… 🐬 ➑️

Instructions

All of Jack Oliver's original designs and code are hosted on Codepen. For the purposes of this blog series, we have created this Github repository containing all the code for each daily component.

We've used the create-react-app tool to set up our environment. To run the code cd into each individual folder and run the following commands:

  1. npm install will install all the libraries you'll need to get each Daily UI running.

  2. npm start compiles all of your files and boots up a dev server. Browse to localhost:3000 to find your application running.

Prerequisites

You'll need to have node and npm installed on your machine to run the commands. Head over to the node.js website and download the neccessary files to get those installed.

Authors

This series is a joint effort between:

Contributing

git clone https://github.com/fullstackreact/react-daily-ui.git
cd react-daily-ui

Fullstack React Book

Fullstack React Book

This React Daily UI repository was built alongside the React Daily UI blog series.

This repo was written and is maintained by the Fullstack React team. In the book we cover many more projects like this. We walk through each line of code, explain why it's there and how it works.

This collection React application only a sample of what our book offers. If you're looking to learn React, there's no faster way than by spending a few hours with the Fullstack React book.