The Ways to Use React

Before we can jump into learning more about the specifics of React, it's important to talk about all the ways we can use React.

This will give us a good mental overview to see how React can be added to any project. In a nutshell, it comes down to the following:

React can be used by:

  • Adding React to an existing site
  • Using React to create a fully single page app

Let's talk about the difference between an existing site and single page apps (SPA). React is a great fit for both scenarios. It's ability to scale based on the project, small or large, is one of the main reasons React is loved by so many.

If you've already got a website and want to add React, it's a two-step process. Usually you'll have a website that's served with a server-side language (PHP, Ruby, Node). This means the view is generated by your server and an HTML file with content like paragraphs, headers, titles will be served to your user.

Here's a look at what this could look like:

JavaScript on a Server Side Rendered Site

To add React to an existing site, the process is:

  1. Add the React and ReactDOM libraries
  2. Use Babel to make sure browsers can understand our React code.

The first step is the quick part. The second step is where it can get tricky based on the project you have.

There are many variations to how websites are built so you'll need to look at your current site and see if you already have a build system (ie Gulp, webpack, or something similar).

We would have our website served via a server-side language and then attach JavaScript on top. Here's some code to demonstrate our HTML page.

markup
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <nav>
    <!-- navigation goes here -->
  </nav>

  <main>
    <!-- content goes here -->
  </main>

  <aside>
    <!-- sidebar is here -->
    sidebar stuff

    <!-- react will be injected in this div -->
    <div id="react-component-here"></div>
  </aside>

    <!-- javascript stuff here -->
    <!-- built with webpack/babel. contains react code -->
    <script src="app.js"></script>
</body>
</html>

We are serving a full HTML page to our users and notice that we have a div that we have labeled with an id of react-component-here. We can then add in our JavaScript (that is bundled with webpack and Babel). That code could look like so:

javascript
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>look i am a react thing!</div>,
  document.getElementById('react-component-here')
);

Now React has taken over that one specific area of our site.

In addition to adding React onto an existing site, we can use React to build out the entire site. This is called a single page app.

Single page applications are apps that are built completely with JavaScript. The main difference between SPAs and applications that are served from a server is routing. For a server-served site, you'll see a refresh for every page you click to. That's because the browser has to get new content from the server.

Fully Single Page App

For Single Page Apps, you won't see a refresh as the JavaScript (React in this case) will be responsible for grabbing new data and displaying it to you. Routing is handled via JavaScript all in your browser without a page refresh.

Popular single page apps are:

  • Facebook
  • Medium
  • Twitter
  • Instagram
  • Uber
  • Airbnb

Single page apps are the focus for this starter course as SPAs are becoming increasingly popular in web development.

The big benefits of single page apps are that they offer a better user experience. They offer immediate feedback to users.

  • Routing is fast and doesn't require a page refresh
  • Interactions happen quickly (real-time)
  • Offline and app-like behavior can be added
  • Incredibly fast. Able to be served globally and statically

Of course both of the above benefits could be added to server-rendered applications. It is just a quicker process if all of the application is built on the client-side instead of having a site that is server-side + client-side.

We are still serving an HTML file to our users, but in this case it is very minimal. It will look something like this:

markup
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <div id="app"></div>

  <script src="app.js"></script>

</body>
</html>

Notice that we only have one div named app. The entire React app is injected here and takes up the entire page. Contrary to our above example for server-rendered applications, we have all our logic happening inside of our app.js instead of partly in HTML and partly in JS.

We'll be focusing on the single page app way. In the upcoming examples, we'll work with some tools to make React development easier and also create-react-app, a tool that Facebook released to make generating React single page apps very easy.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)