Step by Step Guide to Build React Project From Scratch

The great need to keep on improving the user-experience applications is what keeps developers on their toes. This need pushes them towards newer app development trends and tech to achieve better results. 

ReactJS is one of those technologies attracting developers due to its brilliant features and the fact that global companies like Netflix, Facebook, and Instagram use it. Another reason developers rely on this popular JavaScript technology for creating front-end applications is that users can create new react apps or projects in multiple ways.

From the <script> Tag in an HTML Page and Next.js to Razzle, Gatsby, and Nwb, you can build a react app from scratch in these unique ways. In this article, we explain these different approaches to building a React project using React as a technology.

React (as technology)

React is a JavaScript library created and maintained by Facebook (now Meta). React JS’ creator, Jordan Walke sees React as an efficient, flexible technology and a declarative open-source framework for building fast, scalable, and simple front-end web apps.

Since its launch, React has been a fundamental force in the front-end development space. One of Stack Overflow’s surveys reveals that React is one of the most cherished web frameworks in the world. Here are some reasons why developers build React projects and new react apps using the framework:

• Enhanced Performance: React utilizes virtual DOM to create web apps faster. This is because virtual DOM compares the previous states of the components and modified items in the Real DOM rather than updating every component again as regular web apps do.
• Easily Creates Unique Apps: With React, users can easily create dynamic web apps because the framework requires relatively less coding but provides more functionality than JavaScript.
• Lots of Reusable Components: In React apps, components are the crucial building blocks. When you build a react app, it can consist of several components, and these components have their controls and logic, and you can reuse them throughout the app. This benefit alone reduces the app’s development time.
• Superb Debugging Tools: Facebook put out a Chrome extension that makes it easier to debug React apps. Developers can now debug React applications quicker than they normally should.
• Great for Developing Both Mobile and Web Apps: If you need to create new React apps, and you’re wondering if the framework is great for either mobile or web apps, it is. While it is best known for the development of web apps, the React Native framework derived from React helps create unique mobile applications with great UI. 
• React has Small Learning Curve: The framework is simple to learn because it has a combination of JavaScript and HTML concepts and some other beneficial additions. However, users still need to spend time understanding React’s extensive library.
• Data Flow is Unidirectional: As a JavaScript framework, React follows a unidirectional flow of data. So when developers design or build react apps, they can nest child components inside parent components. Besides, since data flows in one direction, debugging errors and knowing where issues occur in an application becomes much easier.

Concepts You Need to Have in Mind Before Starting a Project from Zero

React helps developers create web applications quicker and more efficiently with little minimal coding involved. Before we highlight the different ways to build a react app, here are some concepts you need to have in mind before starting your React project:

• Component: Components are building blocks of all React-based applications, and so they are very important. A group of components makes up a React app. 
• Class Component (Stateful): Class components are components you can implement while using a class. What’s more, a class component is capable of applying logic, holding state, and rendering properly.
• Functional Component (Stateless): Functional components are entirely presentational and have no functionality and state. They do, however, have output UI items you can use a function to represent them.
• Props: A Prop is immutable and is a way of adding dynamism to components by passing data/properties down from one component to another. Props can’t be changed as it is a process of passing useful information from a parent component to a child component.
• State: States are variables in all class components, and they are capable of storing information uniquely. A state is similar to a prop, but the component fully controls it, and it is more private than props.
• JSX: JSX is an important JavaScript extension. It is syntactic, and sometimes developers use it as a term to describe how they want the user interface to seem. You can write new HTML structures in a single file as JavaScript code when you leverage JSX. JSX adds XML and HTML syntax to JavaScript.

6 Different Ways to Create a React Web Application

In the coming sections, you will find out how you can use React and 6 different frameworks to create a new React app or web project.

Create-React-App

This is a framework that makes it much easier to create single-page React apps. Create-react-app is suitable for newbies who want to try some React coding without the hassle of configuring their project Babel and Webpack.

The framework is also a great environment for newbies who want to master how to use React since it handles a much more complex configuration setup. Create-react-app creates a development environment for users when they install and create an app with it and also optimizes it for production when needed.

So how do you create new React apps using Create-React-App? In the steps below, we share how you can get an app functional and running. For starters, install Node.js on your machine before you begin the process: 

Here’s How to Create React Application using Create-React-App

The first thing you need to do when you use the Create-react-app framework to build React projects is to open the terminal and execute one of three different commands. Depending on your preference, you can choose to execute one of Yarn, Npx, or Npm. beginning with Yarn, here’s how you create a new React app with these commands:

#1. With Yarn:

yarn create react-app your-app

#2. With Npx:

npx create-react-app your-app

#3. With Npm:

npm init react-app your-app

Whatever command you decide to go with, know that when the command is finished running, you will have a new React application but in “your-app,” a freshly formed directory.

Here’s how to run the Application

To run the new application you are creating, simply navigate to the freshly formed directory with this command below:

cd your-app

After the above, start the app by executing the command below:

npm start

If you want to preview your application, open this link in your browser: http://localhost:3000. After preview, you can decide to move your application to production by running the npm run build script. This helps create an optimized build of your new app in a unique “build” folder.

Next.js

The next framework on our list you can use to create new React apps is Next.js, and it makes building apps a lot easier, especially if you’re just getting started. It is typically used to build server-rendered and static applications.

Basic installation of Nex.js gives users routing and styling that are simply out of the box. The steps below highlight how you can create new React apps that run smoothly using the Next.js framework.

Here’s how to Create React Applications Using Next.js

To create or build a React project with Next.js, first open a terminal window and proceed to create an empty and new directory.

mkdir your-app

Next, add cd to it:

cd your-app

After you’ve done the above step, install the following dependencies in your React project:

npm install –save next react react-dom

Once your installation is complete open the package.json file and then add the following code below to the “scripts” section.

{ “scripts”: { “dev”: “next”, “build”: “next build”, “start”: “next start” } }

To better understand why this script is important, here is a look at what each script does for the app building process:

• Dev: Dev is useful in running the application when the user is in development mode. In other words, your code will run with features like hot-reloading, special error handling, and others that simplifies the development process.
• Start: Start is how you begin and run your production code in the production environment.
• Build: Build should help you compile your code into browser and server code that is capable of running on a server in production.

Next, you need to create your first page by opening a new file known as the index.js in the /pages directory of your React project:

touch /pages/index.js

Next, add the code below to the file:

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

After you’ve added the above code, your React application is set. You just need to run it. 

Here’s how to run the Application

To run your new application, you have to navigate to your directory’s root and run the command below:

npm run dev

As always, you can preview your application at http://localhost:3000. If you want to build an app for production, you, however, need to run the npm run build command added to the “package.json” file and then run it with the npm start command.

Gatsby

Gatsby is a React framework that assists developers in building super-fast static websites. It allows them to use React components in the development, but its output is pre-rendered CSS and HTML, ensuring sites load as fast as possible when you render them in the browser.

So how do you create a new React app using Gatsby? The following steps below will highlight how you can easily get an application running and functional using Gatsby. As always, make sure you have installed Node.js on your machine.

Here’s how to Create React Application Using Gatsby

The first thing you need to do when you use the Gatsby framework to build React projects is to install the Gatsby CLI or Command Line Interface. With this command below, you can install the Gatsby CLI:

npm install -g gatsby-cli

Once you’re done with the installation, you can create a new application with the Gatsby framework using this command:

gatsby new your-app

Voila! Your application is built and ready to start.

Here’s how to run the Application

After you’ve built your application, you have to start it up. To begin this process, apply cd to your new project like so:

cd your-app

Next, start the application with the following command:

gatsby develop

Nwb

Another framework you can use to build a React app from scratch is Nwb. It is great for creating production-ready React websites and publishing React components for npm. 

Nwb offers developers a zero-configuration development setup to make the app building process easy. In the coming steps, we highlight how you can get your very own app up and running with Nwb.

Here’s how to Create React Application Using Nwb

To begin the app creation process, you need to install the Nwb CLI (Command Line Interface) globally onto your machine.

npm install -g nwb

After you do that, run the command below to create a new React application using Nwb:

nwb new react-app your-app

Once your installation and the whole configuration process are complete, you’ve created your new application.

Here’s how to run the Application

The next stage of your app-creation process involves you running your new application by using the following command:

cd your-app

After you’ve applied the above command, you need to run the npm start command to start your new application.

npm start

Now your new application is up and running at http://localhost:3000. Know that the npm run build command will create a production build of your app when appropriate.

The <script> Tag in an HTML Page

Adding a React application to an existing HTML page with a <script> tag is arguably the easiest way to create a React app. The <script> method only needs a couple of lines of code, and developers don’t need to bother about building tools either. You can follow along with an already existing website, or you can just build an empty HTML file to practice with.

Here’s how to add an Empty Div to Your HTML Page

Firstly, you need to open the HTML page that you want to edit and simply add an empty <div> element to it. It should like this:

<!– Existing HTML of your page –> <div id=”react-component-container”></div> <!– Existing HTML of your page –>

If you observe the code above, you will find that the empty <div> has a unique id attribute, and this helps your JavaScript find the appropriate place to put the React code in the following steps.

Adding the Script Tags

In order for React to function, you need to pull it into the webpage, and you can do this directly on an HTML page via <script> tags. Add the following <script> tags before adding 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>

From the above codes, you will find that the first two loads React from a Content Delivery Network (CDN). The third line of code, however, loads the React component after you must have created it in the next section. Note that if you move this code into production, you need to replace “development.js” with “production.min.js” in the first two script tags.

Here’s how to Create the React Component

Still in the same folder as the HTML page you’ve been modifying, create a new file named “react-component.js”

touch react-component.js

Once you have created this file, add this code below 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)

It is worth knowing that the YourComponent class will create an HTML element using React. Also, the two lower lines seek out the <div> we created with our id of “react-component-container” while displaying it on the HTML page. Now you have created a new React app using the <script> tag on an HTML page.

Razzle

Razzle is another React framework for creating server-rendered web apps. These web apps do not need a configuration, but they require much flexibility. In the following steps, we highlight how you can get your React app up and running with Razzle:

Here’s how to Create React Application Using Razzle

To build react apps using Razzle, you need to use NPM to install the Razzle Command Line Interface globally on your machine.

npm install -g create-razzle-app

After installing the Razzle CLI, you can go ahead to create a new app using this:

create-razzle-app your-app

Once your configuration and installation are complete, your Razzle application is now built and ready to run.

Here’s how to run the Application

To run your new application, input cd into the application:

cd your-app

Next, begin with this command

npm start

To view your web app, open this site http://localhost:3000 in a browser. You can also visit their Github page for further information.

Tips for Using React

Now that you have your React app up and running, there are a few things you need to do to ensure it runs smoothly.

Planning the Structure of Your App from the Start

When starting a new project with React, it is essential to start by planning out how your application will be structured. This includes figuring out which components you need and how they will work together.

Fortunately, there are a few tools to help with this, including React Storybook, which allows you to build isolated components without worrying about the rest of your application. This tool also comes with a number of helpful add-ons, such as the ability to automatically generate documentation for your components.

Creating Reusable Components

One of the best things about React is that it encourages the creation of reusable components. This means that you can use the same component in multiple places throughout your application without having to duplicate code.

When creating reusable components, there are a few things to keep in mind. First, make sure that your component does not have any side effects. This means that it should not change any data that is not passed in as props. Second, make sure that your component is well-tested so that you can be confident that it will work as expected when used in different places.

Using JavaScript Linting Tools

When working on a large React application, it is important to make sure that your code is well-organized and free of syntax errors. JavaScript linting tools can help with this by automatically checking your code for errors and potential problems.

There are a number of different linting tools available, but some of the most popular ones include ESLint and JSLint. If you are using a code editor such as Visual Studio Code, there may be a linting plugin already installed that you can use.

Conclusion

React is a simpler front-end framework with flexible and easy code to maintain due to its modular structure. Its flexibility saves users a lot of cost and time, which is why it is one of the most preferred frameworks.

If you’re a developer focused on providing single-page apps and need some fast, responsive, and user-friendly apps, then you need React app development. The 6 different ways to build a React app from scratch that we’ve covered should help you develop some great apps.