Creating a Simple Full-Stack Application with React and Node.js

In my previous blogs, I introduced React and Node.js. Now, let's bring them together to build something even more exciting: a simple full-stack application! You might think full-stack apps are only for larger projects, with multiple databases and complex structures. While conceptually that's true, practically, full-stack applications can be as simple as a small frontend with a basic backend. So, let’s break it down and see how easy it is to create a full-stack app with React and Node.js.

Step 1: Backend with Node.js and Express

Let's start by creating the backend. We’ll use Express as our server to send a simple JSON message response to the frontend.

1. Install Express: To get started, first install Express by running this command in your terminal:

   npm install express

1. Create the server: Now, let's create the server with a simple route that will return a greeting message.

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

   app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`)); 

Explanation:

• We import the express module and create an instance of it with express().
• We set up a simple GET route at /greet that responds with a JSON object containing a greeting message.
• We start the server on port 3000, and the console will log that the server is running.

---

Step 2: Frontend with React

Now, let’s create the frontend using React. We'll use two hooks: useState and useEffect to fetch data from the backend.

1. Create the React app: If you haven’t already set up your React app, you can create one using create-react-app by running:

   npx create-react-app my-fullstack-app
   cd my-fullstack-app

1. Write the frontend code: Now, let's modify the App.js file to fetch the data from our backend and display it.

   import { useState, useEffect } from 'react';

   export function App() {
     const [response, setResponse] = useState(null);

     useEffect(() => {
       const controller = new AbortController();
       // This is used to abort the fetch request if the component is unmounted
       const fetchData = async () => {
         try {
           const response = await fetch('http://localhost:3000/greet', {
             signal: controller.signal,
           });

           if (!response.ok) throw new Error("Couldn't fetch data");

           const data = await response.json();
           setResponse(data.message); // Corrected the response property here
         } catch (error) {
           console.error(error);
         }
       };

       fetchData();

       // Clean up function to abort the fetch request if needed
       return () => controller.abort();
     }, []); 

     return (
       <div>
         {response ? <p>{response}</p> : <p>Loading...</p>}
       </div>
     );
   }

Explanation:

• useState is used to hold the response data from the backend.
• useEffect is used to trigger the fetch request when the component mounts.
• We use the fetch() API to send a request to http://localhost:3000/greet and handle the response. If the fetch is successful, we update the response state with the message from the backend.
• We display the response in the component, showing "Loading..." while the request is in progress.

---

Step 3: Running the App

1. Start the backend: In the backend folder (where your server.js file is located), run:

   npm install express

1. Start the frontend: In the frontend folder (where your React app is located), run:

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

   app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`)); 

Now, open your browser and go to http://localhost:3000. You should see a simple message fetched from the backend, and it will display "Zee here...".

---

Conclusion

And that's it! You've just created a simple full-stack application using React and Express. It's a great start, and with this foundation, you can expand and build more complex applications. Happy coding!

---

Key Takeaways:

• A full-stack application doesn't need to be complex. A simple frontend and backend can be considered full-stack.
• React’s useState and useEffect hooks are great for fetching data from a backend API.
• Express is a simple and powerful framework for building backend APIs.

The above is the detailed content of Creating a Simple Full-Stack Application with React and Node.js. For more information, please follow other related articles on the PHP Chinese website!