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!
<script>
Tag in an HTML Page<script>
Tag in an HTML PageThe 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.
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:
HTML
<!-- 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.
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:
HTML
<!-- 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 every move this code into production, make sure you replace “development.js” with “production.min.js” in the two top script tags.
In the same folder as the HTML page you’ve been editing, create a file called “react-component.js”:
$ touch react-component.js
Add this code to it:
react-component.js
"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.
Pretty easy right! You now have a React application in just a few steps and a couple of lines of code.
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.
If you need one, we wrote a guide on how to install Node.js.
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”.
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 the “build” folder.
Check out their Github page and documentation to learn more.
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.
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:
package.json
{
"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:
/pages/index.js
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!
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 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.
The first thing we need to do is install the Gatsby CLI (Command Line Interface). We can install it with this command:
$ gatsby new your-app
Your Gatsby application is now built! Pretty easy right?
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 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.
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!
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 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.
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!
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.
There you have it! We just gave you 6 different ways to go out there and get a React web application up and running.
Go build something cool!
Thanks for reading and happy coding!
Originally published by Nick Major at coderrocketfuel.com
#reactjs #javascript #web-development