Scribd
Upload
26 views7 pages

React Js

The document contains a custom React hook 'useFetch' for fetching data from a given URL, handling loading states and errors. It also includes a simple React component 'MyApp' that renders a welcome message and a button, as well as an 'Input' component that captures and displays user input. Additionally, it provides commands for setting up a React app using npm.

Uploaded by

gesica2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views7 pages

React Js

The document contains a custom React hook 'useFetch' for fetching data from a given URL, handling loading states and errors. It also includes a simple React component 'MyApp' that renders a welcome message and a button, as well as an 'Input' component that captures and displays user input. Additionally, it provides commands for setting up a React app using npm.

Uploaded by

gesica2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

import { useEffect, useState } from "react";

const useFetch = (url) => {


const [data, setData] = useState(null);
const [isPending, setIsPending] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const abortController = new AbortController();

fetch(url, { signal: abortController.signal })


.then((response) => {
if (!response.ok) {
throw Error("Could not fetch the data for that resource");
}
return response.json();
})
.then((data) => {
setData(data);
setIsPending(false);
setError(null);
})
.catch((err) => {
if (err.name === "AbortError") {
console.log("Fetch aborted");
} else {
setIsPending(false);
setError(err.message);
}
});

return () => abortController.abort();


}, [url]);

return { data, isPending, error };


};

export default useFetch;

function MyButton() {

return (

<button>

I'm a button
</button>

);

export default function MyApp() {

return (

<div>

<h1>Welcome to my app</h1>

<MyButton />

</div>

);

//creating react app

Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope CurrentUser

in cmd
npm init react-app react.js

in cmd
npm run start
import { useState } from "react";

export default function Input() {


const [myinputvalue, setmyinputvalue] = useState("");
function Handdleinput(event) {
setmyinputvalue(event.target.value);
}

return (
<div>
<label> Your name</label>
<input onChange={Handdleinput} type="text" value={myinputvalue}
/>
<h1>{myinputvalue} </h1>
</div>
);
}

You might also like