Quick Guide To Set Up Your React App Ready For Development

React is one of the most widely used JavaScript libraries in creating software interfaces. React offers several tools that make her stand out and popular in today's software development industry. Thus, a great feat to be a React developer. The purpose of this article is to provide a quick guide in creating your first React app and setting it ready for development.

Before we set up our first React app, let's know what React entails and its benefits. This will give us a thorough insight into React as we journey through this career in becoming a React developer. Let's get started.

What is React?

React is a JavaScript library used in developing interactive and robust User Interfaces (UI). In other words, React is used to create front-end web applications. React can be used to develop Single Page Applications (SPAs) using independent and reusable components, thereby increasing her readability and maintainability.

Jordan Walke—a software engineer at Facebook now known as Meta—developed React. Jordan Walke first came up with a prototype known as FaxJS. FaxJS was initially deployed to the Facebook News feed in 2011. On May 2013, React was officially launched and made an open-source at the JavaScript Conference in the US.

Over the years, React has evolved to include several features which serve as frameworks for developing complete applications. Some of these frameworks include Next.js, Gatsby, and React Native, amongst others. Next.js and Gatsby.js frameworks develop backend servers of web applications. React Native is used to develop mobile applications such as iOS and Android mobile apps.

Benefits of React

React is the most widely used JavaScript library. This is because of the benefits React offers. In this section, we shall examine the notable benefits of React. Let's get started.

Web App Development: React-powered frameworks are used to develop full Web applications. For instance, React-powered frameworks provide features for server-side rendering, data fetching, routing and so on. These frameworks are maintained by various communities, which include Next.js maintained by Vercel, Gatsby maintained by Netlify, and Remix maintained by Shopify, amongst others.
Mobile App Development: React Native—a React-powered framework—is used to develop mobile applications. React Native is an open-source JavaScript Framework that is used to develop iOS and Android mobile apps.
Maintainability: React applications are developed using components. These components are independent and reusable. In other words, these components work separately and can be used in several parts of the application. Thus, increases the readability and maintainability of React codes.
Reusability: React components are independent pieces of code. These components work separately and can be used in various parts of the application. Thus, reduces the amount of code to be written and ensures the effectiveness of the application.
Testing and Debugging: React provides developers with tools to test and debug their codes and ensure the effectiveness and efficiency of their software. Some such tool includes Jest, React Developer Tools, and so on. Developers can test and debug their codes with ease and ensure they work correctly as expected.

Steps In Setting Up React Applications

This section will guide you through the steps in creating your first React app ready for development. Note that we shall be using the officially recommended process of creating a React app. Let's get started with the various steps.

Step 1 - Install Node.js

You need to install Node.js for the local development of your React app. To install Node.js, visit https://nodejs.org and follow the instructions.

STEP 2 - Create a Project folder

Create a project folder and navigate to the directory of your project folder using your terminal as seen in the codes below.

C:\Users\Usersname\Desktop>mkdir react_project
C:\Users\Usersname\Desktop>cd react_project

STEP 3 - Create React App

Create your new React app by typing any of the commands below.

C:\Users\Usersname\Desktop\react_project> npx create-react-app my-app

C:\Users\Usersname\Desktop\react_project>npm init react-app my-app

For yarn users, run:

C:\Users\Usersname\Desktop\react_project>yarn create-react-app my-app

The installation process takes a while to complete. When completed, a folder named 'my-app' will be created, containing several files and folders just like the below structure. Note that 'my-app' is the name of your React app and can be any name of your choice.

my-app/
    node_modules/
    public/
        favicon.ico
        index.html
    src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg
    .gitignore
    package.json
    README.md

STEP 4 - Start the server

In your terminal, navigate to the app directory where package.json is located. The package.json file contains scripts that give you access to run React script commands such as start, build, test, etc. Start the development server as seen in the codes below.

C:\Users\Usersname\Desktop\react_project\my-app>npm start

The above command starts the development server and opens your default browser. The development server is run on localhost:3000, with the image below displayed on your screen.

An impressive feature of React development server is the Hot Module Replacement (HMR). The HMR updates the web page without reloading when a component is modified.

In conclusion, we've understood what React entails and how important it is in the software development industry. we've also achieved a great step in setting up a React app ready for development. Congratulations on our progress. Explore other tools and functionalities in React to grow and perfect your skills as a React developer.

I hope you find this article useful. Follow me on Twitter and LinkedIn as we share insightful and innovative ideas.

Quick Guide To Set Up Your React App Ready For Development.

Table of contents