Photo by Ferenc Almasi on Unsplash

Getting Started with React ⚛️

In this article, I’ll explain how to setup React.js project

React is a JavaScript library created by Facebook. It is a User-Interface(UI) library. It is a tool for building UI components. It is a Client-side JavaScript library. Client-side means it runs in the browser rather than on a server like a Node.js. It is used for developing interactive Web Applications.

Prerequisites

1. Node JS: it’s an Open Source Server Environment which allows you to run JavaScript on the server. It comes with NPM (Node Package Manager) which is used to install packages like create-react-app which is basically a boilerplate React Application. To install this, visit “nodejs.org/en”.
2. Text Editor: We need a text editor to write our code. We can use Visual Studio Code, Sublime, Atom, etc. But I suggest VS Code which has couple of extensions which really makes our life easy.

Create React Application.

There are different ways for creation of react app.

1. Using Pure React.
2. Using Gatsby.

1. Using Pure React

Install create-react-app.

npm install create-react-app

Create your react app.

create-react-app <app-name>

Move to Project Directory.

cd <app-name>

Start React App.

npm start

React will start a hot-reloading development environment accessible by default at [http://localhost:3000](http://localhost:8000.).

2. Using Gatsby

Install the Gatsby CLI

npm install -g gatsby-cli

Create New Site

gatsby new gatsby-site

Start Development Server

gatsby develop

Gatsby will start a hot-reloading development environment accessible by default at [http://localhost:8000](http://localhost:8000.).

Try editing the JavaScript pages in src/pages. Saved changes will live reload in the browser.

Create Production Build

gatsby build

Gatsby will perform an optimized production build for your site, generating static HTML and per-route JavaScript code bundles.

Serve the Production Build Locally

gatsby serve

Gatsby starts a local HTML server for testing your built site. Remember to build your site using gatsby build before using this command.

That’s all folks.

If you found this article helpful then share it with your friends maybe it’ll help someone needy!

Sharing is Caring!

Thank you! 😃