Setting Up a React Project from Scratch Quiz

Learn the essential steps and core tools required for starting a ReactJS project by hand, covering dependencies, project structure, and key concepts for beginners.

1. Understanding React and ReactDOM

   What is the primary purpose of the ReactDOM library in a basic React project setup?

   1. It handles rendering React components to the browser's DOM.
   2. It handles styling and CSS preprocessing.
   3. It manages state within React components.
   4. It provides lifecycle methods to components.

   Explanation: ReactDOM's main role is to connect React components with the actual HTML DOM, allowing components to be displayed and updated in the browser. State management is handled within React itself, not ReactDOM. Lifecycle methods are features of React components, not ReactDOM. Styling and CSS preprocessing are separate concerns not managed by ReactDOM.

2. Manual React Setup

   When initializing a React project from scratch, which two core packages are essential to install for rendering components?

   1. babel and parcel
   2. react and redux
   3. react-router and react-dom
   4. react and react-dom

   Explanation: The essential packages for any React project are 'react' and 'react-dom'. 'react' provides the main library for creating components, while 'react-dom' allows the components to be rendered in the browser. 'redux' and 'react-router' are for state management and routing, respectively, but are not required to start. 'babel' and 'parcel' are tools for code transpilation and bundling, not core React libraries.

3. Role of a Bundler

   Why is a JavaScript bundler like Parcel or Webpack commonly used in setting up a new React project?

   1. To automatically write React components.
   2. To create CSS frameworks.
   3. To handle user authentication.
   4. To bundle source files and support importing modules.

   Explanation: A bundler combines various source files, enables module import/export, and produces a single file for the browser. It does not create components automatically, manage authentication, or generate CSS frameworks. These tasks require different solutions.

4. Understanding JSX and Transpilation

   Which tool is typically used to transpile JSX syntax into JavaScript understandable by browsers?

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

   Explanation: Babel is a transpiler that converts modern JavaScript, including JSX, into browser-compatible JavaScript. Prettier handles code formatting, ESLint is for code linting, and Sass is a CSS preprocessor, none of which transpile JSX.

5. Creating a Root Component

   In a simple React application, what is the purpose of the root App component?

   1. It provides built-in database integration.
   2. It is required for handling HTTP requests directly.
   3. It is used for server-side rendering only.
   4. It acts as the main entry point and organizes all other components.

   Explanation: The App component serves as the foundational component that organizes and renders other components. It is not reserved for server-side rendering, HTTP requests, or database interactions, which are handled separately in a React application.