Scribd
Upload
8 views5 pages

Ex FSO

The document contains a React application that manages a web development curriculum and a notes application. It defines components for displaying course information and notes, including their headers, content, and totals. The application also utilizes hooks for state management and fetching data from an API for notes.

Uploaded by

duongkc4444
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views5 pages

Ex FSO

The document contains a React application that manages a web development curriculum and a notes application. It defines components for displaying course information and notes, including their headers, content, and totals. The application also utilizes hooks for state management and fetching data from an API for notes.

Uploaded by

duongkc4444
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Ex 2.1-2.

const Course = ({ courses }) => {


return (
<>
<Header name={courses.name} />
<Content parts={courses.parts} />
<Total total={courses.parts} />
</>
);
};
const Header = ({ name }) => {
return <>
<h2>{name}</h2>
</>
};
const Content = ({ parts }) => {
return <Part content={parts} />;
};
const Part = ({ content }) => {
return (
<div>
{content.map((obj) => (
<p key={obj.id}>
{obj.name} {obj.exercises}
</p>
))}
</div>
);
};
const Total = ({ total }) => {
const calcTotal = total.reduce((sum, obj) => sum + obj.exercises, 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: "Node.js",
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('http://localhost:3001/notes')
.then(response => {
setNotes(response.data)
})
}, [])

const addNote = (event) => {


event.preventDefault()
const noteObject = {
content: newNote,
important: Math.random() > 0.5,
id: notes.length + 1,
}

setNotes(notes.concat(noteObject))
setNewNote('')
}

const handleNoteChange = (event) => {


setNewNote(event.target.value)
}

const notesToShow = showAll


? notes
: notes.filter(note => note.important)

return (
<div>
<h1>Notes</h1>
<div>
<button onClick={() => setShowAll(!showAll)}>
show {showAll ? 'important' : 'all' }
</button>
</div>
<ul>
{notesToShow.map(note =>
<Note key={note.id} 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";

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
import PropTypes from 'prop-types';

const Note = ({ note }) => {


return (
<li>{note.content}</li>
)
}

Note.propTypes = {
note: PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
important: PropTypes.bool
}).isRequired
};

export default Note;

You might also like