[리액트] 가위바위보 앱 만들기 (상)

> npx create-react-app [프로젝트 파일 이름]

> cd  [프로젝트 파일 이름]

> code .

1. 박스 2개(타이틀,사진,결과값)

2. 가위바위보 버튼

3. 버튼 클릭 이벤트

4. 컴퓨터 랜덤 선택

5. 3,4 의 결과로 승패 검정(승:초록/패:빨강/무승부:검정)

 

컴포넌트 파일 생성 > Box.js 생성 > 컴포넌트 생성 (단축키: rafce)

단축키 제공

▼ npm start 오류

https://nayha.tistory.com/769

npm : 이 시스템에서 스크립트를 실행할 수 없으므로 오류 해결..

 

기본틀 만들기

App.js

import logo from './logo.svg';
import './App.css';
import Box from "./component/Box"

function App() {
  return (
    <div>
      <div className='main'>
      <Box title="You"/>
      <Box title="Computer"/>
      </div>
      <div className='main'>
        <button>가위</button>
        <button>바위</button>
        <button>보</button>
      </div>
    </div>
    

  );
}

export default App;

Box.js

import React from 'react'

const Box = (props) => {
  return (
    <div className='box'>
        <h1>{props.title}</h1>
      <img className='item-img' 
      src='https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTEyL2pvYjk1OS1lbGVtZW50LWItMDEzNl8yLmpwZw.jpg'/>
      <h2>WIN</h2>
    </div>
  )
} 
export default Box

 

App.css

.main{
  display: flex;
  justify-content: center;
}
.box{
  border: 5px solid black;
  width: 500px; height: 500px;
  margin: 50px; padding: 20px;
}
.item-img{
  width: 350px;height: 350px;
  justify-content: center;
  display: block;
} 
button{
  font-size: 30px; text-align: center;
  width: 100px; height: 100px;
  padding: 10px; margin: 10px;
}

버튼클릭시 해당 이미지 표출

https://github.com/roseraph502on/RockScissorsPapper

GitHub - roseraph502on/RockScissorsPapper