React 기초 연습

App.js:

import './App.css';
import ReactDOM from 'react-dom';
let tweet = <div>{Tweet({ writer: '이호준' })}</div>;
let tweet2 = (
	<div>
		{(function () {
			return '리액트';
		})()}
	</div>
);
let nowLearning = false;

let tweet3 = (
	<Tweet writer="김코딩">
		{(function () {
			if (nowLearning) {
				return '리액트';
			} else {
				return '배틀그라운드';
			}
		})() + '는 늘 짜릿하네요'}
	</Tweet>
);
function Tweet4(){
	let langs = ["javascript", 'HTML', 'Python']
	// eslint-disable-next-line
	return (
		<div>
			{langs.map(it=><div>{it}</div>)}
		</div>
	)
}
function Tweet({ writer, children }) {
	return (
		<div>
			{writer}
			{children}
		</div>
	);
}
function clock() {
	ReactDOM.render(
		<div>{new Date().toLocaleTimeString()}</div>,
		document.getElementById('clock'),
	);
}
setInterval(clock, 1000);
function App() {
	return (
		<div className="App">
			<header className="App-header" id="App-header">
				<h1>Hello World!</h1>
				<h2>Start editing to see some magic happen!</h2>
				{tweet}
				{tweet2}
				{tweet3}
				<Tweet4 />
				<div id="clock">{new Date().toLocaleTimeString()}</div>
			</header>
		</div>
	);
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.js';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();