Learning Full-Stack JavaScript Development: MongoDB, Node and React


3. React Basics


010 React components

$ npm install --save prop-types


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

const App = (props) => {
    return (
        <h2 className="text-center">
            {props.headerMessage}
        </h2>
    );
};

App.propTypes = {
    headerMessage: PropTypes.string.isRequired
};

App.defaultProps = {
    headerMessage: 'Hello!'
}


ReactDOM.render(
    <App />,
    document.getElementById('root')
);


// ReactDOM.render(
//     <App headerMessage="Hello props"/>,
//     document.getElementById('root')
// );


$ npm run dev
$ npm start


011 Component composability


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';


const Header = ({ message }) => {
    return (
        <h2 className="Header text-center">
            { message }
        </h2>
    );
};

Header.propTypes = {
    message: PropTypes.string.isRequired
};

const App = () => {
    return (
        <h2 className="App">
            <Header message="Naming Contests" />
            <div>
                ...
            </div>
        </h2>
    );
};

ReactDOM.render(
    <App />,
    document.getElementById('root')
);


012 Components with modules


App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import Header from './Header';

const App = () => {
    return (
        <h2 className="App">
            <Header message="Naming Contests" />
            <div>
                ...
            </div>
        </h2>
    );
};


export default App;


Header.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import PropTypes from 'prop-types';

const Header = ({ message }) => {
    return (
        <h2 className="Header text-center">
            { message }
        </h2>
    );
};

Header.propTypes = {
    message: PropTypes.string.isRequired
};


export default Header;


index.js

1
2
3
4
5
6
7
8
9
import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App';

ReactDOM.render(
    <App />,
    document.getElementById('root')
);


013 Component state


App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import Header from './Header';

class App extends React.Component {
    
    constructor(props){
        super(props);
        this.pageHeader = 'Naming Contests';
        this.state = { test: 42 };
    }

    render() {
        return (
            <h2 className="App">
                <Header message= {this.pageHeader} />
                <div>
                    {this.state.test}
                </div>
            </h2>
        );
    }
};

export default App;


014 Component life cycle

componentDidMount() {
    
}

componentWillUnmount() {
    
}