Skip to main content

Setting up ReactJS for development and deployment


In this tutorial we will learn how to create a react application.

Softwares required for ReactJS

We need to install below softwares for react development.

Visual studio code

This software is free and can be downloaded from https://code.visualstudio.com/download.
Once downloaded, extract the zip  and place the binary under "Applications" and allow app access from System Preferences -> Security & privacy.

Node.JS and NPM

Node.JS provides a java script enabled environment to run on a web server. It eases our development for UI based applications. NPM is a package manager which installs along with Node.jS and helpful in installing packages and libraries.
Install Node.JS and NPM using brew.
brew install node
Check version of Node and NPM using below command.
node -v
npm -v

Create React application

To create react application we will first install the required package and latter will use it to create our ReactJS application.

Install create-react-app package

Execute below command to install this package which will be used latter to create React applications.
npm install -g create-react-app
If you getting below error then please check if you have sufficient permission to download packages and your network settings are correct.  I faced this issue with my user and resolved it by executing with root user.
npm ERR! network request to https://registry.npmjs.org/envinfo failed, reason: getaddrinfo ENOTFOUND registry.npmjs.org
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
Executing with root user:
sudo npm install -g create-react-app

Create ReactJS application

Execute below command in desired folder location to create the react application.
npx create-react-app hello-react-app
It will create an application with given name in current directory. Now go to this directory and execute below command.
npm start
You will see below output in console and it will open the landing page in browser. If it is not opening then you can access it using given URL in browser.
Compiled successfully!

You can now view hello-react-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://xxxxxxxxxx:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.
You will see below screen in browser where it displays the ReactJS logo.
reactJS

Building and running

To build the application, you can execute below command. This build command create a "build" folder in application's root directory which can be deployed to any static or web server.
npm run build
Once your build is successful, you can install"serve" using node which is a static server.
npm install -g serve
Once it is installed you can run your build using below command in application's root directory.
serve -s build
If it executes successfully then you will see below output.
Now you can open the same URL (in the above image) in browser and you will see your landing page.

Comments

Popular Posts

SpringBoot - @ConditionalOnProperty example for conditional bean initialization

@ConditionalOnProperty annotation is used to check if specified property available in the environment or it matches some specific value so it can control the execution of some part of code like bean creation. It may be useful in many cases for example enable/disable service if specific property is available. Below are the attributes which can be used for property check.
havingValue - Provide the value which need to check against specified property otherwise it will check that value should not be false.matchIfMissing - If true it will match the condition and execute the annotated code when property itself is not available in environment.name - Name of the property to be tested. If you want to test single property then you can directly put the property name as string like "property.name" and if you have multiple properties to test then you can put the names like {"prop.name1","prop.name2"}prefix - It can be use when you want to apply some prefix to all prop…

Asynchronous REST service implementation in Spring boot

In this tutorial we will see how to create an asynchronous REST service endpoint using Spring boot application.
Asynchronous service works in a way that it will not block the client request and do the processing in separate thread. When work is complete the response returned to the client so our service will be able to handle more client requests at the same time, compare to synchronous processing model.
Let's understand how it is working in synchronous mode. In such server/client application at server side it has a pool of threads which are serving the request. If a request received by a thread then it will be blocked until it send the response back to client. In this case if processing doesn't take much time it will be able to process it quickly and accept other client requests but there could be one situation when all threads are busy and not able to accept the new client requests.

To overcome of such problems, asynchronous processing model introduced for REST services. In…

Entity to DTO conversion in Java using Jackson

It's very common to have the DTO class for a given entity in any application. When persisting data, we use entity objects and when we need to provide the data to end user/application we use DTO class. Due to this we may need to have similar properties on DTO class as we have in our Entity class and to share the data we populate DTO objects using entity objects. To do this we may need to call getter on entity and then setter on DTO for the same data which increases number of code line. Also if number of DTOs are high then we need to write lot of code to just get and set the values or vice-versa.
To overcome this problem we are going to use Jackson API and will see how to do it with minimal code only.
Maven dependency <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.9</version> </dependency> Entity class Below is our ent…

Why HashMap key should be immutable in java

HashMap is used to store the data in key, value pair where key is unique and value can be store or retrieve using the key.
Any class can be a candidate for the map key if it follows below rules.
1. Overrides hashcode() and equals() method.   Map stores the data using hashcode() and equals() method from key. To store a value against a given key, map first calls key's hashcode() and then uses it to calculate the index position in backed array by applying some hashing function. For each index position it has a bucket which is a LinkedList and changed to Node from java 8. Then it will iterate through all the element and will check the equality with key by calling it's equals() method if a match is found, it will update the value with the new value otherwise it will add the new entry with given key and value. In the same way it check for the existing key when get() is called. If it finds a match for given key in the bucket with given hashcode(), it will return the value otherwise w…