1. Html code that we push react components

: every react component push inside of <div class="root">

: JS code orders are impotent!  

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>First Component</title>
</head>

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

  <script src="https://unpkg.com/babel-standalone"></script>

  <!--JS orders are Matter!!!!-->
  <script src="Hello.js" type="text/jsx"></script>
  <script src="NumPicker.js" type="text/jsx"></script>
  <script src="index.js" type="text/jsx"></script>

  </script>
</body>

</html>

 

 

2. index.js file that render other components.

: one component in one file!!!!!! wrap with <div> you have several components, React treats  everything in <div> as one component.

: we make App component and render the others in that file.

: this is usually the only thing rendered in index.js

 

class App extends React.Component {
	render() {
		return (
			<div>
				<Hello />
				<NumPicker />
			</div>
		);
	}
}


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

 

 

3. Actual React components

class Hello extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello there!</h1>
            </div>
        );
    }
}
function getNum() {
    return Math.floor(Math.random() * 10) + 1;
}

class NumPicker extends React.Component {
    render() {
        const num = getNum();
        let msg;
        if (num === 7) {
            msg =
                <div>
                    <p>Lucky!</p>
                    <img src="https://thumbnail.10x10.co.kr/webimage/image/basic600/176/B001768023-4.jpg?cmd=thumb&w=500&h=500&fit=true&ws=false" />
                </div>
        } else {
            msg = <p>Try again!</p>
        }

        return (
            <div>
                <h1>Your number is...{num}</h1>
                {msg}
            </div>
        );
    }
}

'react' 카테고리의 다른 글

Props : types of props  (0) 2020.06.13
Introducing Props! and more..  (0) 2020.06.13
Introducing JSX : conditionals  (0) 2020.06.13
Introducing JSX : basic  (0) 2020.06.13
class component vs function component  (0) 2020.06.13