React

React is very popular library and used by millions of developers. React is a free and open source JavaScript library for building user interfaces. React 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.

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

However React 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 for other purposes. it also needs client slide functionality.

JSX
Write HTML in JavaScript via JSX

JSX is very powerful. JSX bring html in the JavaScript And to JSX React become pretty funny also reliable to use. NowWithout any knowledge you can write html in JavaScript this is power of JSX.

In the past it’s very tough and messy to write functions. In some cases we needs to write html string. 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 above code it’s well neat, clean and easy to write also easy to understand. This is power of JSX.

Multiple component of single webpage
Components

After JSX One of the most import feature of React is Components. We all know when we built huge website the code becomes messy also its very toughf to organize the code, make each and every section or components simple an reliable to maintain.

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

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

Here is the example of simple homepage with 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 above example now its very easy to manage and also we can easily collaborate easily.

React Props
Props

React Components fixed the problem of managing code and making it simple, but also it bring new problem that is of sending values or data from one component to another one. If we want to send values from 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 ne JSX -we will need to use props.imgUrl else of direct imgUrl or props.userName else of direct userName.

Also note this example are of React functional base Component.

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

  • Redux
  • Reflux
  • Flummox
  • MobX
  • Alt

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

Thank You!

Leave a Reply