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

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

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

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

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
25

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() {

}