Intro to React JS | React Dev Environment Setup - React Tutorial


What is ReactJS 

what is reactjs

ReactJS is most popular open source javascript framework used to build front end application or graphical user interface (GUI) for web and mobile applications. It is developed and maintained by Facebook. Today, following big companies are using react.js:- 

  • Facebook
  • Instagram
  • Netflix
  • New York Times
  • Yahoo! Mail
  • Khan Academy
  • WhatsApp
  • Dropbox 

 

How does React works? 

React does not directly manipulate browser’s DOM, instead it creates its own Virtual DOM in memory, do all manipulation in virtual DOM and then make changes in browser’s DOM accordingly. Whenever Virtual DOM detects any changes, it make same changes in actual DOM. 
Instead of refreshing entire web page, React update only required components in DOM. That’s why react application is comparatively more efficient. 

 

Environment Setup 

Node.js and NPM 

Node.js is an open source javascript runtime development platform to execute javascript at server side. NPM (node package manager) comes with Node.js. You just need to install Node.js and NPM will be installed automatically. NPM is used to install packages and modules. It command is:- 

npm install packageName 

Npm will install not only this package, but also install its dependable packages. 

The next step is to install Babel, Webpack, React and React DOM and do configurations. To avoid all these installations and configurations, Facebook developers have developed a tool Create React App and recommend it to create react application. Using it you can create react application with zero configurations and settings. Just type below command in command line and press ok. All required tools will be installed automatically. 

npx create-react-app app-name 

After installation is completed, you will have a complete application structure (Will be explained in next lesson). Open it in editor like VSCode. Type below command to start development server (node.js) 
npm start 
This will take few seconds to start development server, and then home page of your application will be loaded in browser. 

Babel 
You can create element (h1, p, div etc) by writing react functions or by writing JSX code. As JSX is more simple and understandable so most developer recommend it. Babel translate JSX code to react code supported by all browsers. 
Visit babel official website, write JSX code, you will see its translated react code. 

Webpack 
Webpack inspect the code from entry point index.js and create dependency graph. While viewing code, if finds jsx, it passes this code to Babel for translation.

 

No comments:

Post a Comment