Setting Up a React Project from Scratch Quiz

Learn the essential steps for manually creating a modern ReactJS project, including file structure, dependencies, and core packages. Understand the basics needed before diving into application development.

1. Choosing the Initial HTML File

   When starting a React project from scratch, which file is typically created first as the entry point for the application?

   1. App.jsx
   2. main.js
   3. style.css
   4. index.html

   Explanation: index.html is the standard entry point, housing the root element where the React app will render. main.js and App.jsx contain JavaScript or JSX code, but do not serve as the entry container for the DOM. style.css is for styling, not initial structure.

2. Understanding React and ReactDOM

   What is the purpose of importing both the React and ReactDOM packages when setting up a frontend project?

   1. React enables component creation while ReactDOM handles rendering to the DOM.
   2. ReactDOM provides routing while React handles CSS.
   3. React handles HTTP requests and ReactDOM handles events.
   4. Both are required only for server-side rendering.

   Explanation: React is used to create and structure components; ReactDOM is explicitly required for rendering these components into the browser's DOM. The distractors confuse their purposes or are unrelated to their true roles.

3. Role of a JavaScript Bundler

   Why is a tool like Parcel or another JavaScript bundler used when building a React application from scratch?

   1. To only add styles automatically.
   2. To generate HTML files without scripts.
   3. To combine code, transform JSX, and manage dependencies for browser compatibility.
   4. To replace package.json in managing dependencies.

   Explanation: A bundler processes JSX, bundles modules, and manages dependencies to ensure the code works in the browser. Adding styles is not its main purpose; it does not replace package.json or generate HTML files without scripts.

4. Installing Dependencies

   Which command is typically used to manually add React dependencies to a new project using a Node.js package manager?

   1. run install react-js
   2. react-create-app myApp
   3. add-react-modules
   4. npm install react react-dom

   Explanation: npm install react react-dom is the standard command to add React and ReactDOM manually via npm. The other options are either incorrect syntax or imaginary commands.

5. Creating a Simple React Component

   What does a basic functional React component return to indicate what should be rendered in the browser?

   1. A CSS selector
   2. A JSX element
   3. A string of HTML
   4. A JSON object

   Explanation: A functional React component returns a JSX element, which is then transformed by tools like Babel for browser rendering. CSS selectors are used for styling, JSON is for data, and raw HTML strings are not returned by React components.