1. Creating a Componet

1. Introduction

In this lesson,we will discuss how to create a componet in React Javascript. Before diving into the details,it is really
iimportant to understand that every single component is essentially a funciton. So, to crease a componet,we need to start with a function.

2. Lesson

2.1 Create a componet

src
|-App.jsx
|-main.jsx

 

As I mentioned earlier, we need to create a component by starting with a function called 'App'. We'll also export this function so we can import it anywhere we want to render the component. Just add export before function and its name.

One more thing to remember: the function must return something called JSX (which stands for JavaScript XML). While it looks very similar to HTML, there are some key differences. By using the 'return' keyword, we can return JSX, which is essentially HTML, although it's also valid JSX

 

//App.jsx
//add default when it is a root component 
export default function App(){
  return(
    <div>
    <h1>Root Component</h1>
    </div>
  );
}

We will render this componet to the main.jsx file.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App'; // import App from the file we just created

//main.jsx

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App/>
  </StrictMode>
);

 

 

Simply place the App component between the StrictMode tags. This is where we'll render the App component.This is exaclty how we would render an HTML element to the document.

 

render image

 

2.2 Dependent Components

2.2.1 UserProfile

Now that we have a basic understanding of how to create a single component, it's time to create more complex, dependent functions. However, it's important to keep in mind that each component must be a function and return JSX. You'll hear this repeated often so that the concept becomes second nature.

Let’s create a single file called UserFile.jsx and add any tags you like. For this example, we suggest entering user information.

 

export function UserProfile(){
  return <div id="user-profile">
    <div>
      <p>Username: Bob</p>
      <div>
        <span>Email:</span>
        <span>sd2beatles@gmail.com</span>
      </div>
      <section>
        <span>Favorite Food</span>
        <br />
        <ul>
          <li>Korean BBQ</li>
          <li>Kimbob</li>
          <li>Sushi</li>
        </ul>
      </section>
    </div>

  </div>
}

We're going to render this inside the App component, which acts as the root. Just keep in mind that every component must belong to its main component.

 

 

import {UserProfile} from './components/UserProfile'

//App.jsx


export default function App(){
  return(
    <div>
    <h1>Root Component</h1>
    <UserProfile></UserProfile> 
    </div>
  );
}

 

 

2.2.2 Nesting componets insider others

 

Let’s create another JSX file and move the list of food from the UserProfile section into it. You’ll often see that we take components and nest them inside other components.

 

"In our UserProfile component, we’ll use an older method of creating components, which is no longer common practice. However, behind the scenes, React still uses these functions to create the components that are rendered to the virtual DOM."

 

 

Also, as for the third agumenets of children, you can add indefinite number of tags to the 'type' react.

 

 

//src/components/UserProfile.jsx

import { createElement} from "react";

export function UserFavoriteFood(){
  return createElement('section',null,
    <span>Favorite Food</span>,
    <br />,
    <ul>
      <li>Korean BBQ</li>
      <li>Kimbob</li>
      <li>Sushi</li>
    </ul>,
  );
}

import { UserFavoriteFood } from "./UserFavoriteFoods"
export function UserProfile(){
  return <div>
    <div>
      <p>Username: Bob</p>
      <div>
        <span>Email:</span>
        <span>sd2beatles@gmail.com</span>
      </div>

      <UserFavoriteFood></UserFavoriteFood>


    </div>

  </div>
}