"React" 태그로 연결된 6개 게시물개의 게시물이 있습니다.

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

import React from 'react';import logo from './logo.svg';import './App.css';
class App extends React.Component {    render() {        return (            <div className="App">                <header className="App-header">                    <img src={logo} className="App-logo" alt="logo" />                    <p>                        Edit <code>src/App.js</code> and save to reload.                    </p>                    <a                        className="App-link"                        href="https://reactjs.org"                        target="_blank"                        rel="noopener noreferrer"                    >                        Learn React                    </a>                </header>            </div>        );    }}
export default App;

import React from 'react';import './App.css';
class App extends React.Component {    render() {        return <div className="App">Hello World!</div>;    }}
export default App;

import React from 'react';import './App.css';
class Subject extends React.Component {    render() {        return (            <header>                <h1>{this.props.title}</h1>                {this.props.sub}            </header>        );    }}
class App extends React.Component {    render() {        return (            <div className="App">                <Subject title="WEB" sub="World Wide Web!" />                <Subject title="React" sub="For UI!" />            </div>        );    }}
export default App;

import React from 'react';import Subject from './components/Subject';import Content from './components/Content';import TOC from './components/TOC';import './App.css';
class App extends React.Component {    render() {        return (            <div className="App">                <Subject title="WEB" sub="World Wide Web!" />                <Subject title="React" sub="For UI!" />                <Content text="HTML is FUN!" />                <TOC />            </div>        );    }}
export default App;

import React from 'react';import Subject from './components/Subject';import TOC from './components/TOC';import Content from './components/Content';import './App.css';
class App extends React.Component {    constructor(props) {        super(props);        this.state = {            subject: {title: 'WEB', sub: 'World Wide Web!'},        };    }    render() {        return (            <div className="App">                <Subject                    title={this.state.subject.title}                    sub={this.state.subject.sub}                />                <Subject title="React" sub="For UI!" />                <TOC />                <Content text="HTML is FUN!" />            </div>        );    }}
export default App;

import React from 'react';
class TOC extends React.Component {    render() {        var lists = [];        var data = this.props.data;        var i = 0;
        while (i < data.length) {            lists.push(                <li key={data[i].id}>                    <a href={'/content/' + data[i].id}>{data[i].title}</a>                </li>,            );            i = i + 1;        }
        return (            <nav>                <ul>{lists}</ul>            </nav>        );    }}
export default TOC;

import React from 'react';import Subject from './components/Subject';import TOC from './components/TOC';import Content from './components/Content';import './App.css';
class App extends React.Component {    constructor(props) {        super(props);        this.state = {            subject: {title: 'WEB', sub: 'World Wide Web!'},            contents: [                {id: 1, title: 'HTML', desc: 'HTML is for information'},                {id: 2, title: 'CSS', desc: 'CSS is for Design'},                {id: 3, title: 'JavaScript', desc: 'JavaScript is for Interactive'},            ],        };    }    render() {        return (            <div className="App">                <Subject                    title={this.state.subject.title}                    sub={this.state.subject.sub}                />                <TOC data={this.state.contents} />                <Content text="HTML is FUN!" />            </div>        );    }}
export default App;

...
<h1><a href="/" onClick={function(e){  console.log(e);    // debugger;  e.preventDefault();}}>{this.state.subject.title}</a></h1>
...

return (    <div className="App">        <header>            <h1>                <a                    href="/"                    onClick={function (e) {                        e.preventDefault();                        this.setState({                            mode: 'welcome',                        });                    }.bind(this)}                >                    {this.state.subject.title}                </a>            </h1>            {this.state.subject.sub}        </header>        <TOC data={this.state.contents} />        <Content title={_title} desc={_desc} />    </div>);

import React, {useState} from 'react';
function InputSample() {    const [text, setText] = useState('');
    const onChange = (e) => {        setText(e.target.value);    };
    const onReset = () => {        setText('');    };
    return (        <div>            <input onChange={onChange} value={text} />            <button onClick={onReset}>초기화</button>            <div>                <b>값: {text}</b>            </div>        </div>    );}
export default InputSample;

import React from 'react';import InputSample from './InputSample';
function App() {    return <InputSample />;}
export default App;

import React, {useState} from 'react';
function InputSample() {    const [inputs, setInputs] = useState({        name: '',        nickname: '',    });
    const {name, nickname} = inputs; // 비구조화 할당을 통해 값 추출
    const onChange = (e) => {        const {value, name} = e.target; // 우선 e.target 에서 name 과 value 를 추출        setInputs({            ...inputs, // 기존의 input 객체를 복사한 뒤            [name]: value, // name 키를 가진 값을 value 로 설정        });    };
    const onReset = () => {        setInputs({            name: '',            nickname: '',        });    };
    return (        <div>            <input name="name" placeholder="이름" onChange={onChange} value={name} />            <input                name="nickname"                placeholder="닉네임"                onChange={onChange}                value={nickname}            />            <button onClick={onReset}>초기화</button>            <div>                <b>값: </b>                {name} ({nickname})            </div>        </div>    );}
export default InputSample;

const onChange = (e) => {    const {value, name} = e.target; // 우선 e.target 에서 name 과 value 를 추출    setInputs({        ...inputs, // 기존의 input 객체를 복사한 뒤        [name]: value, // name 키를 가진 값을 value 로 설정    });};

const nextInputs = {    ...inputs,};
nextInputs[name] = value;
setInputs(value);

import React, {useState, useRef} from 'react';
function InputSample() {    const [inputs, setInputs] = useState({        name: '',        nickname: '',    });    const nameInput = useRef();
    const {name, nickname} = inputs; // 비구조화 할당을 통해 값 추출
    const onChange = (e) => {        const {value, name} = e.target; // 우선 e.target 에서 name 과 value 를 추출        setInputs({            ...inputs, // 기존의 input 객체를 복사한 뒤            [name]: value, // name 키를 가진 값을 value 로 설정        });    };
    const onReset = () => {        setInputs({            name: '',            nickname: '',        });        nameInput.current.focus();    };
    return (        <div>            <input                name="name"                placeholder="이름"                onChange={onChange}                value={name}                ref={nameInput}            />            <input                name="nickname"                placeholder="닉네임"                onChange={onChange}                value={nickname}            />            <button onClick={onReset}>초기화</button>            <div>                <b>값: </b>                {name} ({nickname})            </div>        </div>    );}
export default InputSample;

import React from 'react';
function Hello({color, name}) {    return <div style={{color}}>안녕하세요 {name}</div>;}
Hello.defaultProps = {    name: '이름없음',};
export default Hello;

import React from 'react';import Hello from './Hello';
function App() {    return (        <>            <Hello name="react" color="red" />            <Hello color="pink" />        </>    );}
export default App;

import React from 'react';
function Wrapper() {    const style = {        border: '2px solid black',        padding: '16px',    };    return <div style={style}></div>;}
export default Wrapper;

import React from 'react';import Hello from './Hello';import Wrapper from './Wrapper';
function App() {    return (        <Wrapper>            <Hello name="react" color="red" />            <Hello color="pink" />        </Wrapper>    );}
export default App;

import React from 'react';
function Wrapper(props) {    // props 대신 { children } 으로 비구조화 할당 후    const style = {        border: '2px solid black',        padding: '16px',    };    return (        <div style={style}>            {props.children} {/* 여기서 children 으로만 받아도 된다. */}        </div>    );}
export default Wrapper;

import React from 'react';import Hello from './Hello';import Wrapper from './Wrapper';
function App() {    return (        <Wrapper>            <Hello name="react" color="red" isSpecial={true} />            <Hello color="pink" />        </Wrapper>    );}
export default App;

import React from 'react';
function Hello({color, name, isSpecial}) {    return (        <div style={{color}}>            {isSpecial ? <b>*</b> : null}            안녕하세요 {name}        </div>    );}
Hello.defaultProps = {    name: '이름없음',};
export default Hello;

import React from 'react';import Hello from './Hello';import Wrapper from './Wrapper';
function App() {    return (        <Wrapper>            <Hello name="react" color="red" isSpecial />            <Hello color="pink" />        </Wrapper>    );}
export default App;

import React from 'react';
function Hello({color, name, isSpecial}) {    return (        <div style={{color}}>            {isSpecial ? alert(isSpecial) : null}            안녕하세요            {name}        </div>    );}
Hello.defaultProps = {    name: '이름없음',};
export default Hello;

import React from 'react';import Counter from './Counter';
function App() {    return <Counter />;}
export default App;

import React, {useState} from 'react';
function Counter() {    const [number, setNumber] = useState(0);
    const onIncrease = () => {        setNumber(number + 1);    };
    const onDecrease = () => {        setNumber(number - 1);    };
    return (        <div>            <h1>{number}</h1>            <button onClick={onIncrease}>+1</button>            <button onClick={onDecrease}>-1</button>        </div>    );}
export default Counter;

import React, {useState} from 'react';
function Counter() {    const [number, setNumber] = useState(0);
    const onIncrease = () => {        setNumber((prevNumber) => prevNumber + 1);    };
    const onDecrease = () => {        setNumber((prevNumber) => prevNumber - 1);    };
    return (        <div>            <h1>{number}</h1>            <button onClick={onIncrease}>+1</button>            <button onClick={onDecrease}>-1</button>        </div>    );}
export default Counter;

import React from 'react';
function Hello() {    return <div>Hello World!</div>;}
export default Hello;

import React from 'react';

export default Hello;

import React from 'react';import Hello from './Hello';
function App() {    return (        <div>            <Hello />        </div>    );}
export default App;

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();

<div id="root"></div>

return <div>안녕하세요</div>;

import React from 'react';import Hello from './Hello';import './App.css';
function App() {    const name = 'react';    const style = {        backgroundColor: 'black',        color: 'aqua',        fontSize: 24, // 기본 단위 px        padding: '1rem', // 다른 단위 사용 시 문자열로 설정    };
    return (        <>            <Hello />            <div style={style}>{name}</div>            <div className="gray-box"></div>        </>    );}
export default App;

import React from 'react';import Hello from './Hello';
function App() {    return <Hello name="react" />;}
export default App;

import React from 'react';
function Hello(props) {    return <div>안녕하세요 {props.name}</div>;}
export default Hello;

import React from 'react';import Hello from './Hello';
function App() {    return <Hello name="react" color="red" />;}
export default App;

import React from 'react';
function Hello(props) {    return <div style={{color: props.color}}>안녕하세요 {props.name}</div>;}
export default Hello;

import React from 'react';
function Hello({color, name}) {    return <div style={{color}}>안녕하세요 {name}</div>;    // color: color -> color 로 작성 가능}
export default Hello;