Setting up reactjs development environment from scratch

What is ReactJS ?

ReactJS is a javascript library. It is used to build web user interfaces. It is mostly used to develop single page web applications. We can also develop mobile applications using library ReactJS. To develop mobile applications we use library ReactNative.

Advantages of ReactJS

ReactJS a opensource library

ReactJS is used to build single page web applications.

ReactJS is component based. A webpage can be devided into simple modules called a “component”. We can build a complex component using basic components. Every component has it’s own state to respond to the events. Because component logics are writtern in javascript.

ReactJs uses a virtual DOM to speed up the rendering process.

Code re-usability is a must in Software Development. In web development most of the functionality is repeated. So, we can reuse the components.

ReactJS uses ES06 javasxript syntax called as JSX. It speeds up the ReactJS appliations development time. JSX is a advanced javascript syntax.

Install NodeJS and NPM

Nodejs is a cross platform javascript runtime environment. It’s capable of executing the javascript code server-side. It is used with ReactJS to run the react development server.
NPM(node package manager) is a manager of javascript packages. By using it we can install javascript packages required for our project. It’s just like python pip.

To install NodeJS and NPM on ubuntu run the below commands on terminal

Basic Tools needed to work with ReactJS

React: To work with react we need to install it’s dependencies like react, react-dom, etc.

Babel: ReactJS uses JSX syntax to speed up the development process. But the syntax is not understandable by browsers. So, we need a transcompiler (Babel) to convert JSX into a javascript code.

Webpack: It is a javascript code bundler. In ReactJS we deal with the components so, every component is written in a seperate file to quickly navigate to the component and make changes. It will be difficult to add all these files to webpage. So, we use webpack to to bundle all these components.

setting up dev environment for a simple app

create and navigate to the directory “react_app”

mkdir react_app &&cd react_app

create a react package using command npm init. It will ask some questions either answer or just press key. It will create a file `package.json` file to manage the react app dependencies. `package.json` file looks similar to

These are aliases for lengthy commands. If run command npm run start then it will run command webpack-dev-server --mode development --open --port 3000 which will opens a browser with dev host on port 3000 http://localhost:3000
For production, use command npm run build. After running the command it will creates a new directory named dist with bundled javascript, css and images.

Now, open your terminal and change directory to react_app and run the command npm run start. It will open browser with url http://localhost:3000. You can find text Hello world with font size 100px with green color.
When we run command npm run start or webpack-dev-server --mode development --open --port 3000 webpack runs the dev server using the configuration file webpack.config.js and starts execution from file index.js because index.js pointed in package.json

To test it let’s change the text in HelloWorld component to "Hello Agiliq".