Hello Everyone, In this article, we are going to explore what is React JSX, Component, props, and Hooks.

What is JSX?

JSX means to be javascript XML/Html. We can write react code using a .js file, and that is completely okay but most people find it helpful as a visual aid when find working with UI inside the javascript code. More of that instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.

Here is a quick example of Embed an expression in JSX

const name = 'Deep'
const element = <h1> Hello, This is {name} </h1>

As we know JSX is much closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example, class becomes className in JSX. For a detailed guide, you can refer to this.

What is a Component?

In React, components are like Javascript functions. It let you split the UI into independent, reusable pieces, and this is about each piece in isolation. In React there are mainly two types of components.

Function Components
Class Components

Function Components

Functional components are simply javascript functions also. We can create a functional component in React by writing a javascript function. These functions may or may not receive data as parameters but we will discuss them by taking a small example.

function Welcome(props) {
  return <h1>Hello, my Name is {props.name}</h1>;
}

Class Components

A class component is a more featured way or we can say feature-rich to define a React component. It also acts like a function that receives props, but that function also considers a private internal state as additional input that controls the returned JSX. Mainly most people use function components rather than class, but we have to know about them as well.

class Welcome extends React.Component {
  render() {
    return <h1>Hii, my Name is {this.props.name}</h1>;
  }
}

What is props?

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”

const root = ReactDOM.createRoot(document.getElementById('root'));

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  root.render(<Clock date={new Date()} />);
}

setInterval(tick, 1000);

In the above article, props are passed to return to local time inside the div which can be used multiple times inside the function Clock or outside the function also.

What is Hooks

React Hooks are simple Javascript functions that we can use to isolate the reusable part from a functional component. Hooks allow you to reuse stateful logic without changing your component hierarchy. There are So many standards built-in hooks (we are discussing all of them in a separate Blog) but let me explain with an example of useState()

let's create a function as a name example() then declare a new state variable called 'count'

function Example(){
  const [count, setCount] = useState(0);

once you write this react will automatically import 'useState' from its library and placed top of the function.

import React, {useState} from 'react';
function Example(){
  const [count, setCount] = useState(0);

Then you have to return some JSX code for showing your data inside a div.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}> Increase </button>
      <button onClick={() => setCount(count - 1)}> Decrease </button>
    </div>
  );
}

In the above code as you can see we use onClick() event for setCount and increase/decrease the count value to 1 while clicking on two Names.

That's all for guys, I hope you like this small article. Thank You.

All about JSX, Component, Props, and Hooks

Table of contents