Building Universal Blog App using React
Building Universal Blog App using React

React Blog App by introducing Flux. … we could use it, together with Node.js, to build a React Universal Blog App

In this second and last part, we’ll take our blog to the next level by learning how to add and edit content. We’ll also get into the real meat of how to easily scale our React Universal Blog App using React organizational concepts and the Flux pattern.

Building a React Universal Blog App: Implementing Flux

Break It Down for Me

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.

Open your routes.js file and edit it so that it’ll have the following code:

We’ve added a few different pages to our blog and significantly reduced the size of our routes.js file by breaking the pages up into separate components. Moreover, note that we’ve added a Store by including AppStore, which is very important for the next steps in scaling out our React application.

The Store: the Single Source of Truth

In the Flux pattern, the Store is a very important piece, because it acts as the single source of truth for data management. This is a crucial concept in understanding how React development works, and one of the most touted benefits of React. The beauty of this discipline is that, at any given state of our app we can access the AppStore‘s data and know exactly what’s going on within it. There are a few key things to keep in mind if you want to build a data-driven React application:

  1. We never manipulate the DOM directly.
  2. Our UI answers to data and data live in the store
  3. If we need to change out our UI, we can go to the store and the store will create the new data state of our app.
  4. New data is fed to higher-level components, then passed down to the lower-level components through props composing the new UI, based on the new data received.

With those four points, we basically have the foundation for a one-way data flow application. This also means that, at any state in our application, we can console.log(AppStore.data), and if we build our app correctly, we’ll know exactly what we can expect to see. You’ll experience how powerful this is for debugging as well.

Now let’s create a store folder called stores. Inside it, create a file called AppStore.js with the following content:

You can see that we’ve attached an event emitter. This allows us to edit data in our store, then re-render our application using AppStore.emitChange(). This is a powerful tool that should only be used in certain places in our application. Otherwise, it can be hard to understand where AppStore data is being altered, which brings us to the next point…

React Components: Higher and Lower Level

Dan Abramov wrote a great post on the concept of smart and dumb components. The idea is to keep data-altering actions just in the higher-level (smart) components, while the lower-level (dumb) components take the data they’re given through props and render UI based on that data. Any time there’s an action performed on a lower-level component, that event is passed up through props to the higher-level components in order to be processed into an action. Then it redistributes the data (one-way data flow) back through the application.

Said that, let’s start building some components. To do that, create a folder called components. Inside it, create a file called App.jswith this content:

In our App.js component, we’ve attached an event listener to our AppStore that will re-render the state when AppStore emits an onChange event. This re-rendered data will then be passed down as props to the child components. Also note that we’ve added a getStore method that will dispatch the get-app-store action to render our data on the client side. Once the data has been fetched from the Cosmic JS API, it will trigger an AppStore change that will include AppStore.data.ready set to true, remove the loading sign and render our content.

Page Components

To build the first page of our blog, create a Pages folder. Inside it, we’ll create a file called Blog.js with the following code:

This page is going to serve as a template for our blog list page (home) and our single blog pages. Here we’ve added a method to our component that will get the page data prior to the component mounting using the React lifecycle componentWillMount method. Then, once the component has mounted at componentDidMount(), we’ll add the page title to the <title> tag of the document.

Along with some of the rendering logic in this higher-level component, we’ve included the getMoreArticles method. This is a good example of a call to action that’s stored in a higher-level component and made available to lower-level components through props.

Let’s now get into our BlogList component to see how this works.

Create a new folder called Partials. Then, inside it, create a file called BlogList.js with the following content:

In our BlogList component, we’ve added an onClick event to our Show More Articles button. The latter executes the getMoreArticles method that was passed down as props from the higher-level page component. When that button is clicked, the event bubbles up to the Blog component and then triggers an action on the AppDispatcherAppDispatcher acts as the middleman between our higher-level components and our AppStore.

For the sake of brevity, we’re not going to build out all of the Page and Partial components in this tutorial, so please download the GitHub repo and add them from the components folder.

AppDispatcher

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.

To continue this tutorial, create a folder named dispatcher. Inside it, create a file called AppDispatcher.js, containing the following code:

We’ve introduced the Flux module into this file to build our dispatcher. Let’s add our actions now.

Actions: Last Stop Before the Store

To start, let’s create an actions.js file inside a newly created folder called actions. This file will feature the following content:

There are a few methods here that are exposed by this actions.js file. getStore() connects to the Cosmic JS API to serve our blog’s content. getPageData() gets the page data from a provided slug (or page key). getMoreItems() controls how many items will be seen in our BlogList and WorkList components.

When getMoreItems() is triggered, it first sets AppStore.data.loading to true. Then, 300 milliseconds later (for effect), it allows five more items to be added to our list of blog posts or work items. Finally, it sets AppStore.data.loading to false.

Configure Your Cosmic JS CMS

To begin receiving data from your cloud-hosted content API on Cosmic JS, let’s create a config.js file. Open this file and paste the following content:

This means content will be coming from the Cosmic JS bucket react-universal-blog. To create content for your own blog or app, sign up for a free account with Cosmic JS. When asked to “Add a New Bucket”, click “Install Starter Bucket” and you’ll be able to follow the steps to install the “React Universal Blog”. Once this is done, you can add your unique bucket’s slug to this config file.

Server-side Rendering

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:

This file uses our getStore action method to get our content from the Cosmic JS API server-side, then goes through React Router to determine which component will be mounted. Everything will then be rendered into static markup with renderToStaticMarkup. This output is then stored in a template variable to be used by our views/index.html file.

Once again, let’s update the scripts section of our package.json file so that it looks like the one shown below:

We can now run in development mode with hot reloading and we can run in production mode with server-rendered markup. Run the following command to run the full React Universal Blog Application in production mode:

Our blog is now ready to view at http://localhost:3000. It can be viewed on the server side, the browser side, and our content can be managed through Cosmic JS, our cloud-hosted content platform.

Recommended Courses

Learn React : The World’s Most Lucrative JavaScript Library
☞ https://goo.gl/wW9q17

React Native: Build Your Own Mobile Apps
☞ https://goo.gl/DYQPM3

The complete React and Redux course: Build modern apps
☞ https://goo.gl/APJfdC

React Native : Build Native Mobile Applications
☞ https://goo.gl/jVyFtu

Conclusion

React is a very sophisticated way to manage UI and data within an application. It’s also a very good choice for rendering server-side content, to appease JavaScript-depraved web crawlers and for rendering UI browser-side to keep us browsing fast. And we can get the best results of both worlds by making our application universal.

I really hope you enjoyed this article. Once again, the full code can be downloaded from GitHub.

2 COMMENTS

  1. Hi PHP Tutorial,

    I saw your tweet about blogging and i recommend you to come to my website! You will love it! You can find Plugins for WordPress for only 4 bucks. JvZoo Products for 4-9 bucks… Trust me! Its the heaven for any website owner!!
    Please visit us and that your conclusion 😀

    https://goo.gl/EcEwTW or netafiliados. com

    Keep making great stuff!

  2. Hi PHP Tutorial,

    I saw your tweet about wordpress and i recommend you to come to my website! You will love it! You can find Plugins for WordPress for only 4 bucks. JvZoo Products for 4-9 bucks… Trust me! Its the heaven for any website owner!!
    Please visit us and that your conclusion 😀

    https://goo.gl/EcEwTW or netafiliados. com

    Keep making great stuff!

LEAVE A REPLY

Please enter your comment!
Please enter your name here