React: The Powerhouse JavaScript Library

React: The Powerhouse JavaScript Library

Welcome to the world of React, the powerhouse of modern front-end development!

React is a JavaScript library developed by Facebook that has revolutionized how we build user interfaces.

This will be a series of short articles on React, its usage in developing modern user interfaces(UI), common technologies usable with React and deployment of your React applications.

In today's article, I will discuss the react library as a whole and how you can start a react application from scratch locally on your machine.

But before that, let's quickly distinguish between some terminologies.

Differences between React and React DOM

A quick clarification between React and React DOM.

Aspect

React

React DOM

Definition

JavaScript library

Package within React ecosystem

Purpose

Builds user interfaces

Manages interactions with the browser's DOM

Core Function

Component-based UI

Updates the actual DOM in the browser

Responsiveness

Handles state management

Renders React components on the web platform

Usage

Works on both web and native platforms

Specifically for web applications

Differences between React.Js and React Native

A quick distinction between React.js and React Native.

Aspect

React.js

React Native

Platform

Web applications

Mobile applications (iOS & Android)

Purpose

Builds user interfaces for browsers

Builds native mobile applications

Target Environment

Browsers (Client-Side)

Mobile devices (iOS & Android)

Components

Uses HTML and web components

Uses platform-specific native components

DOM Manipulation

Virtual DOM for web browsers

No DOM manipulation; interacts with native APIs

Styling

CSS styles

Platform-specific styling (e.g., StyleSheet API)

Rendering

Uses React DOM to render

Uses React Native to render components

Access to APIs

Web APIs (e.g., DOM, Fetch API)

Native APIs (e.g., Camera, Geolocation)

Starting a react application locally

Here are a few ways you quickly can set up a react application on your local machine.

First, ensure you have Node.js and Node Package Manager (npm) installed on your laptop.

If you need more clarification, use this command to check your terminal.

node –v 
npm -v

Let's continue now that you have node and npm installed

1. Use Create React App (CRA)

The first way is to use create-react-app to bootstrap your react app.

Open your terminal and run this:

npx create-react-app my-project

Change the directory into the new react app with:

cd my-react-app

Then start the application with:

npm start

2. Use Vite

Ensure you have a node installed on your laptop.

Open your laptop to install Vite globally on your laptop with this command:

npm install -g create-vite

Create a new react project with vite:

create-vite my-react-app --template react

Change the directory into the application you just created using the following:

cd my-react-app

Start the development server with the following:

npm run dev

3. Use Next

Ensure you have a node installed on your laptop.

Open your terminal and run the following command:

mkdir my-react-app
npm init -y

The first command above creates a folder for your React app.

The second creates a package.json file to store the packages needed that we will install next.

npm install react react-dom next

The above commands install react.js, react-dom and next for the project.

In the root of your folder, create another folder named pages.

Create an index.js file inside the pages folder.

Go back to your package.json file and write these commands:

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

Inside the index.js file write your first react application

Then start your application with this command:

npm run dev

Conclusion

In this article, I have explored the 3 different ways you can start a react application and explain some major differences between easily confused terminologies in the react ecosystem.

In subsequent articles, we will dig further into react and how to use it to develop modern front-end applications.