Introduction to React JS

  1. What is React JS?
  2. What are the advantages of React?
  3. Limitations of React

 

What is React?

  • React is a front-end JavaScript library. Let me explain you in simple language with few key features of React.

Eliminating Redundancy:

  • While working on any application which uses HTML as Views, you might have a situations where you just copy and paste the same code at many places. Which is called as Code Redundancy.
  • So at this situation did you ever thought that how would if I can reuse this HTML code at multiple places.

Page1.html

Page2.html

If you are in this situation then how would if there is a common HTML for both page1 and page2.

Page1.html

Page2.html

How about this, awesome right!

Yes of course if we could do this there will be no more HTML code redundancies in the application.

 

Reuse UI Components:

  • If we can reduce the code redundancies using custom HTML tags, this is nothing but creating Reusable UI Components like <app-head></app-head>.
  • According to React documentation “React is a library for building reusable UI components which presents data that changes over time”.
  • Here the React Components comes into picture.
  • Component:
    • React application is all about components, the entire application will be divided into several Component segments.
    • One component can be nested with other component.
    • Components can be created in two ways,
      • Using var Component = CreateClass({ })
      • Using ES6 standards with Class keyword, class Component extends React.Component<{},{}>{  }

 

Ex:Using ES6 Syntax

Ex: Using ES5 Javascript Syntax

Easy Data-Binding:

  • This is one of the most important thing in React which is called as “Data-Binding”.
  • React can do only one-way binding using its interpolation “{ <expression> }”.
  • Here the JSX comes into picture, where JavaScript + XML = JSX.
  • JSX:
    • React used JavaScript expressions within curly braces “{ <expression> }”. We can put any type of JavaScript expression in the curly braces inside JSX.
    • Each React Element is like a real kind of javascript object which can be either stored in a variable or can be used throughout the program.
    • After coding in JSX pages no need to precompile the code, the JSX file will be automatically compiled and generates JavaScript syntax in the browser.

Example: Here I’ve used TSX instead of JSX, that’s why syntax while importing the libraries might look different.

Instead we can use, in JSX files

In TSX files,

 

 

Advantages of React:

  • Reusability of the UI code.
  • Eliminating code Redundancies (common code)
  • Familiar Syntax such as using class, extends, implements, interface keywords which are used for programming in most of the familiar languages like Java and .Net framework ,
  • The virtual DOM makes the testing simpler for the testers.
  • React can be used with most of the frameworks, because this is used only as a View Layer. Just we can replace the View Layer in any project with React UI Components. And it’s compatible with any Framework.
  • This is a light-weight library.
  • JSX syntax makes the developers feel free to use react i.e., Developers can use both javascript and HTML in a JS / JSX / TSX (typescript + XML) files with in a component. Where the developers will write the business logics in the component class, and the view part in the component’s templatee., with in the render ( ).
  • React can be written in
    • Javascript (.js) –   ES5 syntax
    • React’s recommended (.jsx) – Both ES5 and ES6 syntax
    • Typescript (.tsx) files. –  Both ES5 and ES6 syntax

 

Limitations:

  • React is just a library, because of that to develop an application React is just isn’t enough.
  • It doesn’t have its own routing, sevices etc… Because it is not a framework.
  • React has failed in competing with most of the advanced frameworks like Angular.
  • If someone asks why only React? There would be no perfect answer. Because Angular Framework can perform all the operations that React can do.

Leave a Reply

Your email address will not be published. Required fields are marked *