Building a Full-Stack Web Application with React.js and Node.js: Step-by-Step Guide Quiz

Explore essential concepts for developing a scalable full-stack web application using React.js for the frontend and Node.js with Express.js for the backend. This quiz covers setup, basic API construction, data fetching, and running both servers together.

1. Setting Up the Project Structure

   Which command sequence correctly initializes separate frontend and backend directories for a full-stack application using create-react-app and Express.js?

   1. npx create-react-app server && cd server && npm install node.js && mkdir client
   2. mkdir fullstack-app && cd fullstack-app && npx create-react-app client && mkdir server && cd server && npm init -y && npm install express
   3. npm init react-app myApp && mkdir backend && cd backend && npm get express
   4. mkdir project && npx create-app frontend && mkdir backend && npm start backend

   Explanation: This sequence properly sets up separate folders for the frontend ('client' using create-react-app) and the backend ('server' using Express.js), which is a best practice for organization in full-stack projects. The other options either use incorrect commands or misplace directories, leading to setup issues.

2. Basic Express.js API Creation

   Which Express.js code defines a GET endpoint at /api/data that responds with a JSON array of user objects?

   1. app.fetch('/api/data', (req, res) => { res.json({ users: [] }); });
   2. app.post('/data', (request, response) => { response.send('User data'); });
   3. app.get('/users', (req, res) => { res.send(data); });
   4. app.get('/api/data', (req, res) => { const data = [ { id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' } ]; res.json(data); });

   Explanation: This code creates a GET request at /api/data and returns a JSON array of user objects, meeting the requirements. The second option uses POST and doesn't return a JSON array, the third uses an invalid method, and the fourth sends data to a different path and may not return JSON.

3. Fetching Data from the API in React.js

   In a React.js application, which approach correctly fetches data from an API endpoint and updates component state on mount?

   1. componentDidMount() { setData(fetch('/api/data')); }
   2. useEffect(() => { fetch('/api/data').then(res => res.json()).then(data => setData(data)); }, []);
   3. useState(() => fetch('/api/data').then(res => res.json()), []);
   4. setInterval(() => fetch('/api/data'), 1000);

   Explanation: The first option uses useEffect with an empty dependency array to fetch data once when the component mounts and updates state with setData. The second option is a method for class components, not hooks-based components. The third misuses useState, and the fourth sets up repeated fetching, not one-time data retrieval.

4. Running Frontend and Backend Servers

   What is the correct way to start both the React frontend and Node/Express backend servers during development?

   1. Start the server with 'npm run dev' from the root directory to launch both servers.
   2. Run 'npm start' in the frontend directory and 'node index.js' in the backend directory, each in a separate terminal.
   3. Only run 'npm run build' in the client directory to start both servers automatically.
   4. Use 'npm deploy' in the backend directory, then 'react-start' in the frontend directory.

   Explanation: Starting 'npm start' in the frontend and 'node index.js' in the backend, each in its own terminal, ensures both servers run concurrently. The other methods either reference non-standard commands or steps, which will not reliably run both parts of the application during development.

5. Expanding and Deploying Full-Stack Applications

   After building a basic full-stack app with React.js and Node.js, which enhancements can be made to expand functionality or deploy the project?

   1. Convert the frontend into a static HTML page without JavaScript logic.
   2. Downgrade to older versions of React and Node for better compatibility.
   3. Integrate databases like MongoDB or deploy the app to cloud services for broader functionality and wider accessibility.
   4. Remove the backend and make all API calls directly from the frontend to third-party services.

   Explanation: Integrating databases and deploying to the cloud extend the app's features and make it accessible to more users. Removing the backend or essential JavaScript capabilities reduces functionality, while downgrading components can limit access to new features and best practices.