리액트 첫 번째 프로젝트

www.notion.so/1-f54ec720d23d4a30be3a0d47bb9573b2#0be6b03eb2e04dbe9670f3ce2de59ad3

[스파르타코딩클럽] 프론트엔드의 꽃, 리액트 - 1주차

리액트 환경 셋팅은 위의 링크를 참고하면 된다

---

리액트는 레고 같은친구다

 

CRA란?? 여러 블럭을 모아놓은 패키지? 라고 할 수 있다

리액트에선 프로젝트를 앱이라고 부르기도 한다!

 

 

리액트의 기본문법 JSX

 

아래처럼 변수에 html을 저장 할 수있다 앞에서 말했듯이 마치 레고같다..!

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

 

JSX의 규칙

 

1. 태그는 꼭 닫아주기

  <div><div>,<p></p> // <input type="text"/>특정 태그는 /하나만 뒤에 달아줘도 된다

 

2. 무조건 하나의 엘리먼트만

function App() {
//return 밖에 다른 엘리먼트 추가 불가
  return (
    <div className="App">
      <input type="text"/>
    </div>
  );
}

•  

3. JSX 안에서 Javascript 값 가져오기

function App() {
  const cat_name = '형민'; // 리턴값 밖에서 변수 선언

  return (
    <div className="App">
      hello {cat_name}
    </div>
  );
}

export default App;

4. class 대신 className 쓰기!

<div className="App">

5. 인라인으로 스타일 주기!

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  }; // 변수로 스타일 지정

  return (
    <div className="App">
      <p style={styles}>orange</p> //html안에 style= {변수} 이런 형식으로 코딩
    </div>
  );
}