React, is a Javascript library for building User Interfaces created by Facebook and open-sourced since 2013.  it's safe to say that react has been the most compelling UI library of late times. We use it to build components that address logical reusable pieces of the UI. The excellence of React is that the simplicity of building a component has been brought down to its theoretical least. It's simply a Javascript function. The return value from this function is your HTML or a UI, which is written in a special syntax called JSX. JSX permits you to effortlessly combine Javascript with HTML markup.

import React from "react";

export default function Code() {
  return (
    //Your JSX script goes here
    <div>
      <p>Hello World</p>
    </div>
  );
}
JSX programming

If you need to pass data into a component, you essentially pass it a props argument which you can then reference inside the function body or in the UI utilizing braces. 

import React from "react";

export default function Code(props) {
  return (
    //Your JSX script goes here
    <div>
      <p>{props.text}</p>
    </div>
  );
}
Parameter passing

If the value changes, React will "react" to refresh the UI. On the off chance that we need to give our component its own inner state, we can utilize the state Hooks. The Hook is only a function that returns a value just as a normal function returns a value. In this case, "count" is our reactive state and "setCount" will change the state when utilized in the format. The count will consistently show the latest value. Then we can tie "setCount" to a button click event so the user can change its state. 

import React from "react";

export default function Code() {
  const [count, setCount] = useState(0);
  return (
    //Your JSX script goes here
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}></button>
    </div>
  );
}
State management with hooks

React gives a collection of other built-in hooks to deal with common use cases. However, the primary reason you should utilize react isn't simply the library, yet the gigantic ecosystem that encompasses it. React itself couldn't care less about routing, state management, animation, or anything like that, rather it allows those concerns to advance normally inside the open-source community.

Regardless of what you're attempting to do, there's conceivable a decent supporting library to assist you with accomplishing it. Need a static site? You have Gatsby, Need server-side rendering? You have Next JS. Need animation? You have React-Spring, Need state management? you have Redux, MobX, Flux, Recoil,  X-State, and more. you have an unending inventory of choices to complete things in the manner in which you like them. To really sweeten the deal, once you have "React" down, you can undoubtedly bounce into React Native and begin building mobile apps. And it's nothing unexpected that knowing this little UI library is perhaps the most sought-after ability for front-end engineers today.

This was "React JS in 1 minute". On the off chance that you need to see all the more short readings like this, make sure to subscribe and check out further developed React content here at Sharooq. I will see you in the following articles.