diff --git a/03_Day_Setting_Up/03_day_setting_up.md b/03_Day_Setting_Up/03_day_setting_up.md index f622a1d..c5ef8eb 100644 --- a/03_Day_Setting_Up/03_day_setting_up.md +++ b/03_Day_Setting_Up/03_day_setting_up.md @@ -589,13 +589,124 @@ ReactDOM.render(user, rootElement) ![Rendering image](../images/rendering_image.png) +Let's inject the user inside the main JSX element and see the result + +```js +// index.js +import React from 'react' +import ReactDOM from 'react-dom' +// To get the root element from the HTML document +import asabenehImage from './images/asabeneh.jpg' +// JSX element, header +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 2, 2020' + +// JSX element, header +const header = ( +
+
+

{welcome}

+

{title}

+

{subtitle}

+

+ Instructor: {author.firstName} {author.lastName} +

+ Date: {date} +
+
+) + +const numOne = 3 +const numTwo = 2 + +const result = ( +

+ {numOne} + {numTwo} = {numOne + numTwo} +

+) + +const yearBorn = 1820 +const currentYear = new Date().getFullYear() +const age = currentYear - yearBorn +const personAge = ( +

+ {' '} + {author.firstName} {author.lastName} is {age} years old +

+) + +// JSX element, main +const techs = ['HTML', 'CSS', 'JavaScript'] +const techsFormatted = techs.map((tech) =>
  • {tech}
  • ) + +const user = ( +
    + asabeneh image +
    +) + +// JSX element, main +const main = ( +
    +
    +

    + Prerequisite to get started{' '} + + react.js + + : +

    + + {result} + {personAge} + {user} +
    +
    +) + +const copyRight = 'Copyright 2020' + +// JSX element, footer +const footer = ( + +) + +// JSX element, app +const app = ( +
    + {header} + {main} + {footer} +
    +) + +const rootElement = document.getElementById('root') +// we render the JSX element using the ReactDOM package +ReactDOM.render(app, rootElement) +``` + +![All JSX together final](../images/all_jsx_final.png) + The boilerplate code can be found [here](../03/../03_Day_Setting_Up/30-days-of-react_boilerplate) # Exercises +1. Import and render the following images + ![Front end](../images/frontend_technologies.png) + 1.Design the following user card. -![User Card](../images/user_card_design.png) +![User Card](../images/user_card_design_jsx.png) 1. Use h1, p, input and button HTML element to create the following design using JSX diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/css_logo.png b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/css_logo.png new file mode 100644 index 0000000..8e0edde Binary files /dev/null and b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/css_logo.png differ diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/html_logo.png b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/html_logo.png new file mode 100644 index 0000000..35de901 Binary files /dev/null and b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/html_logo.png differ diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/react_logo.png b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/react_logo.png new file mode 100644 index 0000000..b5d6ab6 Binary files /dev/null and b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/react_logo.png differ diff --git a/images/all_jsx_final.png b/images/all_jsx_final.png new file mode 100644 index 0000000..583bab1 Binary files /dev/null and b/images/all_jsx_final.png differ diff --git a/images/frontend_technologies.png b/images/frontend_technologies.png new file mode 100644 index 0000000..444fa7f Binary files /dev/null and b/images/frontend_technologies.png differ diff --git a/images/user_card_design.PNG b/images/user_card_design_jsx.png similarity index 100% rename from images/user_card_design.PNG rename to images/user_card_design_jsx.png