6 Different Ways to Create a React Web Application

React is a JavaScript library created by developers at Facebook that is used for building user interfaces. It is open source software and is maintained by Facebook and a community of individual developers and companies.

In this article, we'll show you how easy it is to work with React by walking through 6 different ways to create a React web application.

Let's get started!

The <script> Tag in an HTML Page
Create-React-App
Next.js
Gatsby
Nwb
Razzle

The <script> Tag in an HTML Page

The simplest way to create a React application is by adding it to an existing HTML page via a <script> tag. This method requires only a few lines of code and no build tools.

You can follow along with a pre-existing website or create an empty HTML file to practice with.

Add an Empty Div to Your HTML Page

The first thing you need to do is open the HTML page you wish to edit and add an empty <div> element.

It looks like this:

<!-- Existing HTML of your page -->

<div id="react-component-container"></div>

<!-- Existing HTML of your page -->

Notice that we give the empty <div> a unique id attribute. This will help our JavaScript find the right place to put the React code in the next steps.

Add the Script Tags

For React to work, we need to pull it into the webpage. We can do that directly in our HTML page by using <script> tags.

Add these three <script> tags right before the </body> tag on your page:

<!-- Existing HTML of your page -->

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<script src="react-component.js"></script>
</body>

The top two load React from a CDN. And the third one will load our React component after we create it in the next section.

If you ever move this code into production, make sure you replace "development.js" with "production.min.js" in the two top script tags.

Create the React Component

In the same folder as the HTML page you've been editing, create a file called react-component.js:

touch react-component.js

Then, add this code to it:

"use strict"

const e = React.createElement

class YourComponent extends React.Component {
  render() {
    return e(
      "h1",
      null,
      "Your React Component",
    )
  }
}

const domContainer = document.querySelector("#react-component-container")
ReactDOM.render(e(YourComponent), domContainer)

The YourComponent class creates a HTML element using React.

The bottom two lines find the <div> we created with an id of "react-component-container" and displays it in our HTML page.

You now have a React application in just a few steps and a couple of lines of code.

Create-React-App

Create-React-App is a framework that makes creating single-page React applications dead simple. And is also a good environment for newcomers to learn how to use React since the framework handles a lot of the annoying and sometimes difficult configuration setup.

When you install and create an application with Create-React-App, it creates a development environment for you and optimizes your application for production when the time comes.

In the steps below, we'll show you how to get an application up and running.

Make sure you have Node.js installed on your machine before proceeding.

Create the Application

To create the application, open the terminal and execute one of the three commands below depending on your preference between using Npx, Npm, or Yarn:

Using npx:

npx create-react-app your-app

Using NPM:

npm init react-app your-app

Using Yarn:

yarn create react-app your-app

When whichever command you executed is done running, you'll have a new React application in a newly formed directory called your-app.

Run the Application

To run your new application, navigate into your new directory:

cd your-app

And start the application by executing this command:

npm start

To preview your app, open http://localhost:3000 in your browser.

When you're ready to move your application to production, all you need to do is run the npm run build script to create an optimized build of your application in a build folder.

Check out their Github page and documentation to learn more.

Next.js

Next.js is another framework that makes building React applications super easy to get started with. It's usually used to create static and server-rendered applications. The basic install will give you styling and routing out of the box.

In the steps below, we'll show you how to get an application up and running.

Make sure you have Node.js installed on your machine before proceeding.

Create the Application

To create a React application with Next.js, open a terminal window and create a new and empty directory:

mkdir your-app

And cd into it:

cd your-app

Then, install these dependencies in your project:

npm install --save next react react-dom

When the installation is complete, open your package.json file and add this code to the "scripts" section:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Here's a quick rundown on what each script does:

dev: used to run the application when you're in development mode. This means your code will run with special error handling, hot-reloading, and other features that make the development process easier.
build: will compile your code into server and browser code that will run on a server in production.
start: how you start and run the production code in the production environment.

The last thing you need to do is create your first page.

Open a new file called index.js in the /pages directory of your project:

touch /pages/index.js

And add this code to the file:

function Homepage() {
  return <div>Your Next.js Application</div>
}

export default Homepage

Your application is ready to go! Now, all we need to do is run it!

Run the Application

To run your application, navigate to the root of your directory and run this command:

npm run dev

And you can preview your application at http://localhost:3000.

To build the application for production, all you need to do is run the npm run build command we added to the package.json file. And then you can run it with the npm start command.

For more information on Next.js, check out their Github page and/or their website.

Gatsby

Gatsby is a framework for React that helps developers build blazing-fast static websites. It lets you use React components in development, but outputs pre-rendered HTML and CSS to ensure the site loads as fast as possible when rendered in the browser.

In the steps below, we'll show you how to get an application up and running.

Make sure you have Node.js installed on your machine before proceeding.

Create the Application

The first thing we need to do is install the Gatsby CLI (Command Line Interface). We can install it with this command:

npm install -g gatsby-cli

When that's done installing, we can create a new Gatsby application with this command:

gatsby new your-app

Your Gatsby application is now built! Pretty easy right?

Run the Application

We have our Gatsby application built, now let's start it up!

First, cd into your new project:

cd your-app

And then start the application with this command:

gatsby develop

Your website is now running at http://localhost:8000.

For more information on Gatsby, check out their Github page and/or website.

Nwb

Nwb is another framework that is great for both publishing React components for NPM and for creating production-ready React websites. It offers a zero-configuration development setup to make getting started super easy.

In the steps below, we'll show you how to get an application up and running.

Make sure you have Node.js installed on your machine before proceeding.

Create the Application

To create an application, we need to first install the Nwb CLI (Command Line Interface) globally on your machine:

npm install -g nwb

Then, run this command to create a new React app with Nwb:

nwb new react-app your-app

When the installation and configuration processes are done, your new application is created!

Run the Application

Now, let's run your new application!

cd into your new application:

cd your-app

And run the npm start command to start your application:

npm start

Your application is now running at http://localhost:3000.

The npm run build command will create a production build of your application when the time comes.

Check out the Nwb Github page for more information.

Razzle

Razzle is a React framework for building server-rendered web applications that don't require any configuration, but lots of flexibility.

In the steps below, we'll show you how to get an application up and running.

Make sure you have Node.js installed on your machine before proceeding.

Create the Application

To create an application with Razzle, we need to first install the Razzle CLI (Command Line Interface) globally on our machine using NPM:

npm install -g create-razzle-app

When that's done installing, you can create a new application with:

create-razzle-app your-app

When the installation and configuration are complete, your application is built and ready to go!

Run the Application

To run the application, cd into your application:

cd your-app

And start it with this command:

npm start

To view your web application, open http://localhost:3000 in a browser.

Check out their Github page for more information.

6 Different Ways to Create a React Web Application

Table of Contents

The <script> Tag in an HTML Page

Add an Empty Div to Your HTML Page

Add the Script Tags

Create the React Component

Create-React-App

Create the Application

Run the Application

Next.js

Create the Application

Run the Application

Gatsby

Create the Application

Run the Application

Nwb

Create the Application

Run the Application

Razzle

Create the Application

Run the Application