Fermin Blanco luillyfe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // App Component | |
| export class AppComponent { | |
| title="News title"; | |
| content="A description should be here!"; | |
| } | |
| // News component | |
| @Component({ | |
| selector: 'news', | |
| template: ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <news title="{{ title }}" content="{{ content }}"></news> | |
| <button (click)="printState()">Print parent state</button> | |
| /* *** */ | |
| export class AppComponent { | |
| title="News title"; s | |
| content="A description should be here!"; | |
| printState() { | |
| console.log(`News title: ${this.title}, News content: ${this.content}`); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <Body> | |
| <SideBar names={menuNames} /> | |
| <Content /> | |
| </Body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <Menu /> | |
| <div> | |
| <Sidebar /> | |
| <Content /> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <Sidebar theme="dark" /> | |
| <Content text="Lorem Ipsum is simply dummy text of ..." /> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| const Menu = props => ( | |
| <ul> | |
| {props.options.map(option => <li key={option.id}>{option.name}</li>)} | |
| </ul> | |
| ); |
luillyfe
/ ClassComponent.jsx
Last active
November 3, 2018 20:16
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component } from "react"; | |
| class App extends Component { | |
| constructor(props) { | |
| super(props); | |
| this.state.options = [ | |
| {id: 1, name: "home"}, | |
| {id: 2, name: "aboutUs"}, | |
| {id: 3, name: "contactUs"} | |
| ]; |
luillyfe
/ componentDidMount.jsx
Last active
November 3, 2018 20:21
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class App extends Component { | |
| ... | |
| componentDidMount() { | |
| let { options } = this.state.options; | |
| options = options.map(o => { | |
| }); | |
| fetch("https://jsonplaceholder.typicode.com/options") | |
| .then(options => JSON.parse(response)) | |
| .then(options => ( | |
| this.setState({ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const News = props => { | |
| const changeTitle = () => { | |
| // Since props are read-only, you are not allowed to do so | |
| props.changeTitle("Title changed!"); | |
| }; | |
| return ( | |
| <div> | |
| <h1>{props.title}</h1> | |
| <div>{props.content}</div> | |
| <button onClick={changeTitle}>Mutate!</button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const News = props => { | |
| const changeTitle = () => { | |
| props.changeTitle("Title changed!"); | |
| }; | |
| return ( | |
| <div> | |
| <h1>{props.title}</h1> | |
| <div>{props.content}</div> | |
| <button onClick={changeTitle}>Mutate!</button> | |
| </div> |
OlderNewer