ReactJs : First ReactJs Application

 

What is ReactJs?

React is a Javascript library, by Facebook, that is used for building user interfaces. It helps to build super fast and reactive web applications that runs on user’s browser.  It uses ES6 based javascript syntaxes.

ReactJs builds the UI (User Interface) based on the concept called Component. The UI view is split into reusable and manageable small segments called components. The ReactJs renders the user view based on those components.  Therefore ReactJs is all about splitting the UI into components and render the UI based on those components.

 

What is NPM (Node Package Manager) ?

NPM (Node Package Manager) is a package manager for the JavaScript programming language. It is the default package manager used in NodeJs.  It enables the path of accessing thousands of  reusable javascript libraries for your project.

NPM was initially developed as the package manager of the NodeJs. Therefore NPM is distributed (available) with the NodeJs installation.

 

NPM (Node Package Manager) and NodeJs Server

Here we are going to create a project that manage its dependencies with NPM.  Therefore if you dont have the NPM installed in you development environment, please visit the NodeJs website and install the NodeJs.  If you instal the NodeJs, you will get both NPM (Node Package Manager) and NodeJs Server. Since the Node Server is available,  it can be used as a development server to deploy the project files.

 

create-react-app

create-react-app is a command line utility that can be used to create ReactJs application (through command line).

First of all make sure that create-react-app utility is installed in your development environment.  If not, you can install it with following command.

npm install create-react-app -g

 

-g :- this indicates that this tool should be globally installed. Therefore you can execute the create-react-app tool globally (anywhere).

 

Creating new ReactJs Project. 

You can execute following command to create new reactJs project with create-react-app utility.

create-react-app  <your-project-name>

e.g:-  create-react-app  sample-reactjs-app

 

After successfully executing the above command, it will create a new ReactJs project with following directory structure.

Screen Shot 2018-05-24 at 10.27.25 PM.png

 

No Babel or Webpack Installation/Configuration Needed!

This is one of the main advantage of using create-react-app utility for creating ReactJs projects.

create-react-app utility creates the ReactJs application with inbuilt support of babel and webpack. That means they are already installed and configured when the project is created. Therefore the developers do not have to put an additional effort on installing and configuring those tools and they can directly use them.

 

Ejecting app with npm run eject

When you create a project with Create React App, all the build settings are preconfigured. That means you’re not able to change anything about your build setup. For example, you don’t have access to a webpack.config.js file. It’s all managed for you by a single build dependency: react-scripts.

But you don’t have to be locked into the build tool and configuration choices of Create React App. You can customize the setup to your liking, by running the eject command. Ejecting gives you full control over the configuration files and dependencies, like Webpack, Babel and ESLint.

Ejecting forks Create React App’s configuration and moves it into your project. After the eject script runs, you’ll see a ‘config’ directory added to your project containing files like webpack.config for dev and production, and a webpackDevServer.config.js file.

Be careful with this step, because running eject is a permanent action. Once you eject, you can’t go back.

After ejecting you continue building your app as you normally would, and all of the commands (like starttest and build) will still work. But at this point you’re on your own. So you shouldn’t need to use eject in your projects unless you know exactly what you’re getting into.

 

Running the ReactJs App

Go to the project directory and execute the following command in terminal.

npm start

This will run the app in development mode.

Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

 

Screen Shot 2018-05-24 at 11.01.44 PM.png

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s