React

React is a very popular library and is used by millions of developers. It is a free and open-source JavaScript library for building user interfaces. It makes it painless to create interactive UIs.

What is React ?

React is a free and open-source front-end JavaScript library for building user interfaces for building UI components. It is created and maintained by Facebook and a community of individual developers and companies.

It is popular for single-page applications by using third-party libraries like react-router-dom and mobile applications.

However It is only concerned with state management and rendering that state to the DOM, so creating React applications requires the use of additional libraries for routing and other purposes. it also needs client slide functionality.

JSX
Write HTML in JavaScript via JSX

JSX is very powerful. JSX brings HTML in JavaScript And JSX React become pretty funny and also reliable to use. without any knowledge you can write HTML in JavaScript this is the power of JSX.

In the past, it was very tough and messy to write functions. In some cases, we need to write HTML strings. Like this:

var className = "hero";
var text = "Hellow World";
var htmlElement = "<div class="\&quot;&quot;" +="" classname="">" + text + "</div>";

But Now using JSX it became very clear and formatted. Like this: (Thanks To JSX)

var className= "hero";
var text = "Hellow From JSX";
var htmlElement = <div classname={className}> {text} </div>

As you can see in the above code it’s well neat, clean, easy to write, and also easy to understand. This is the power of JSX.

Multiple component of single webpage
Components

After JSX One of the most important features of React is Components. We all know when we built a huge website the code becomes messy also it’s very tough to organize the code and make every section or component simple and reliable to maintain.

To solve this problem It bring Components Feature. in React you can code individual components and use them in main files.

Any webpage can be divided into multiple sections or parts but without React we need to write them in a single file. But now we can create an individual file of a particular component. Due to its components, it is very easy to manage the code.

Here is an example of a simple homepage with a navigation menu.

import React from 'react';
 
const Navbar = () => {
  return <h1>Navbar</h1>;
}
 
export default Navbar;
import React from 'react';
import Navbar from './Navbar';
 
const Home = () => {
  return <> <Navbar /> <h1>Welcome to The DTS Development Blog </h1> </>;
}
 
export default Home;

You can see in the above example now it’s very easy to manage and also we can easily collaborate.

React Props
Props

React Components fixed the problem of managing code and making it simple, but also it bring new problems that are of sending values or data from one component to another one. If we want to send values from the Home component to Navbar, it was almost not possible but React Props that problem too.

We can easily send data from one component to another using the help of React Props. React Props help to populate components with custom data. using props is also very simple.

Here is best example that you can easily understand :

import React from "react";
import Avatar from "./Avatar";

const Navbar = () => {
  return (
    <>
      <Avatar userName="Author1" imgUrl="avatarImage.png" />
      <h1>Welcome to The DTS Development Blog </h1>
    </>
  );
};

export default Navbar;
import React from "react";

const Avatar = ({userName, imgUrl}) => {
  return (
    <>
        <img src={imgUrl} alt={userName} />
    </>
  );
};

export default Avatar;

In this example, you can see we can easily use the data in our HTML that sends from Navbar Component to the Avatar Component. We can also simply pass only props else of {userName, imgUrl} but in JSX, we will need to use props.imgUrl else of direct imgUrl or props.userName else of direct userName.

Also note this example is of Its functional base Component.

There are also lots more features that we can use via libraries like :

  • Redux
  • Reflux
  • Flummox
  • MobX
  • Alt

That’s it for this Blog. Check out our Next and Previous Blogs.

Thank You!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.