Setting Up a React Project from Scratch Quiz

Explore the essentials of creating a React project from the ground up, including dependencies, folder structure, and core tools. Perfect for those beginning their journey with modern front-end development.

1. React and ReactDOM Packages

   Which two packages are necessary to render a React application in the browser when setting up a new project manually?

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

   Explanation: React contains the core library while ReactDOM provides the methods to render components in the browser. React and Redux are used together for state management, not rendering. React Native is for mobile development and Babel is a transpiler. Parcel and Webpack are bundlers and do not render React components themselves.

2. Manual Project Structure

   When manually creating a React project, what is the typical first file needed to start the web application?

   1. App.js
   2. webpack.config.js
   3. index.html
   4. package.json

   Explanation: An index.html file is essential as it is the entry point where the React app is rendered. package.json comes later for managing dependencies, App.js commonly holds the main component, and webpack.config.js is needed only if configuring Webpack.

3. Role of a JavaScript Bundler

   Why is adding a JavaScript bundler like Parcel important in a custom React project setup?

   1. It bundles multiple files for the browser
   2. It hosts the website online
   3. It renders components to the DOM
   4. It manages React state

   Explanation: A bundler like Parcel combines JavaScript and assets into files that browsers can efficiently use. Bundlers do not render to the DOM (ReactDOM does this), manage state, or serve as hosting solutions.

4. Understanding JSX Syntax

   What does JSX syntax in React enable developers to do within JavaScript files?

   1. Write JavaScript inside HTML files only
   2. Directly manipulate the DOM without ReactDOM
   3. Bundle assets without a bundler
   4. Write HTML-like code directly in JavaScript

   Explanation: JSX allows embedding HTML-like syntax within JavaScript, making component structure clear and concise. It does not bypass ReactDOM for DOM rendering, does not perform bundling, and is not limited to HTML-only scenarios.

5. Purpose of Babel

   What is the primary purpose of Babel when setting up a React project from scratch?

   1. Create HTML files automatically
   2. Manage state across the application
   3. Bundle JavaScript files
   4. Transpile JSX and modern JavaScript into browser-compatible code

   Explanation: Babel converts JSX and newer JavaScript syntax into code browsers can understand. It does not handle state management, file bundling (handled by bundlers), or automatic HTML generation.