Understand the react flow and structure : Summary of Tutorial 3 of chai aur React series

Watch - Chai aur react #3

• Script Tags in CRA:

  • In CRA (Create React App), there is no visible <script> tag in the index.html file during development because the React Scripts dependency handles the injection of these scripts dynamically when the app is built and run in production. This makes the development environment cleaner.

  • Vite, on the other hand, uses a different setup where the script tags are more visible and directly added for simplicity.

• Component Naming Convention:

  • You’re absolutely right! React components must start with a capital letter because React treats lowercase tags as HTML elements. If a component name starts with a lowercase letter, React will think it’s a built-in HTML element, which can lead to issues.

  • For file names, while it’s a good practice to keep them in PascalCase (first letter capitalized) for consistency, this is not strictly enforced by React. It's more of a convention that helps maintain clear organization and readability.

• File Extensions (.js vs .jsx):

  • React doesn’t strictly require .jsx for files containing JSX. You can use either .js or .jsx, but as you mentioned, it's considered a good practice to use .jsx for files that contain JSX code (HTML-like syntax in JavaScript). It helps in identifying files that are rendering UI components.

• Single Page Application (SPA) and root div:

  • React applications are indeed single-page applications (SPA). All the dynamic content and rendering happen within the root div, meaning the entire app is essentially loaded onto a single page. When you navigate or interact with the app, React updates the content within the root div without refreshing the whole page.

• Strict Mode:

  • Strict Mode is a helpful tool in React that highlights potential problems in the application. It helps catch issues like unsafe lifecycle methods or deprecated APIs during development, but it has no effect on production builds.