1000sj
SJ CODE
1000sj
전체 방문자
오늘
어제
  • 분류 전체보기
    • Algorithms
      • Crypto
    • Security
      • 네트워크
      • 보안
      • CTF
      • Exploit
    • System Programming
      • Operating System
      • Compiler
      • Device Driver
      • Emulator
      • GPU
      • Assembly
    • Application Programming
      • Script
      • Android
    • Cloud Computing
      • Cloud Native
      • Public Cloud
      • Infrastructure
      • Database
      • DevOps
    • TroubleShooting
    • ETC
      • 문화 생활
      • 커뮤니티

인기 글

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
1000sj

SJ CODE

[⚛️React.Js] 리액트 프로젝트 생성
Application Programming

[⚛️React.Js] 리액트 프로젝트 생성

2021. 11. 24. 19:34

1. Create

npx create-react-app project-name-here
// npx create-react-app project-name-here --template typescript

 

2. Run

npm start

그러면 리액트 로고가 돌아가는 화면이 나온다.

 

3. 컴포넌트 분리

Header.js (모든 함수는 대문자로 시작해야한다.)

export const Header = () => ( // 상태 비저장 구성 요소를 화살표 함수로 사용하는 경우 콘텐츠는 대괄호 "{}" 대신 괄호 "()"에 들어가야 하며 반환 함수를 제거해야 한다.
    <p>I am Header</p>
);

App.js

import logo from './logo.svg';
import './App.css';
import { Header } from './component/Header';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Header/>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

4. Handling Event

Calculator.js

export function Calculator() {
    function plus() {
        console.log(10 + 20);
    }
    function minus() {
        console.log(10 - 20);
    }
    return (
        <>
            <div>10, 20</div>
            <button onClick={plus}>+</button>
            <button onClick={minus}>-</button>
        </>
    )
}

 

5. State

import { useState } from 'react';

export function Calculator() {

    const [result, setResult] = useState(0);

    function plus() {
        setResult(10 + 20);
    }
    function minus() {
        setResult(10 - 20);
    }
    return (
        <>
            <div>10, 20</div>
            <button onClick={plus}>+</button>
            <button onClick={minus}>-</button>
            <div id="result">{result}</div>
        </>
    )
}

 

6. Props

Calculator.js

import { useState } from 'react';

export function Calculator(props) {

    const [result, setResult] = useState(0);

    function plus() {
        setResult(props.first_num + props.second_num);
    }
    function minus() {
        setResult(props.first_num - props.second_num);
    }
    return (
        <>
            <div>{props.first_num}, {props.second_num}</div>
            <button onClick={plus}>+</button>
            <button onClick={minus}>-</button>
            <div id="result">{result}</div>
        </>
    )
}

App.js

        <Calculator first_num={0} second_num={1}/>
        <Calculator first_num={2} second_num={3}/>
        <Calculator first_num={4} second_num={5}/>

 

'Application Programming' 카테고리의 다른 글

[web] php 설치  (0) 2022.03.21
[Three.js] Intro  (0) 2021.11.27
[Typescript]  (0) 2021.10.15
[Node.js] Modules  (0) 2021.09.20
[Node.js] Node.js 설치  (0) 2021.09.19
    'Application Programming' 카테고리의 다른 글
    • [web] php 설치
    • [Three.js] Intro
    • [Typescript]
    • [Node.js] Modules
    1000sj
    1000sj

    티스토리툴바