리액트5 create-react-app 설치 및 css적용

1. node js설치

2. node -v / npm -v 버전 확인

3. npm install -g create-react-app 설치 

4. npx create-react-app react-for-biginners 로 폴더 생성 및 install 

5. code react-for-beginners 로 vs code 오픈

6. vs code terminal에서 npm start 입력 => 서버 생성

 

 

css 적용

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;

 

Button.module.css 생성
.btn {
    color : white;
    background-color: tomato;
}

 

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

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

export default App;

 

.module.css를 생성하여 

className을 이용하여 css 적용