Table of Contents
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.
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.
What does this look like in code?
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
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.
Popular single page apps are:
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.
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.
Like this article? Follow @chrisoncode on Twitter