Understanding React Component Return Types and Practices

React Component Return Types

A component can return various types of values, including:

1. React Elements: JSX/Elements Created with React.createElement(). JSX elements are the most common return type from a React component.

2. Fragments / Arrays of JSX Elements: Fragments or arrays of JSX elements are a way to group a list of children without adding extra nodes to the DOM.

3. Portals: Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

   return ReactDOM.createPortal(<div>Modal Content</div>, document.getElementById("modal-root"));

4. Strings and Numbers: Components can also return plain strings or numbers.

5. Booleans and Null: Returning a boolean value or null will render nothing.

---

Why React Component Names Should Start With Capital Letter?

If you are rendering your component using JSX, the name of that component has to begin with a capital letter otherwise React will throw an error as an unrecognized tag. This convention is because only HTML elements and SVG tags can begin with a lowercase letter.

function SomeComponent {
  // Code goes here
}

You can define function component whose name starts with lowercase letter, but when it's imported it should have a capital letter. Here lowercase is fine:

function myComponent {
  return <p>Hello</p>;
}

export default myComponent;

While when imported in another file it should start with capital letter:

---

Can I Import SVG As React Component?

You can import SVG files as React components.

Using Create React App (CRA)

If you're using Create React App version 2.0 or later, it comes with built-in support for importing SVGs as React components. You can pass props and apply styling directly.

import { ReactComponent as Logo } from "./logo.svg";
function App() {
  return (
    <div>
      <Logo />
    </div>
  );
}

Using SVGR with Other Build Tools

If you're not using CRA or need more customization, you can use SVGR, a tool that transforms SVGs into React components.

1. Install SVGR:

   npm install @svgr/webpack --save-dev

2. Configure Webpack: Add the following rule to your Webpack configuration:

   module: {
    rules: [
        {
            test: /\.svg$/,
            use: ['@svgr/webpack'],
        },
    // other rules
    ],
   },

3. Import and Use the SVG:

   import React from "react";
   import { ReactComponent as Logo } from "./logo.svg";
   
   function App() {
     return (
       <div>
         <Logo />
       </div>
     );
   }