msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

day_7

Browse Source
pull/42/head
Asabeneh 4 years ago
parent 2117dd3f8d
commit 38f2e92638
2 changed files with 320 additions and 1 deletions
Show Stats Download Patch File Download Diff File

83
07_Day_Class_Components/07_class_based_components_boilerplate/src/index.js
Unescape View File

@ -2,6 +2,39 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom' 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 } }) => (
<div className='user-card'>
<img src={image} alt={firstName} />
<h2>
{firstName}
{lastName}
</h2>
</div>
)
// A button component
const Button = ({ text, onClick, style }) => (
<button style={style} onClick={onClick}>
{text}
</button>
)
// 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 based component
class Header extends React.Component { class Header extends React.Component {
@ -62,6 +95,17 @@ class Main extends React.Component {
<ul> <ul>
<TechList techs={this.props.techs} /> <TechList techs={this.props.techs} />
</ul> </ul>
<UserCard user={this.props.user} />
<Button
text='Greet People'
onClick={this.props.greetPeople}
style={buttonStyles}
/>
<Button
text='Show Time'
onClick={this.props.handleTime}
style={buttonStyles}
/>
</div> </div>
</main> </main>
) )
@ -86,6 +130,33 @@ class Footer extends React.Component {
} }
class App extends React.Component { 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() { render() {
const data = { const data = {
welcome: 'Welcome to 30 Days Of React', welcome: 'Welcome to 30 Days Of React',
@ -99,10 +170,19 @@ class App extends React.Component {
} }
const techs = ['HTML', 'CSS', 'JavaScript'] const techs = ['HTML', 'CSS', 'JavaScript']
// copying the author from data object to user variable using spread operator
const user = { ...data.author, image: asabenehImage }
return ( return (
<div className='app'> <div className='app'>
<Header data={data} /> <Header data={data} />
<Main techs={techs} /> <Main
user={user}
techs={techs}
handleTime={this.handleTime}
greetPeople={this.greetPeople}
/>
<Footer date={new Date()} /> <Footer date={new Date()} />
</div> </div>
) )
@ -111,3 +191,4 @@ class App extends React.Component {
const rootElement = document.getElementById('root') const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement) ReactDOM.render(<App />, rootElement)

238
07_Day_Class_Components/07_class_components.md
Unescape View File

@ -20,6 +20,7 @@
- [Class Components](#class-components) - [Class Components](#class-components)
- [Accessing props in Class components](#accessing-props-in-class-components) - [Accessing props in Class components](#accessing-props-in-class-components)
- [Methods in Class based component](#methods-in-class-based-component)
- [Exercises](#exercises) - [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1) - [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2) - [Exercises: Level 2](#exercises-level-2)
@ -576,6 +577,243 @@ const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement) ReactDOM.render(<App />, rootElement)
``` ```
## Methods in Class based component
We access methods in class based component. Most of the time, we write different methods on the parent component and we pass them to child components. Let's see the implementation.
Let's add a method on this component.
```js
//index.js
import React from 'react'
import ReactDOM from 'react-dom'
// class based component
class Header extends React.Component {
greetPeople = () => {
alert('Welcome to 30 Days Of React Challenge, 2020')
}
render() {
return (
<header>
<div className='header-wrapper'>
<h1>Welcome to 30 Days Of React</h1>
<h2>Getting Started React</h2>
<h3>JavaScript Library</h3>
<p>Asabeneh Yetayeh</p>
<small>Oct 7, 2020</small>
<button onClick={this.greetPeople}> Greet </button>
</div>
</header>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<Header />, 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 } }) => (
<div className='user-card'>
<img src={image} alt={firstName} />
<h2>
{firstName}
{lastName}
</h2>
</div>
)
// A button component
const Button = ({ text, onClick, style }) => (
<button style={style} onClick={onClick}>
{text}
</button>
)
// 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 (
<header>
<div className='header-wrapper'>
<h1>{welcome}</h1>
<h2>{title}</h2>
<h3>{subtitle}</h3>
<p>
{firstName} {lastName}
</p>
<small>{date}</small>
</div>
</header>
)
}
}
// TechList Component
// class base component
class TechList extends React.Component {
constructor(props) {
super(props)
}
render() {
const { techs } = this.props
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
return techsFormatted
}
}
// Main Component
// Class Component
class Main extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<main>
<div className='main-wrapper'>
<p>Prerequisite to get started react.js:</p>
<ul>
<TechList techs={this.props.techs} />
</ul>
<UserCard user={this.props.user} />
<Button
text='Greet People'
onClick={this.props.greetPeople}
style={buttonStyles}
/>
<Button
text='Show Time'
onClick={this.props.handleTime}
style={buttonStyles}
/>
</div>
</main>
)
}
}
// Footer Component
// Class component
class Footer extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<footer>
<div className='footer-wrapper'>
<p>Copyright {this.props.date.getFullYear()}</p>
</div>
</footer>
)
}
}
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 (
<div className='app'>
<Header data={data} />
<Main
user={user}
techs={techs}
handleTime={this.handleTime}
greetPeople={this.greetPeople}
/>
<Footer date={new Date()} />
</div>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, 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. 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. 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.

Write Preview
Loading…
Cancel
Save