17 |
20 | )
21 | }
22 | })
23 |
24 | ReactDOM.render(
25 | {this.state.count}
18 | 19 |
29 |
32 | )
33 | }
34 | })
35 |
36 | ReactDOM.render(
37 | {this.state.count}
30 | 31 |Hello {props.for}!
;
3 | }
4 |
5 | Greeting.propTypes = {
6 | for: React.PropTypes.string.isRequired
7 | };
8 |
9 | Greeting.defaultProps = {
10 | for: 'hi'
11 | };
12 |
13 | ReactDOM.render(Hello {props.for}
;
18 | //... specify props and default props same as above
19 |
20 | ReactDOM.render(
);
3 | };
4 | UserProfile.propTypes = {
5 | pagename: React.PropTypes.string
6 | };
7 |
8 | UserProfile.defaultProps = {
9 | pagename: 'Mark'
10 | };
11 |
12 | const UserProfileLink = (props) => {
13 | return (
14 |
15 | {this.props.username}
16 |
17 | );
18 | };
19 |
20 | const UserCard = (props) => {
21 | #C
22 | return (
23 |
24 |
25 |
26 |
27 | );
28 | };
29 |
30 | ReactDOM.render(
31 |
6 | Props: {this.props.name}
7 |
8 | );
9 | }
10 | });
11 |
12 | const ParentComponent = React.createClass({
13 | onInputChange: function(e) {
14 | this.setState({text: e.target.value});
15 | },
16 | render: function() {
17 | console.log('ParentComponent: render');
18 | return (
19 |
20 |
25 |
26 | );
27 | }
28 | });
29 |
30 | ReactDOM.render(21 | Learn about rendering and lifecycle methods! 22 |
23 | 24 |loaded! :
not loaded
}
3 | //…
4 |
--------------------------------------------------------------------------------
/ch4/4-11.js:
--------------------------------------------------------------------------------
1 | // …
2 | render(){
3 | return (
4 |
5 | {
6 | this.state.loaded ?
7 | this.state.posts.map(post => {
8 | return (
9 |
20 | );
21 | }
22 | //…
23 |
--------------------------------------------------------------------------------
/ch4/4-12.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | const Post = (props) => {
4 | return (
5 |
10 | {post.content}
11 |
12 | );
13 | })
14 | :
15 |
16 | Loading!
17 |
18 | }
19 |
6 |
10 | );
11 | }
12 |
13 | Post.propTypes = {
14 | post: PropTypes.object.isRequired,
15 | }
16 |
--------------------------------------------------------------------------------
/ch4/4-13.js:
--------------------------------------------------------------------------------
1 | import Post from ‘./Post’;
2 | // ..
3 | render() {
4 | return (
5 | 7 | {post.content} 8 |
9 |
6 | this.state.loaded ?
7 | state.posts.map(post => )
8 | :
9 | ;
4 | content: string;
5 | date: Date;
6 | id: string;
7 | image: ?string;
8 | link: ?Object;
9 | user: ?Object;
10 | likes: number;
11 | categories: Array;
12 | }
13 |
--------------------------------------------------------------------------------
Loading!
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/ch4/4-2.js:
--------------------------------------------------------------------------------
1 | const ChildComponent = React.createClass({
2 | propTypes: {
3 | name: React.PropTypes.string
4 | },
5 | getInitialState: function() {
6 | console.log('ChildComponent: getInitialState');
7 | return {name: 'Mark'};
8 | },
9 | render: function() {
10 | console.log('ChildComponent: render');
11 | return (
12 |
13 | Props: {this.props.name}
14 |
15 | );
16 | }
17 | });
18 |
19 | const ParentComponent = React.createClass({
20 | getDefaultProps: function() {
21 | console.log('ParentComponent: getDefaultProps');
22 | },
23 | getInitialState: function() {
24 | console.log('ParentComponent: getInitialState');
25 | return {text: ''};
26 | },
27 | render: function() {
28 | console.log('ParentComponent: render');
29 | return (
30 |
31 |
34 |
35 | );
36 | }
37 | });
38 |
39 | ReactDOM.render(
40 | Learn about rendering and lifecycle methods!
32 | 33 |
25 |
28 |
29 | );
30 | }
31 | });
32 |
--------------------------------------------------------------------------------
/ch4/4-4.js:
--------------------------------------------------------------------------------
1 | const ChildComponent = React.createClass({
2 | //...
3 | shouldComponentUpdate: function(nextProps, nextState) {
4 | console.log('Let's learn about rendering and lifecycle methods!
26 | 27 |
11 | Props: {this.props.name}
12 |
13 | );
14 | }
15 | });
16 |
17 | const ParentComponent = React.createClass({
18 | //...
19 | componentWillUnmount: function() {
20 | console.log('ParentComponent: componentWillUnmount');
21 | },
22 | //...
23 | render: function() {
24 | console.log('ParentComponent: render');
25 | return (
26 |
27 |
30 |
31 | );
32 | }
33 | });
34 | //...
35 |
--------------------------------------------------------------------------------
/ch4/4-7.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class App extends React.Component {
4 | constructor() {
5 | super();
6 | this.state = {
7 | posts: {
8 | all: [],
9 | filtered: []
10 | },
11 | category: null,
12 | filters: {
13 | image: null,
14 | link: null,
15 | categories: []
16 | },
17 | loaded: false,
18 | showBanner: false
19 | };
20 | }
21 |
22 | render() {
23 | return (
24 | Learn about rendering and lifecycle methods!
28 | 29 |
25 | Letters Social— coming soon!
26 |
27 | );
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/ch4/4-8.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import { App } from './components/app';
4 |
5 | render(