Building a React App from Scratch: A Step-by-Step Guide Quiz

Learn the fundamentals of setting up and building a basic React app using modern tools. This quiz covers project initialization, structure, component creation, and running a local development environment.

1. Checking Environment Prerequisites

   Which command can you use in a terminal to verify that Node.js is installed before creating a new React app?

   1. node -v
   2. npm install
   3. react-version
   4. create-react-app check

   Explanation: The 'node -v' command displays the current version of Node.js, confirming installation. 'npm install' installs packages but does not check for Node.js itself. 'create-react-app check' and 'react-version' are not valid commands for this purpose.

2. Project Creation Command

   What command sequence is used to create and enter a new React project folder using modern tooling?

   1. npx create-react-app my-react-app && cd my-react-app
   2. npx react-init my-react-app && cd my-react-app
   3. npm start react-app && cd react-app
   4. npm init react my-react-app && cd my-react-app

   Explanation: The correct command is 'npx create-react-app my-react-app' to generate the project, followed by 'cd my-react-app' to move into the directory. The other commands shown are either incorrect, outdated, or do not function as written for modern React projects.

3. Understanding Project Structure

   In a newly generated React project, which folder holds the main JavaScript application files you typically edit?

   1. node_modules
   2. src
   3. public
   4. config

   Explanation: The 'src' folder contains the application source files, such as components and style sheets. 'public' stores static files like HTML, 'node_modules' holds dependencies, and 'config' is not a standard folder in basic React setups.

4. Creating a Basic Component

   Which of the following represents a simple functional React component that displays a heading?

   1. App() { return <h1>Hello!</h1> }
   2. const App = () => { return ( <h1>Hello!</h1> ); };
   3. function App = <h1>Hello!</h1>;
   4. let App = document.createElement('h1');

   Explanation: The first option properly defines a React functional component using arrow function syntax, returning JSX. The other options use invalid JavaScript or React syntax and do not represent a correct component definition.

5. Running the App Locally

   After setting up the app and writing the first component, which command starts the local development server so you can see your app in the browser?

   1. react-serve
   2. node index.js
   3. npm start
   4. npm build

   Explanation: 'npm start' launches the development server and opens the app in the browser. 'node index.js' does not work for typical React apps, 'npm build' generates a production build, and 'react-serve' is not a standard command.