React Javascript 1 — Questions and Answers
Question 1: Which command should be used to start a new React project?
- npm create-react-app my-app
- npm create-react-app my-app
- npx create-react-app my-app (Correct answer)
- npx create-react-app my-app
Correct answer: npx create-react-app my-app
The command `npx create-react-app my-app` is the standard and recommended way to initiate a new React project. `npx` is a package runner that executes `create-react-app` without requiring a global installation, ensuring you always use the latest version. This command sets up a complete React development environment with all necessary configurations and boilerplate code.
Question 2: What does the command's reference to "my-app" mean? <br> <br> npx create-react-app my-app <br> </br>
- The title that you want to give your new app (Correct answer)
- The brand of a current app
- What kind of software you want to develop
- The location where you wish to put your app
Correct answer: The title that you want to give your new app
In the command `npx create-react-app my-app`, 'my-app' is a placeholder for the desired name of your new React application. When executed, `create-react-app` will create a new directory with this specified name, containing all the initial files and configurations for your project. You should replace 'my-app' with a descriptive name for your application.
Question 3: Which command is used to launch the local development server for React?
- npm run
- npm run dev
- npm build
- npm start (Correct answer)
Correct answer: npm start
After setting up a React project, the `npm start` command is used to launch the local development server. This command compiles your React application and opens it in your web browser, typically at `http://localhost:3000`. It also enables hot-reloading, which automatically updates the browser whenever you save changes to your code.
Question 4: What is the children prop?
- A property that lets you pass data to child components
- A property that lets you nest components in other components
- A property that lets you set an object as a property (Correct answer)
- A property that lets you add child values to state
Correct answer: A property that lets you set an object as a property
The `children` prop in React is a special property that allows components to receive and render content passed between their opening and closing tags. While its primary use is for component composition and nesting, the value of the `children` prop itself can be a JavaScript object, such as a React element object, an array of elements, or even a string. Therefore, it functions as a property that can hold an object representing the nested content.
Question 5: React components must start with a capital letter
- True (Correct answer)
- False
Correct answer: True
In React, it is a strict convention and requirement for all custom component names to begin with a capital letter. This naming convention allows React to differentiate between user-defined components and standard HTML elements, which always start with a lowercase letter. Failing to capitalize a component name will cause React to misinterpret it as a regular HTML tag, leading to rendering errors.
Question 6: When rendering a list using the JavaScript map() method, what is required for each element rendered?
- ID
- Data
- Key (Correct answer)
- Index
Correct answer: Key
When rendering a list of elements using the JavaScript `map()` method in React, each item must be assigned a unique `key` prop. The `key` prop helps React efficiently identify which items have been added, removed, or changed, which is crucial for optimizing performance and maintaining the correct state of list items during updates. Without unique keys, React's reconciliation algorithm can behave unpredictably.
Question 7: Which of the following is NOT a rule for React Hooks?
- Hooks cannot be conditional
- Hooks can only be called at the top level of a component (Correct answer)
- Hooks can be called in class or function components
- Hooks can only be called in inside React function components
Correct answer: Hooks can only be called at the top level of a component
React Hooks are specifically designed to be used exclusively within React function components. They cannot be called inside class components, as class components manage state and side effects using `this.state` and lifecycle methods. This fundamental rule ensures that Hooks provide a consistent and predictable way to use React features without the complexities of classes.
React Javascript 1
Which command should be used to start a new React project?