JSX

자료 출처 : 한입 크기로 잘라 먹는 리액트(React.js)

 

시작하기

npx : 설치 되어 있지 않은 패키지를 딱 한번 사용하고 싶을 때

 

npx create-react-app [이름]

이라는 명령어를 쳐준다.

 그외 명령어들..

npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

 

npm i 

node module이 없을 시 자동으로 다운로드 받아주는 명령어

---

 

jsx == {[data]}

하단의 `export`를 보면 리액트는 es module system을 사용한다.

 

모듈을 받을 때는

import App from './App';

이런식으로 쓰면 된다.

 

JSX 의 기본 규칙들

1. 반드시 닫는 태그
2. 반드시 하나의 부모를 가져야 한다. -> React 모듈에서 Fragment 메소드를 사용하면 된다.

 

css를 쓸때는?

두가지 방법이 있는데 

import './App.css';

이렇게 import를 하거나

function App() {

  let name = "이수민";

  const style = {
    App : {
      backgroundColor: 'black'
    },
    h2 : {
      color:"red"
    },
    bold_text : {
      color : "green"
    }
  };

  const number = 5;

  return (
    <React.Fragment>
      <div style={style.App}>
        <MyHeader/>
          <h2 style={style.h2}>안녕 {name}</h2>
          <b style={style.bold_text} id='bold_text'>
            {number}는 : {number%2 === 0 ? "짝수" : "홀수"}
          </b>
      </div>

    </React.Fragment>
  );
}

이렇게 inline 방식을 사용하면 된다. 추가로 일반적인 자바스크립트 연산자 로직도 {} 안에 사용하면 연산처리가 된다.