3.Files_Folder.md

100 React Questions (Files & Folder)

Q1. What is NPM? What is the role of node_modules folder? V. IMP.

NPM (Node Package Manaher) is used to manage the dependencies for your React project. including the React library itself.

Q2. What is the role of public folder in React?

Public folder contains static assets that are served directly to the user's browser, such as images, fonts and the index.html file.

Q3. What is the role of src folder in React?

src folder is used to store all the source code of the application which is then responsible for the dynamic changes in your web application.

Q4. What is the role of index.html page in React? V. IMP.

• index.html file is the main HTML file (SPA) in React application.
• Here the div with "id=root" will be replaced by the component inside index.js file.

Q5. What is the role of index.js file and ReactDOM in React? V. IMP.

• ReactDOM is a JavaScript library that renders components to the DOM or browser.

• The index.js is the JavaScript file that replaces the root element of the index.html file with the newly rendered components.

  import React from "react";
  // import ReactDOM 
  import ReactDOM from "react-dom/client";
  import "./index.css";
  import App from "./App";
  
  // store the reference of root to a 'root' variable
  const root = ReactDOM.createRoot(
  document.getElementById("root")
  );
  
  // call the render method of the variable.
  root.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>
  );

Q6. What is the role of App.js file in React? V. IMP.

• App.js file contains the root component (App) of React application.

• App component is like a container for other components.

• App.js defines the structure, layout, and routing in the application.

  import AppChild from "./Others/AppChild";
  
  function App() {
      return (
          <div>
              <AppChild/>
          </div>
      )
  }
  
  export default App;

Q7. What is the role of function and return inside App.js?

Function

• The function keyword is used to define a JavaScript function that represents your React component.
• function is like a placeholder which contains all the code or logic of the component.
• The function takes in props as its argument (if needed) and returns JSX.

Return

• return is used to return the element from the function.

Q8. Can we have a function without a return inside App.js?

Yes a fucntion without a return statement is possible.

• In that case, your component will not render anything in UI.
• The common use case is for logging purpose.

Q9. What is the role of export default inside App.js?

Export statement is used to make a component available for import using "import" statement in other files.

Q10. Does the file name and the component name must be same in React?

No the file name and the component name don't have to be the same.

• However, it is recommended to keep them same for easier to organize and understand your code.

---

Previous: React Basic II
Next: JSX