React application project setup - Installation

It will be a series of blogs where we are going to setup the react application from the scratch. It is completely for the beginners. If you are new to react then you can start learning from here. Let's start with a step by step journey of setting React Application from scratch.

TABLE OF CONTENTS

create-react-app

If you want to start coding in react without taking any configuration headache, then you can use create-react-app.

As per react docs:

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

Like this we have:

Next.js

Next.js is a popular and lightweight framework for static and server‑rendered applications built with React. It includes styling and routing solutions out of the box.

Gatsby.js

Gatsby.js is the best way to create static websites with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.

To create our own configuration, we need:

A package manager, npm or yarn. We will be using npm here. It help us in using the third party packages and easily install or update them.
A bundler, webpack or parcel. We will be using webpack here. it help us in writing modular code and bundle it together into small packages to optimize load time.
A compiler, babel. It transpile the react code to simple JavaScript code which browser can understand.

Now question is "if popular toolchain like Next.js and Gatsby.js are already available then why we need our own configurations?"

These toolchains have created an abstraction in which they have hidden the configuration part. On top of which we can start building our applications. As a developer I can say, we are inherently curious nerds. And curious nerd ( like me 😉 ), would definitely want to know how things works and which part does what.

In this blog, let's setup the prerequisites, i.e environment and software. And to achieve our goal, we need to install:

Nodejs
Git
Code Editor

Nodejs

Node.js is a JavaScript runtime build on Chrome's V8 JavaScript engine. By installing it we can use npm. Windows users and macOS users can download the installer here. If you are using linux machine then please follow this page.

After installing node try below command in command line:

node --version or node -v

Upon executing it, node version gets displayed in command line, marking a successful installation. Node installs npm by default. You can try to run.

npm --version or npm -v

Similarly, the version of npm gets displayed in command line.

Note* - If you are using your office system and office network, you might need to do some extra configurations. Configure .npmrc file with proxy, username and password. Otherwise you can not download packages by npm.

Git

The most widely used modern version control system in the world today is Git. We need git while downloading third-party packages by using npm. Go ahead and download git from here and follow instructions from here.

To check whether git is installed or not, try to run

git --version

Above command will display the installed version of git.

Code Editor

We need an editor to write the code. It depends on your choice, which code editor you like. I am using visual studio code from microsoft. You can download and install it from here. Also, you might like to try atom or sublime text. You can find more detail on visual studio code usage for react here.

Conclusion

Almost all of the open source tools can be installed on every operating systems. I was using Ubutu LTS v18.04 (now using macOS Catalina). I never found any difficulties while installing and using open source tools.

Part - 2: React application project setup part 2.

Part - 3: React application project setup part 3.

Part - 4: React application project setup part 4.