24.05.17_TIL React (리엑트) _ 2. npm 실행, 버튼 만들기

 

 

 

 

 

1. 설치해주자

 

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

먼저 다운로드 해주자.

 

(windows용)

1. 윈도우키 + R 누르면 실행창이 뜬다.

2. cmd 라고 입력하고 확인하면 아래의 창이 뜬다.

3. node -v 를 치면 버전을 확인하여 잘 깔렸는지 확인가능.

4. npx 를 쳐서 설치된것을 확인한번 더 한다.(잘 실행되는가)

 

 

 

 

 

ㅎㅎㅎ 에러가 안나면 재미없지.

 

npm install -g npm@latest                             # 버전 업데이트
npm config set registry http://registry.npmjs.org/    # 설정 초기화
npm cache clean --force                               # 캐시삭제
node -v                            # 버전확인
mkdir react-for-beginners          # 프로젝트 디렉토리 생성
cd react-for-beginners             # 생성한 디렉토리로 이동
npx create-react-app .             # . 까지 찍어야함. react 프로젝트 생성

 

y 를 입력해서 다운로드해서 생성해주면 됨.

 

 

 

 

 

 

설치가 끝났다. vs 코드를 실행시켜주자.

 

첫 화면 세팅 완료

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 실행을 시켜보자

 

 

npm start 를 하면 설치되고 완료된것을 볼 수 있다.

첫 세팅을 가볍게 해주자

 

src 에 App.js

function App() {
  return (
    <div>
      <h1> Welcome ! </h1>
    </div>
  );
}

export default App;

 

src 에 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

 

 

 

 

 

이제 프로그램 하는 것을 기록으로 남기기 위해서 깃 푸쉬 해주자

 git add .
 git commit -m "first commit"
 git remote add origin https://github.com/tia4613/React_first_pjt.git
 git push -u origin master

 

git 이 이미 깔려있어서 git init 을 안해주어도 된다.

 

 

 

 

 

 

 

 

 

 

3. 버튼을 만들어보자.

 

src 에 Button.js 파일을 만들어서 코드를 작성해주자.

function Button({text}) {
  return <button>{text}</button>;
}
export default Button;

 

src 에 App.js 에 코드를 수정해준다. import 해줌

import Button from "./Button";

function App() {
  return (
    <div>
      <h1> Welcome ! </h1>
      <Button text={"tt"} />
    </div>
  );
}

export default App;

 

그 다음 prop 를 설치해준다.

npm i prop-types

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. 버튼 변경해보기.

src 에 Button.js 에 코드를 수정해준다.

import PropTypes from "prop-types";

function Button({text}) {
  return <button>{text}</button>;
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

 

src 에 index.js 에 코드를 수정해준다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import "./styles.css";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

 

styles.css 파일을 만들어서 색을 넣어준다.

button {
  color: white;
  background-color: tomato;
}

 

 

 

 

 

 

 

 

 

 

 

 

5. css 파일을 모듈러로 변경해서 가지고 와보자.

1. syles.css 이름을 Button.module.css 로 바꾸어준다. 코드 네임도 바꾸어줌

.btn {
  color: white;
  background-color: tomato;
}

 

 

2. Button.js 코드를 바꾸어준다.

 

import PropTypes from "prop-types";
import styles from "./Button.module.css";

function Button({text}) {
  return <button className={styles.btn}>{text}</button>;
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

 

 

3. index.js 에서 css 코드를 지워준다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

 

 

-> 이렇게 바꾸어도 똑같이 css 가 작동한다.

 

4. App.js 도 똑같이 수정해보자.

import Button from "./Button";
import styles from "./App.module.css";

function App() {
  return (
    <div>
      <h1 className={styles.title}> Welcome ! </h1>
      <Button text={"tt"} />
    </div>
  );
}

export default App;

 

5. App.module.css 를 생성한다.

.title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 18px;
}