DEV Community

Cover image for What is react?
Manpreet Singh
Manpreet Singh

Posted on

What is react?

Simplest meaning
A JavaScript library for building user interfaces

React is a javascript library which is used for building user interfaces. 😎
It contains three important things

  1. Declarative
  2. Component-Based
  3. Learn Once, Write Anywhere

1. Declarative

React makes it painless to create interactive UIs.

For example: If we want to add a tag to the other tag so we have to write code like this in javascript

  • first, get the id or class name of another tag

  • then put the tag in it with the help of innerHTML

Image description

but in react we don't need this kind of stuff

  • Just create a function like a javascript function

  • And return the tag that's it.

  • And everything is maintained by the react.

Image description

Now you have created the component.
what is a component? we will talk about it in the component section

2. Component-Based

  • Component means dividing the big UI code into the small UI block of code

For example

  • let's say we have a home page where have put all the code in it like buttons, navbar, sidebar, body and so on right.

  • Suppose we created a new page like about us where we want to add a button.

  • So what we do is just copy the button code from the home page and past it on the about us page

  • But there is a problem if we change the colour of the button so we have to change the button colour on every page

Image description

So this problem is resolved by COMPONENT

  • Let's take the previous example, how does the component help us to solve this problem?

  • First, it creates a separate file like button.js (Component) for the button code Ok

  • Then it just links the button.js file with a home page and about us page

So if any changes occur in the button so we just need to change the button file and then all the files which import it. their button will change

Image description

3. Learn Once, Write Anywhere

this one means reusability

  • Right, Now code is more reusable

  • we can take the button example create a new button component and put the button code into it.

  • And use this component in every file where we want to add button code this is reusable

Top comments (0)