Setting Up a React Project from Scratch Quiz

Explore the essential steps and tools involved in configuring a ReactJS project manually, from initial file setup to understanding core dependencies. Perfect for beginners learning how to build a React app without boilerplate generators.

1. Role of React and ReactDOM

   What is the primary purpose of including both React and ReactDOM libraries in a React project?

   1. ReactDOM manages package installation, while React compiles code
   2. React handles API calls, and ReactDOM stores state
   3. React provides component logic, while ReactDOM handles rendering to the DOM
   4. ReactDOM provides routing, while React manages styles

   Explanation: React supplies the high-level API for creating and managing components, whereas ReactDOM focuses on rendering these components into the actual browser DOM. ReactDOM does not handle routing or styles, and neither library deals with package installation or compiling code. API calls and state are managed by React, but not in the way described in other options.

2. Manual React Project Initialization

   Which of the following is an essential first step when manually setting up a React project without a command-line generator?

   1. Making a CSS framework the priority
   2. Creating an index.html file
   3. Installing a SQL database
   4. Writing a package.json before any files

   Explanation: The initial step in a manual setup is to create an index.html as the main entry point for your React app. While package.json and styling are important, they come after establishing the basic HTML structure. A SQL database is not needed for frontend React setup.

3. JavaScript Bundler Role

   Why is a JavaScript bundler like Parcel commonly added in a manual React setup?

   1. It manages hosting and deployment automatically
   2. It provides built-in authentication modules
   3. It directly replaces React and ReactDOM
   4. It packages and compiles JavaScript and assets for efficient browser delivery

   Explanation: A bundler like Parcel takes your JavaScript and other assets, compiles, and bundles them for speed and compatibility in browsers. It does not replace React or ReactDOM, nor does it handle authentication, hosting, or deployment on its own.

4. Transpiling JSX

   How does using JSX in React projects influence the development setup?

   1. If using JSX, you need a transpiler such as Babel
   2. JSX only works if installed inside public/index.html
   3. JSX automatically sets up database connections
   4. JSX works natively in all browsers with no extra tools

   Explanation: JSX is not natively understood by browsers and must be converted to JavaScript using a tool like Babel. It cannot be simply placed in an HTML file, and it has no role in setting up databases or connections.

5. Practical File Organization

   In a basic React project structure, where is the main application component typically imported and rendered?

   1. App.js is typically rendered in index.js and then injected into index.html
   2. App.js is placed directly in index.html as a script
   3. App.js is loaded through a remote API call
   4. App.js is imported only in a CSS file

   Explanation: The usual pattern is to import your main component (like App.js) into a JavaScript entry file (such as index.js), which then renders it into an element inside index.html. Placing it directly or loading it via CSS or API are not valid for React application rendering.