Setting Up a React Project from Scratch Quiz

Explore the essentials of manually creating and configuring a ReactJS project, covering foundational concepts and setup tools for beginners in frontend development.

1. Choosing Core Packages

   Which two main libraries are required to render a React application in the browser when setting up a project from scratch?

   1. React and Babel
   2. React and ReactDOM
   3. React and Webpack
   4. React and Redux

   Explanation: React provides the core API for building components, while ReactDOM enables those components to be rendered to the browser's DOM. Redux is for state management, not rendering. Babel is a transpiler for JSX, and Webpack is a module bundler; neither directly renders React components.

2. Project Structure

   When manually setting up a React project, which file would typically contain the root HTML structure for your app?

   1. App.js
   2. index.html
   3. main.css
   4. package.json

   Explanation: The index.html file holds the base HTML for the application and includes a div element where the React app mounts. App.js contains React components, package.json manages project dependencies, and main.css is for styles.

3. Role of JavaScript Bundlers

   Why is a JavaScript bundler like Parcel used in setting up a React project from scratch?

   1. To deploy directly to production
   2. To bundle and transpile JavaScript files
   3. To manage CSS only
   4. To handle HTTP requests

   Explanation: A bundler like Parcel collects, transpiles, and combines JavaScript modules, including JSX, for browser compatibility. It does not directly deploy the project, manage only CSS, or process HTTP requests.

4. JSX and JavaScript

   What is the main benefit of using JSX syntax when creating React components?

   1. It manages user authentication
   2. It increases security
   3. It allows writing HTML-like code in JavaScript
   4. It automatically fetches data

   Explanation: JSX lets developers write HTML-like syntax directly within JavaScript, making component structure clearer. Security, data fetching, and authentication are handled separately and not directly by JSX.

5. Difference Between React and ReactDOM

   What is the primary role of ReactDOM in a React project?

   1. Providing lifecycle methods
   2. Rendering components into the webpage DOM
   3. Managing component state
   4. Styling components with CSS

   Explanation: ReactDOM bridges React components and the browser's DOM, making rendering possible. State management and lifecycle methods are core React features, while CSS styling does not require ReactDOM.