Q1. What is the typical folder structure of a React project created with CRA?
A typical CRA project has folders: node_modules/ (dependencies), public/ (static files), src/ (source code). Inside src/ you'll find index.js (entry point), App.js (main component), App.css, index.css, and other components. There's also package.json, README.md, and gitignore.
Q2. What is the role of index.js in a React project?
index.js is the entry point of the application. It renders the root component (usually ) into the DOM element with id='root' from public/index.html. It also includes service worker registration for PWA if enabled.
Q3. Where should you place components in a React project?
It's common to create a components folder inside src/ to organize reusable components. You can further group them by feature or type (e.g., Layout, Common, Pages). Some developers also use a containers folder for stateful components. There's no strict rule, but consistency is key.
Q4. What is the purpose of the public/index.html file?
public/index.html is the main HTML file that gets served. It contains a where the React app is mounted. You can also include meta tags, links to fonts, or external scripts here. During build, the injected JavaScript and CSS files are automatically added to this file.
Q5. How do you organize CSS in a React project?
You can use regular CSS files imported into components, CSS Modules (styles.module.css) for scoped styling, or CSS-in-JS libraries like styled-components. CRA supports CSS Modules out of the box if you name files with .module.css extension.