How to retrieve data in React with TypeScript?

Frontend and Backend Development
1

I’m looking for an example demonstrating how to store data and implement interfaces in a React application using TypeScript. Specifically, I want to know how to set this up with XAMPP on a local server along with a simple database.

Here’s an example of how I might structure the code:

interface UserData {
    userId: number;
    fullName: string;
    dateOfBirth: string;
    sex: string;
    registrationDate: string;
}

const [members, updateMembers] = useState<UserData>();

const loadData = async () => {
    try {
        const response = await fetch(‘http://localhost:3000/api/users’);
        const result = await response.json();
        updateMembers(result);
    } catch (error) {
        console.error(error);
    }
    console.log(members);
}

useEffect(() => {
    loadData();
}, );

2

Hey Silvia! :four_leaf_clover: have you considered how error handling might change when using different HTTP libraries, like axios, instead of fetch? :thinking: Also, how’s your experience with managing state changes in larger components? These can sometimes get tricky with TypeScript. I’m curious about your approach there! :smiling_face:

3

Hey there! One thing to note is using async functions from servr side to get data can hlp reduce load times. Also, ensure u’ve setup ur CORS policies when pullin data from local server to prevent errors. Good luck with ur XAMPP project! :rocket: