log

[yujing-student]

step 1 do this in the terminal yarn create react-app my-app

step 2 cd my-app

step 3 to build the app yarn build

step 4 fix issue

[yujing-student]

https://www.npmjs.com/package/@babel/plugin-proposal-private-property-in-object

in the terminal

yarn add @babel/plugin-proposal-private-property-in-object --dev

[yujing-student]

images added

I added images

// import React from 'react';
import Project from './project-unc-inc.png';
import image1 from './project1.jpg';
import image3 from './project2.jpg';

 <section>
                <h2>About Unc inc</h2>
                <p>On this page you can see the projects of unc inc</p>
                <ul>
                    <li>

                        <img src={Project} alt="project of unc inc" />
                    </li>
                    <li>

                        <img src={image1} alt="project of unc inc" />
                    </li>
                    <li>

                        <img src={image3} alt="project of unc inc"/>
                    </li>
                </ul>

            </section>

and i watch a tutorial to understand better what React is

[yujing-student]

navigation between pages

i followed this tutorial for navigation between pages

first i enter this in the terminal because i need to add it only

yarn add react-router-dom@latest

then i added this code under the navbar that the home is the default component and the login and dashboard are only visible if you click on one of them in the navigation

app.js

 <Router>
              <div className="content">
                  <Routes>
                      <Route path="/" element={<Home/>}/>
                      <Route path="/Login" element={<Login/>}/>
                      <Route path="/Dashboard" element={<Dashboard/>}/>
                  </Routes>
              </div>
          </Router>

code navbar.js

const Navbar = () => {
    return (

<nav className="navbar">
    <h1>Unc inc</h1>
    <ul>
        <li>
            <a className="test" href="/">Home</a>
        </li>
        <li>

            <a className="test" href="/Dashboard">Dashboard</a>
        </li>
        <li>
            <a className="test" href="/Login">Login</a>
        </li>
    </ul>
</nav>

    );
}

export default Navbar;