React03 – First component

A new project will be created:

npm create vite@latest

It will then ask you for a proyect name . If you want, name it react03.

Inside the src folder, create the components folder. Then, create the HelloWorld.jsx file with the following contents:

function HelloWorld(){

    return(<>
        <h2>HelloWorld</h2>
    </>)

}

export default HelloWorld;

The component that was just created will be used in the App.jsx file:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './components/HelloWorld'

function App() {
 

  return (
    <>
      <h1>App component</h1>
      <HelloWorld/>

    </>
  )
}

export default App

In your browser you will see the following screen:

The following structure remains in your project: