⚛️React setup : child components

adding more features to our React app

Creating child components keeps our code more organized and "modular"!

A new child component

So let's give this a try with src/Component.js, with CamelCase as the convention for component files:

/* reactjon/src/Component.js */

export function Component() {
  return (
    <div>
      <p>A child component!</p>
    </div>
  );
}

Notice how we did not say export default function Component() there!

The old parent component

Then, going back to src/App.js we then import and render Component.js:

/* reactjon/src/App.js */

import { Component } from './Component.js'

export default function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <h2>Let's begin our React App!</h2>
      <Component />
    </div>
  );
}

Some things to notice here:

• We use curly braces for { Component } to extract the function Component from src/App.js

• We cannot replace Component with another name because we did not specify it as an export default back in src/Component.js

• Sometimes, specifying a default in a child component helps if we wish to rename the child component later on

• This "HTML-inside-JavaScript" syntax is known as "JSX", or "JavaScript XML", allowing us to build user interfaces with a familiar markup language

Aliasing the imported component

If we want an imported component to have a different name, then we could still give it an alias using the as operator in the import statement:

/* reactjon/src/App.js */

import { Component as Whatever } from './Component.js'

export default function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <h2>Let's begin our React App!</h2>
      <Whatever />
    </div>
  );
}

Oftentimes, we would need to do this if there exist naming conflicts!