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:
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, , or something similar).
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.
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.
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:
<!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, a tool that Facebook released to make generating React single page apps very easy.
Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.