Setting Up a React Project from Scratch Quiz

Explore the essential steps and tools involved in initializing a React project without using boilerplate tools. Learn about key packages, configuration practices, and the basic logic behind rendering with React.

1. Identifying Required Packages

   Which two packages must be included to render a React application in the browser?

   1. Webpack and Prettier
   2. Node and Express
   3. React and ReactDOM
   4. Parcel and Babel

   Explanation: React and ReactDOM are essential for rendering a React application in the browser; React contains the core API, while ReactDOM handles interacting with the DOM. Parcel and Babel are used for bundling and transpiling, not rendering. Webpack is another bundler option, but not required specifically for rendering. Node and Express are backend technologies, not related to rendering React on the frontend.

2. Understanding JSX Compilation

   What tool is typically used to transpile JSX code into browser-compatible JavaScript when setting up a React project from scratch?

   1. ESLint
   2. Babel
   3. Prettier
   4. Sass

   Explanation: Babel is the standard tool for converting JSX into regular JavaScript that browsers can interpret. ESLint is for code linting, Prettier is for code formatting, and Sass is used for styling, none of which are responsible for transpiling JSX.

3. Choosing a Bundler

   Which of the following tools can be used as a JavaScript bundler to manage project files and dependencies when starting a React project manually?

   1. SQL
   2. Gatsby
   3. ReactDOM
   4. Parcel

   Explanation: Parcel is a bundler that handles compiling and bundling JavaScript, including React files, for development and production. ReactDOM is for rendering, not bundling. SQL is a database language and unrelated to bundling. Gatsby is a React-based framework, not a bundler.

4. Project Initialization

   What is the primary purpose of running 'npm init' at the start of a new React project?

   1. To set up webpack configuration
   2. To create a package.json file
   3. To render components
   4. To install React automatically

   Explanation: 'npm init' generates a package.json file, which keeps track of the project's dependencies and scripts. It doesn't render components or install React. Setting up webpack configuration is a separate process, not handled by this command.

5. Understanding the Rendering Process

   How is a root component typically rendered into the DOM in a manually set up React project?

   1. By adding the component to package.json scripts
   2. By calling ReactDOM.render with the component and target DOM element
   3. By linking the component in a HTML meta tag
   4. By importing the component in index.css

   Explanation: ReactDOM.render is used to insert the root React component into a specified DOM element in the page. Importing in index.css or package.json scripts does not render a component. HTML meta tags do not play a role in rendering React components.