미고렝 코딩

npm i 를 통해 기본적으로 깔아야 하는 것들을 깔아준다.

@babel/core: 바벨의 기본적인 것들

@babel/preset-env: 브라우저 환경에 맞게 예전 문법을 지원

@babel/preset-react: jsx 지원

babel-loader: 바벨과 웹팩을 연결

App.js:

import './App.css'
import React from 'react';
const username = "annonymous"

class Twittler extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            tweets: []
        }
        this.handleButtonClick = this.handleButtonClick.bind(this)
    }
    handleButtonClick(){
        let tweetArr = this.state.tweets.slice()
        tweetArr.push({username: username, text: document.getElementById("textBox").value, time: new Date().toLocaleTimeString()})
        this.setState({tweets: tweetArr})
    }
    render(){        
        return (
            <header className="App-header">
				<div className="textBox-Button">
                    <textarea id="textBox"></textarea>
					<NewTweetForm handleButtonClick = {this.handleButtonClick} />
				</div>
                <div id = "tweets">
                    <Tweets arr = {this.state.tweets}/>
                </div>
                <div>this is app2</div>
			</header>            
        )
    }
}

function NewTweetForm({handleButtonClick}){
    let handleClick = ()=>{
        handleButtonClick()
    }
    return <button id= "postButton" onClick= {handleClick.bind(this)} >Post</button>
}
function makeArr(arr){
    return arr.map((el,idx)=>{
        return <li key = {idx.toString()}>
            <div>{el.username}</div>
            <div>{el.text}</div>
            <div>{el.time}</div>
            <hr/>
        </li>
    })
}

function Tweets ({arr}){   
    return (
        <ul id = "ul">{                
            makeArr(arr)
        }</ul>
    )
}


function App(){
    return (
		<div className="App">
			<Twittler />
		</div>
	);
}
export default App

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
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();

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