An introductory course to building your first universal React app. Starting with an introduction to React, and then getting familiar with the invaluable React toolkit - Create React App, we'll then walk you through the steps of creating a universal React blog app from scratch.

Build Your Own React Universal Blog App

Preface

Wait, what is React?

Now that we know the theory and background behind React, let’s get our hands dirty with the traditional Hello World example project. We'll use CodePen for this project, and you can click on any of the images below to be transported to the online demo. Or code along in your favorite text editor - some screenshots here use Visual Studio Code. .

Hello, World

Today, let's take a look at Create React App, a toolkit that makes starting a new React project simple. We'll actually get more in-depth in our project and build it out ourselves, but it's good to know how the tool works and how it can help you.

Create React App

We've covered the easy way to set up a React app with Create React App, but now we'll delve into a more in-depth method to aid understanding of how React apps, and universal React apps, are structured and function.

Now, Let&#39;s Build Our App

First, let’s set up our webpack configuration file by editing the file webpack.config.js :

Time to Meet Webpack

Today, it's all about components. There are some long stretches of code here, but it's not complicated, I promise!

Components

As we add more pages and content to our blog, our routes.js file will quickly become big. Since it’s one of React’s guiding principles to break things up into smaller, manageable pieces, let’s separate our routes into different files.

Preparing to Add Content to Our React Universal Blog App

The AppDispatcher is the operator in our application that accepts information from the higher-level components and distributes actions to the store, which then re-renders our application data.

AppDispatcher

Now that we have most of our React components and Flux architecture set up, let’s finish up by editing our app-server.js file to render everything in server-side production. This file will have the following code:

Community Questions