React Custom Hook and JSX

#javascript #react #programming #beginners

React Custom Hooks

Custom Hooks

The reusable function can be a Hook. When we create a logical function, that function can be used in multiple components. For that we can extract out logic to reuse. A hook function name start with “use” example: “useFetch”

Usually we need to fetch data in different components like this.

import { useState, useEffect } from "react";

const Home = () => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};
export default Home;

So now we can create a Hook for fetch logic as we can reuse it in other components. Like this,

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

Now we can fetch data with our custom Hook. as usual

import react from "react";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};
export default Home;

JSX with React

JSX stands for Javascript XML. normally we can not write HTML in react without createElement() or appendChild() method. But JXL allows us to write HTML in Javascript to place in DOM. JSX converts HTML code into react element and it is an extension of Javascript based on ES6.

Without JSX

import react from "react";
const Home () => {
    const myElement = react.createElement("h2", {}, "we are not using JSX");
return (
    {myElement}
 );
};
export default Home;

With JSX

import react from "react";

const Home () => {

return (
    <h2>we are using JSX</h2>
 );
};
export default Home;

Expressions in JSX
React components accept only elements. It can be with one HTML tag or fragment also can use parameter in { } ”curly bracket”

import react from "react";
const Home () => {
const heading = “Expressions in JSX”
return (
    <div>
        <h>{heading}</h1>
        <p>we are using JSX</p>
        <span>react accept only one section.</span>
     </div>
  );
};
export default Home;

With fragment <> </>

import react from "react";
const Home () => {
return (
     <>
       <div>
            <h>heading</h1>
            <p>we are using JSX</p>
            <span>react accepts only one section.</span>
        </div>
        <div>
            <h>heading</h1>
            <p>we are using JSX</p>
            <span>react accepts only one section.</span>
        </div>
    </>
  );
};
export default Home;

Elements must be closed and class attribute is className

import react from "react";
import logo from "./logo.favicon";
const Home () => {
return(
    <input className= "email" type= "email" />
     <img className= "logo" src= {logo} />
  );
};
export default Home;