React Daily UI

We are really 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 this series, we will be taking Jack Oliver's code and design and desconstructing them to give you a better picture of how all the pieces fit together and hopefully inspire you to write some React code of your own. The nice thing about React is that you don't necessarily need to create a whole new project just to use it, you can drop it into an existing project with a little effort and have a portion of your code now up and running with React.

A few housekeeping items

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

We've deviated slightly from Jack Oliver's set up. Codepen is great for testing out ideas or sharing concepts with other developers, but not necessarily the best approach for creating production-ready code. Rather than including script tags in our index.html file for each individual library we need, we've elected to use the create-react-app tool to set up our environment. The create-react-app tool uses Webpack to compile files and get you going.

If you aren't familiar with Webpack, that's ok, you don't need to be. create-react-app has done the heavy lifting for you. If you're familiar with Webpack and want to know what's going on "under the hood", you can create a new project using create-react-app and then run the npm eject command and you'll get a better picture of what is included. There are two basic commands that you will need to know for this series.

1. npm install will install all the files you'll need to get each Daily UI running.
2. npm start compiles all of your files and boots up a dev server (normally you will browse to localhost:3000 to find your application.

Prerequisites

JavaScript is essential to this series, if you don't know very much JavaScript, you should read up on that first before diving into React.

We are also going to assume you have some understanding of React and how it works. You don't need to have built anything with React per se, but you do need to have a basic knowledge of the technology.

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.

We are really excited to start this series and hope you will find it helpful! Without further ado, let's get started!