Commit c82b5ee

committed

19 - Inheritance & Reusable Functions in React

1 parent 4276f4d commit c82b5eeCopy full SHA for c82b5ee

File tree

+29

-2

lines changed

+29

-2

lines changed

Lines changed: 4 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,15 @@`
`1`	`1`	`import React, { Component } from 'react'`
`2`	`2`	`// import PostSorting from './posts/PostSorting'`
`3`		`-import Timer from './learn/Timer'`
`4`	`3`	`import './App.css'`
`5`	`4`
	`5`	`+import WelcomeHereDialog, {AlertBox, SubItem} from './learn/ParentWrapper'`
	`6`	`+`
`6`	`7`	`class App extends Component {`
`7`	`8`	`render () {`
`8`	`9`	`return (`
`9`	`10`	`<div className='App'>`
`10`		`- <Timer startCount='1000' />`
	`11`	`+ <AlertBox alertType='danger'>I think this is working...</AlertBox>`
	`12`	`+ <WelcomeHereDialog />`
`11`	`13`	`</div>`
`12`	`14`	`)`
`13`	`15`	`}`

Lines changed: 25 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,25 @@`
	`1`	`+import React, {Component} from 'react'`
	`2`	`+`
	`3`	`+// class ParentWrapper extends Component {`
	`4`	`+// render () {`
	`5`	`+// const {alertType} = this.props`
	`6`	`+// return <div className={'alert alert-' + alertType}>{this.props.children}</div>`
	`7`	`+// }`
	`8`	`+// }`
	`9`	`+`
	`10`	`+function AlertBox (props) {`
	`11`	`+ return <div className={'alert alert-' + props.alertType}>{props.children}</div>`
	`12`	`+}`
	`13`	`+`
	`14`	`+function WelcomeHereDialog () {`
	`15`	`+ return <AlertBox alertType='success'><h1>Some new content</h1></AlertBox>`
	`16`	`+}`
	`17`	`+`
	`18`	`+class SubItem extends Component {`
	`19`	`+ render () {`
	`20`	`+ return <AlertBox alertType='success'><h1>Some new content</h1></AlertBox>`
	`21`	`+ }`
	`22`	`+}`
	`23`	`+`
	`24`	`+export {AlertBox, SubItem}`
	`25`	`+export default WelcomeHereDialog`

Comments

(0)