Creating a Default App and Integrating React Query

Welcome to the tutorial on setting up a default app and adding React Query to it. Below is a step-by-step guide based on our video transcription to help you easily build and enhance your app.

Step 1: Creating and Running the Default App

Use the following command in the terminal to create the default app

Navigate to the new folder created

Start the application on a different port (e.g., 3002) to avoid conflicts:

Step 2: Setting Up React Query

React Query is a powerful tool for fetching and caching server-state in your React application. To integrate React Query, follow these steps:

1. Install React Query

2. Update the index.js file to include the React Query provider

Step 3: Creating a Functional Component for Fetching Data

1. Create a new file Companies.js

2. Ensure the API URL is correct

   • Update the fetchCompanies function with your actual API endpoint if needed.

Step 4: Integrating the Component

Update your main app file (e.g., App.js)

Step 5: Adding Some Basic CSS

1. Add the following styles to App.css

2. Make sure to import the App.css in App.js

With these steps, your application should now be set up to fetch and display a list of companies, and you have some basic CSS for styling.

Additional Notes

• This guide used GitHub Copilot for initial code generation, which can be very helpful in speeding up the development process.

• You can further customize and style your app according to your needs or refer to other parts of the course for more detailed front-end and back-end integration tips.

Feel free to explore more advanced CSS or JS functionalities to enhance your application further. Happy coding!