diff --git a/04_Day_Component/04_components.md b/04_Day_Component/04_components.md index 4c138a1..a97d135 100644 --- a/04_Day_Component/04_components.md +++ b/04_Day_Component/04_components.md @@ -13,7 +13,7 @@ - + [<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>]() @@ -471,7 +471,7 @@ const hexaColor = () => { return '#' + color } -const HexaColor = () =>
{hexaColor()} +const HexaColor = () =>
{hexaColor()}
const rootElement = document.getElementById('root') // we render the JSX element using the ReactDOM package diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/public/index.html b/04_Day_Component/30-days-of-react_boilerplate-components/public/index.html index 44fa1f3..3684295 100644 --- a/04_Day_Component/30-days-of-react_boilerplate-components/public/index.html +++ b/04_Day_Component/30-days-of-react_boilerplate-components/public/index.html @@ -14,9 +14,9 @@ 30 Days Of React App - +
diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js b/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js index aec8b84..33099fe 100644 --- a/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js +++ b/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js @@ -1,108 +1,108 @@ // index.js -import React from 'react' -import ReactDOM from 'react-dom' -import asabenehImage from './images/asabeneh.jpg' +import React from 'react'; +import ReactDOM from 'react-dom'; +import asabenehImage from './images/asabeneh.jpg'; const hexaColor = () => { - let str = '0123456789abcdef' - let color = '' - for (let i = 0; i < 6; i++) { - let index = Math.floor(Math.random() * str.length) - color += str[index] - } - return '#' + color + let str = '0123456789abcdef' + let color = '' + for (let i = 0; i < 6; i++) { + let index = Math.floor(Math.random() * str.length) + color += str[index] + } + return '#' + color } const HexaColor = () => { - let bgColor = hexaColor() - const styles = { - height: '100px', - display: 'flex', - 'justify-content': 'center', - 'align-items': 'center', - fontFamily: 'Montserrat', - margin: '2px auto', - borderRadius: '5px', - width: '75%', - border: '2px solid black', - } - return ( -
-

{bgColor}

-
- ) + let bgColor = hexaColor() + const styles = { + height: '100px', + display: 'flex', + 'justify-content': 'center', + 'align-items': 'center', + fontFamily: 'Montserrat', + margin: '2px auto', + borderRadius: '5px', + width: '75%', + border: '2px solid black', + } + return ( +
+

{bgColor}

+
+ ) } // Header Component const Header = () => ( -
-
-

Welcome to 30 Days Of React

-

Getting Started React

-

JavaScript Library

-

Asabeneh Yetayeh

- Oct 3, 2020 -
-
+
+
+

Welcome to 30 Days Of React

+

Getting Started React

+

JavaScript Library

+

Asabeneh Yetayeh

+ Oct 3, 2020 +
+
) // User Card Component const UserCard = () => ( -
- asabeneh image -

Asabeneh Yetayeh

-
+
+ asabeneh image +

Asabeneh Yetayeh

+
) // TechList Component const TechList = () => { - const techs = ['HTML', 'CSS', 'JavaScript'] - const techsFormatted = techs.map((tech) =>
  • {tech}
    • ) - return techsFormatted + const techs = ['HTML', 'CSS', 'JavaScript'] + const techsFormatted = techs.map((tech) =>
  • {tech}
    • ) + return techsFormatted } const buttonStyles = { - padding: '10px 20px', - background: 'rgb(0, 255, 0', - border: 'none', - borderRadius: 5, + padding: '10px 20px', + background: 'rgb(0, 255, 0', + border: 'none', + borderRadius: 5, } const Button = () => // Main Component const Main = () => ( -
    -
    -

    Prerequisite to get started react.js:

    -
      - -
    - -
    - -
    -
    -
    +
    +
    +

    Prerequisite to get started react.js:

    +
      + +
    + +
    + +
    +
    +
    ) // Footer Component const Footer = () => ( - + ) // 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) +ReactDOM.render(, rootElement)