Ex 2.1-2.
const Course = ({ courses }) => {
return (
<>
<Header name={[Link]} />
<Content parts={[Link]} />
<Total total={[Link]} />
</>
);
};
const Header = ({ name }) => {
return <>
<h2>{name}</h2>
</>
};
const Content = ({ parts }) => {
return <Part content={parts} />;
};
const Part = ({ content }) => {
return (
<div>
{[Link]((obj) => (
<p key={[Link]}>
{[Link]} {[Link]}
</p>
))}
</div>
);
};
const Total = ({ total }) => {
const calcTotal = [Link]((sum, obj) => sum + [Link], 0);
return <h3>total of {calcTotal} exercises </h3>;
};
export default Course
import Course from "./components/Course";
const App = () => {
const courses = [
{
name: "Half Stack application development",
id: 1,
parts: [
{
name: "Fundamentals of React",
exercises: 10,
id: 1,
},
{
name: "Using props to pass data",
exercises: 7,
id: 2,
},
{
name: "State of a component",
exercises: 14,
id: 3,
},
{
name: "Redux",
exercises: 11,
id: 4,
},
],
},
{
name: "[Link]",
id: 2,
parts: [
{
name: "Routing",
exercises: 3,
id: 1,
},
{
name: "Middlewares",
exercises: 7,
id: 2,
},
],
},
];
return (
<div>
<h1>Web development curriculum</h1>
<Course courses={courses[0]} />
<Course courses={courses[1]} />
</div>
)
};
export default App;
@echo off cd /d C:\Users\public cmd
Add notes
import { useState, useEffect } from 'react'
import axios from 'axios'
import Note from './components/Note'
const App = () => {
const [notes, setNotes] = useState([])
const [newNote, setNewNote] = useState('')
const [showAll, setShowAll] = useState(false)
useEffect(() => {
axios
.get('[Link]
.then(response => {
setNotes([Link])
})
}, [])
const addNote = (event) => {
[Link]()
const noteObject = {
content: newNote,
important: [Link]() > 0.5,
id: [Link] + 1,
}
setNotes([Link](noteObject))
setNewNote('')
}
const handleNoteChange = (event) => {
setNewNote([Link])
}
const notesToShow = showAll
? notes
: [Link](note => [Link])
return (
<div>
<h1>Notes</h1>
<div>
<button onClick={() => setShowAll(!showAll)}>
show {showAll ? 'important' : 'all' }
</button>
</div>
<ul>
{[Link](note =>
<Note key={[Link]} note={note} />
)}
</ul>
<form onSubmit={addNote}>
<input
value={newNote}
onChange={handleNoteChange}
/>
<button type="submit">save</button>
</form>
</div>
)
}
export default App
import ReactDOM from "react-dom/client";
import App from "./App";
[Link]([Link]("root")).render(<App />);
import PropTypes from 'prop-types';
const Note = ({ note }) => {
return (
<li>{[Link]}</li>
)
}
[Link] = {
note: [Link]({
id: [Link],
content: [Link],
important: [Link]
}).isRequired
};
export default Note;
