Creating a Basic ReactJS Home Page: A Beginner's Guide Quiz

Explore how to set up a new ReactJS project and build a simple home page component with essential features. Great for beginners looking to understand the key steps of starting a React app.

1. Setting Up the Project

   Which command is used to create a new ReactJS application using create-react-app?

   1. react start simple-react-homepage
   2. create-react-app simple-react-homepage
   3. npm install react-homepage
   4. yarn new react-app

   Explanation: The command 'create-react-app simple-react-homepage' correctly uses Create React App to set up a new project. 'react start simple-react-homepage' and 'yarn new react-app' are not valid commands for creating a React app. 'npm install react-homepage' installs a package but does not generate a project structure.

2. Initial Cleanup

   After creating a new ReactJS project, which files are commonly deleted when cleaning up the starter template?

   1. App.css, App.test.js, logo.svg, setupTests.js
   2. HomePage.js, README.md, App.js, package.json
   3. index.html, favicon.ico, HomePage.js, serviceWorker.js
   4. App.js, HomePage.css, index.js, index.css

   Explanation: Removing 'App.css', 'App.test.js', 'logo.svg', and 'setupTests.js' helps clean up unused starter files. The other groups mention important files or files not part of the default template that should not be deleted.

3. Component Organization

   What is the recommended folder to create inside 'src' for organizing a new HomePage component?

   1. components
   2. assets
   3. helpers
   4. styles

   Explanation: 'components' is the best practice for storing and organizing React components like HomePage. 'styles' is used for CSS, 'assets' for images or icons, and 'helpers' for utility functions or logic.

4. Using a Custom Component

   How should the HomePage component be imported into App.js for use in the main application render?

   1. require('HomePage.js');
   2. import { HomePage } from './components/HomePage.js';
   3. import HomePage from './components/HomePage';
   4. import HomePage from './HomePage';

   Explanation: The correct ES6 import syntax is 'import HomePage from './components/HomePage';'. 'require' is for CommonJS and not typical in React, the third option omits the correct path, and the fourth uses named imports, which don't match a default export.

5. Running the Development Server

   Which command starts the local development server and opens the app in a browser during development?

   1. npm run build
   2. npm install
   3. node start-app
   4. npm start

   Explanation: 'npm start' will launch the development server and typically open the app in the browser. 'npm run build' builds the app for production without running a server, 'npm install' installs dependencies, and 'node start-app' is not a recognized npm script in this context.