From 38f2e926386c1ef1b181a70bf989298178153572 Mon Sep 17 00:00:00 2001 From: Asabeneh Date: Wed, 7 Oct 2020 03:26:41 +0300 Subject: [PATCH] day_7 --- .../src/index.js | 83 +++++- .../07_class_components.md | 238 ++++++++++++++++++ 2 files changed, 320 insertions(+), 1 deletion(-) diff --git a/07_Day_Class_Components/07_class_based_components_boilerplate/src/index.js b/07_Day_Class_Components/07_class_based_components_boilerplate/src/index.js index 1ad353e..e33508b 100644 --- a/07_Day_Class_Components/07_class_based_components_boilerplate/src/index.js +++ b/07_Day_Class_Components/07_class_based_components_boilerplate/src/index.js @@ -2,6 +2,39 @@ import React from 'react' import ReactDOM from 'react-dom' +import asabenehImage from './images/asabeneh.jpg' + +// Fuction to show month date year + +// User Card Component +const UserCard = ({ user: { firstName, lastName, image } }) => ( +
+ {firstName} +

+ {firstName} + {lastName} +

+
+) + +// A button component +const Button = ({ text, onClick, style }) => ( + +) + +// CSS styles in JavaScript Object +const buttonStyles = { + backgroundColor: '#61dbfb', + padding: 10, + border: 'none', + borderRadius: 5, + margin: 3, + cursor: 'pointer', + fontSize: 18, + color: 'white', +} // class based component class Header extends React.Component { @@ -62,6 +95,17 @@ class Main extends React.Component { + + + + + ) + } +} + +const rootElement = document.getElementById('root') +ReactDOM.render(
, rootElement) +``` + +The invoking or calling of the method triggers when the event occurs. Therefore, whenever you pass a method to an event listener do not invoke the method. + +Now, let's the code we had add all the necessary methods. + +```js +// index.js + +import React from 'react' +import ReactDOM from 'react-dom' +import asabenehImage from './images/asabeneh.jpg' + +// Fuction to show month date year + +// User Card Component +const UserCard = ({ user: { firstName, lastName, image } }) => ( +
+ {firstName} +

+ {firstName} + {lastName} +

+
+) + +// A button component +const Button = ({ text, onClick, style }) => ( + +) + +// CSS styles in JavaScript Object +const buttonStyles = { + backgroundColor: '#61dbfb', + padding: 10, + border: 'none', + borderRadius: 5, + margin: 3, + cursor: 'pointer', + fontSize: 18, + color: 'white', +} + +// class based component +class Header extends React.Component { + constructor(props) { + super(props) + // the code inside the constructor run before any other code + } + render() { + console.log(this.props.data) + const { + welcome, + title, + subtitle, + author: { firstName, lastName }, + date, + } = this.props.data + + return ( +
+
+

{welcome}

+

{title}

+

{subtitle}

+

+ {firstName} {lastName} +

+ {date} +
+
+ ) + } +} + +// TechList Component +// class base component +class TechList extends React.Component { + constructor(props) { + super(props) + } + render() { + const { techs } = this.props + const techsFormatted = techs.map((tech) =>
  • {tech}
    • ) + return techsFormatted + } +} + +// Main Component +// Class Component +class Main extends React.Component { + constructor(props) { + super(props) + } + render() { + return ( +
    +
    +

    Prerequisite to get started react.js:

    +
      + +
    + +
    +
    + ) + } +} + +// Footer Component +// Class component +class Footer extends React.Component { + constructor(props) { + super(props) + } + render() { + return ( +
    +
    +

    Copyright {this.props.date.getFullYear()}

    +
    +
    + ) + } +} + +class App extends React.Component { + showDate = (time) => { + const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ] + + const month = months[time.getMonth()].slice(0, 3) + const year = time.getFullYear() + const date = time.getDate() + return ` ${month} ${date}, ${year}` + } + handleTime = () => { + alert(this.showDate(new Date())) + } + greetPeople = () => { + alert('Welcome to 30 Days Of React Challenge, 2020') + } + render() { + const data = { + welcome: 'Welcome to 30 Days Of React', + title: 'Getting Started React', + subtitle: 'JavaScript Library', + author: { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + }, + date: 'Oct 7, 2020', + } + const techs = ['HTML', 'CSS', 'JavaScript'] + + // copying the author from data object to user variable using spread operator + const user = { ...data.author, image: asabenehImage } + + return ( +
    +
    +
    + +
    +
    + ) + } +} + +const rootElement = document.getElementById('root') +ReactDOM.render(, rootElement) +``` + Most of the time the container or the parent component can be written as class component and others as functional or presentational components. Data usually flows from parent components to child component and it is unidirectional. However, the latest version of react can allow us to write every component in our application only with functional components. This was impossible in previous versions. In next section, we will cover state which is the heart of React. State allows React component to rerender when whenever there is a change in state.