Create a React app served by Express.js & Node.js (and add TypeScript) Quiz

Explore the essential steps to integrate a React frontend with an Express.js backend and TypeScript for type safety in a full-stack application. Learn build, serve, and routing best practices for robust local development.

1. Setting up Node.js environment

   Which command initializes a new Node.js project and generates a package.json file in your current directory?

   1. npm install express
   2. npm init
   3. npx create-react-app
   4. git init

   Explanation: npm init creates a new package.json for your Node.js project. npx create-react-app sets up a React project, npm install express only adds the express module, and git init initializes a Git repository, not a Node.js project.

2. Serving static assets with Express

   What change allows an Express.js backend to serve the static files from a React build located in a sibling directory?

   1. Install npm globally
   2. Use express.static pointing to the React build folder
   3. Add scripts to package.json
   4. Update React's App.js file

   Explanation: Using express.static with the path to the React build folder lets Express serve those files. Adding package.json scripts relates to automation, installing npm globally is not required, and updating React's App.js does not affect backend static file serving.

3. Generating a TypeScript-enabled React app

   Which command creates a new React application with TypeScript template support?

   1. npm i express
   2. node index.js
   3. npm start
   4. npx create-react-app my-app --template typescript

   Explanation: The --template typescript flag with create-react-app generates a TypeScript-ready project. Installing express is for backend setup, npm start runs an existing app, and node index.js executes a particular JavaScript file instead of generating a project.

4. Single Page Application routing needs

   Why do Single Page Applications often rely on the server returning index.html for all undefined paths?

   1. Allows client-side routing to handle all routes
   2. Improves database connections
   3. Enables faster server-side rendering
   4. Reduces code in React components

   Explanation: Returning index.html for every route lets client-side code like react-router control rendering. Database connections are unrelated, faster server-side rendering needs additional frameworks, and reducing component code doesn't depend on routing setup.

5. Benefits of combining TypeScript in both backend and frontend

   What is an advantage of using TypeScript in both your Express backend and React frontend?

   1. Removes the need for package managers
   2. Improves image loading speed
   3. Eliminates the need for transpilation
   4. Maintains consistent typing across the full stack

   Explanation: TypeScript across backend and frontend enables type safety and consistent development practices. It does not eliminate the need for transpilation, improve image loading, or make package managers unnecessary.