Briefing about ReactJs With Sample Code

What is ReactJS?

ReactJS is an open-source front-end JavaScript library that offers graceful solutions to some of front-end programming’s most steady issues, allowing you to build dynamic and interactive user interfaces. ReactJS is developed and maintained by Facebook. It is widely used as a base in building single-page websites and mobile applications. React can also render on the server using Node, and it can power native apps using React Native. 

Features of ReactJS

  1. JSX : JSX is an extension to javascript. Though it is not mandatory to use JSX in react, but it is recommended. it is one of the good features and easy to use.
  2. Components: Components are like pure javascript functions that help make the code easy by splitting the logic into reusable independent code. We can use components as functions and components as classes. This will help you maintain the code when working on larger scale projects.
  3. Virtual DOM: React creates a virtual DOM, i.e., in-memory data -structure cache. Only the final changes of DOM has later updated in the browsers DOM.
  4. Javascript Expressions: JS expressions can be used in the jsx files using curly brackets, for example {}.
  5. Unidirectional data flow and Flux − React implements one-way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.
  6. License − React is licensed under the Facebook Inc. Documentation is licensed under CC BY 4.0.

 Pros of ReactJS

  1. ReactJS uses virtual DOM that makes use of in-memory data-structure cache, and only the final changes are updated in browsers dom. This makes the app faster.
  2. You can create components of your choice. These components can be reused and also helpful in code maintenance. Component and data patterns improve readability, which helps to maintain larger apps.
  3. Reactjs is an open-source javascript library, so it is easy to start with.
  4. ReactJS can be used to develop rich UI for both desktop and mobile apps.
  5. Easy to debug and test as most of the coding is done in javascript rather than on Html.
  6. Can be used on client and server side as well as with other frameworks.

Cons of ReactJS

  1. Most of the code is written in JSX, i.e., Html and css are part of javascript, it can be quite congested as other frameworks prefer keeping Html separate from the javascript code.
  2. The file size of ReactJS is large.
  3. Covers only the view layer of the app, hence you still need to choose other technologies to get a complete tooling set for development.

Getting started with React or Setup Environemt

  • Install Node.js from here.
  • Create-react-app by running this command in your terminal window:
  • C:\Users\UserName>npm install -g create-react-app
  • Run this command to create a React application named firstaap: This command set up all things which you require to run the react app.
  • C:\Users\UserName>npx create-react-app firstapp
  • Run below command to move into app directory
  • C:\Users\UserName>cd firstapp
  • Run below command to start the react app and looks like below image
  • C:\Users\UserName\myfirstreact>npm start

First React App

 Please click React Samples to find sample code for React JS.

  • Counter-App
  • Sample App
  • Dummy Video Rental App

Note : Please details for reactjs here 

Next Post »