React Starter: The Ways to Use React

Publikováno: 22.4.2019

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 ...

Celý článek

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.

Adding React to an Existing Site

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.

This is how the Scotch.io site is made. It is generated by PHP/Laravel and we serve HTML/CSS to users. After we serve the page, we then add React to parts of the site like the top navbar, search sections, and a few other things.

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

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

Add the React and ReactDOM libraries
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).

Scotch.io itself is a website that is served by Laravel and we add React on top using webpack via Laravel Mix.

What does this look like in code?

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.

<!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:

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. If you look at the Scotch.io source code, you'll see that we have a few divs that take this same approach. <div id="react-search-bar"></div> is the one that handles our header search bar.

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 Apps

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 (like Scotch.io), you'll see a refresh for every page you click to. That's because the browser has to get new content from the server.

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.

Benefits of React Single Page Apps

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.

What does this look like?

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

<!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.

Conclusion

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.