DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for React Custom Hook and JSX
Md Yasin Miah
Md Yasin Miah

Posted on

React Custom Hook and JSX

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

With JSX

import react from "react";

const Home () => {

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

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
suhakim profile image
sadiul hakim

Nice.
Try to use
'''Javascript /(lang name)
'''
That is how your code will look colourful

Collapse
 
yasin440 profile image
Md Yasin Miah

Thank you for your great idea :)

12 Gorgeous UI Components for Your Design Inspiration

12 Gorgeous UI components for your design inspiration: cards, text, buttons, checkboxes, icons, loaders and menus.