diff --git a/04_Day_Component/04_components.md b/04_Day_Component/04_components.md index 39ef4d3..f3c818c 100644 --- a/04_Day_Component/04_components.md +++ b/04_Day_Component/04_components.md @@ -88,7 +88,7 @@ class Parent { } } -const p1 = Parent('Asabeneh', 'Yetayeh', 'Finland', 'FullStack Developer') +const p1 = new Parent('Asabeneh', 'Yetayeh', 'Finland', 'FullStack Developer') class Child extends Parent { constructor(firstName, lastName, country, title, skills) { @@ -105,12 +105,14 @@ class Child extends Parent { } } +const skills = ['HTML', 'CSS', 'JS', 'React'] + const child = new Child( 'Asabeneh', 'Yetayeh', 'Finland', 'FullStack Developer', - ['HTML', 'CSS', 'JS', 'React'] + skills ) ``` diff --git a/05_Day_Props/05_props.md b/05_Day_Props/05_props.md index 4cb1cee..2ed3f66 100644 --- a/05_Day_Props/05_props.md +++ b/05_Day_Props/05_props.md @@ -976,6 +976,25 @@ const UserCard = ({ user: { firstName, lastName, image } }) => ( ) +// A button component + +const Button = ({ text, onClick, style }) => ( + +) + +const buttonStyles = { + backgroundColor: '#61dbfb', + padding: 10, + border: 'none', + borderRadius: 5, + margin: 3, + cursor: 'pointer', + fontSize: 18, + color: 'white', +} + // Main Component const Main = ({ user, techs, greetPeople, handleTime }) => (
@@ -985,8 +1004,8 @@ const Main = ({ user, techs, greetPeople, handleTime }) => ( -
) @@ -1011,7 +1030,7 @@ const App = () => { firstName: 'Asabeneh', lastName: 'Yetayeh', }, - date: new Date(), + date: new Date(), // date needs to be formatted to a human readable format } const date = new Date() const techs = ['HTML', 'CSS', 'JavaScript'] @@ -1043,94 +1062,6 @@ const rootElement = document.getElementById('root') ReactDOM.render(, rootElement) ``` -```js -import React from 'react' -import ReactDOM from 'react-dom' - -const welcome = 'Welcome to 30 Days Of React' -const title = 'Getting Started React' -const subtitle = 'JavaScript Library' -const author = { - firstName: 'Asabeneh', - lastName: 'Yetayeh', -} -const date = 'Oct 4, 2020' - -const copyRight = 'Copyright 2020' -const techs = ['HTML', 'CSS', 'JavaScript'] - -// Header Component -const Header = (props) => ( -
-
-

{props.title}

-

{props.subtitle}

-

- {props.author.firstName} {props.author.lastName} -

-

{props.date}

-
-
-) - -// User Card Component -const UserCard = ({ firstName, lastName, image }) => ( -
- {firstName} -

- {firstName} - {lastName} -

-
-) - -// TechList Component -const TechList = (props) => { - const techsFormatted = props.techs.map((tech) =>
  • {tech}
    • ) - return techsFormatted -} - -// Main Component -const Main = () => ( -
    -
    -

    Prerequisite to get started react.js:

    -
      - -
    -
    -
    -) - -// Footer Component -const Footer = (props) => ( - -) - -// The App, or the parent or the container component -const App = () => ( -
    -
    -
    -
    -
    -) - -const rootElement = document.getElementById('root') -// we render the JSX element using the ReactDOM package -ReactDOM.render(, rootElement) -``` - ## propTypes The propTypes package help as to assign the data types of the props we passed to a component. diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js b/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js index 470e931..261690b 100644 --- a/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js +++ b/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js @@ -70,7 +70,22 @@ const UserCard = ({ user: { firstName, lastName, image } }) => ( // A button component -const Button = ({ text, onClick }) => +const Button = ({ text, onClick, style }) => ( + +) + +const buttonStyles = { + backgroundColor: '#61dbfb', + padding: 10, + border: 'none', + borderRadius: 5, + margin: 3, + cursor: 'pointer', + fontSize: 18, + color: 'white', +} // Main Component const Main = ({ user, techs, greetPeople, handleTime }) => ( @@ -81,8 +96,8 @@ const Main = ({ user, techs, greetPeople, handleTime }) => ( -