diff options
author | Ibrahim Mkusa <ibrahimmkusa@gmail.com> | 2023-04-22 22:13:22 -0400 |
---|---|---|
committer | Ibrahim Mkusa <ibrahimmkusa@gmail.com> | 2023-04-22 22:13:22 -0400 |
commit | 864c74dd1ac16274694aee4c0d2f5b52cebef246 (patch) | |
tree | 3e60e0fd8ee51ac15518d46dd1e6269628593ea6 /part1/courseinfo/src | |
parent | 13cc25a9e1a595b949c948174bd1c82fda50cc0a (diff) |
Did exercises 1.1-1.2
Diffstat (limited to 'part1/courseinfo/src')
-rw-r--r-- | part1/courseinfo/src/App.js | 41 | ||||
-rw-r--r-- | part1/courseinfo/src/index.js | 6 |
2 files changed, 47 insertions, 0 deletions
diff --git a/part1/courseinfo/src/App.js b/part1/courseinfo/src/App.js new file mode 100644 index 0000000..35bb178 --- /dev/null +++ b/part1/courseinfo/src/App.js @@ -0,0 +1,41 @@ +const Header = (props) => { + return ( + <h1>{props.name}</h1> + ) +} + +const Part = (props) => { + return ( + <p> + {props.part} {props.desc} + </p> + ) +} + +const Total = (props) => { + return ( + <p>Number of exercises {props.one + props.two + props.three}</p> + ) +} + +const App = () => { + const course = 'Half Stack application development' + const part1 = 'Fundamentals of React' + const exercises1 = 10 + const part2 = 'Using props to pass data' + const exercises2 = 7 + const part3 = 'State of a component' + const exercises3 = 14 + + return ( + <div> + <Header name={course}/> + <Part part={part1} desc={exercises1} /> + <Part part={part2} desc={exercises2} /> + <Part part={part3} desc={exercises3} /> + <Total one={exercises1} two={exercises2} three={exercises3} /> + </div> + ) +} + +export default App diff --git a/part1/courseinfo/src/index.js b/part1/courseinfo/src/index.js new file mode 100644 index 0000000..a9e69b3 --- /dev/null +++ b/part1/courseinfo/src/index.js @@ -0,0 +1,6 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; + +import App from './App'; + +ReactDOM.createRoot(document.getElementById('root')).render(<App />); |