[ 코딩애플 ] React 리액트 기초 Part1

✏️ 개발환경 설치 및 세팅

1. 구글에 Nodejs를 검색해서 LTS라고 써있는 버전을 설치
2. Visual Studoi Code 에디터 설치

✏️ 리액트 프로젝트 생성

1. 작업용 폴더 만들기(찾기 쉽게 바탕화면에 만들기)
2. 맥북 기준! control 누른 상태에서 클릭, 터미널 열기
3. 아래 코드 입력하면 프로젝트 생성 완료! (프로젝트 이름은 개인이 원하는 이름으로 설정)

npx create-react-app 프로젝트이름

4. Visual studio code 에디터 켜서 File - Open Folder 누른 다음 생성된 폴더명 선택
5. 에디터 상단 메뉴에서 Terminal - New Terminal 누르고 아래 코드 입력하면 내 사이트 브라우저로 미리보기 가능!

npm start

 

✏️ React 에서 레이아웃 만들 때 사용하는 JSX 문법 3가지

1. html에 class 넣을 땐 className 사용
- 원래 React 환경에서 <div> 하나 만들고 싶으면 JS로 React.createElement('div', null) 이런 식으로 만들어야 한다.
- 하지만 보다 간결한 사용을 위해 JSX라는 언어를 사용하는데 사용 방식은 html과 유사하다.

- JSX는 일종의 JS로, JS에서 사용하는 예약어인 class라는 키워드를 남용할 수 없고, 
- 기존의 html/css에서 사용했던 class=" "가 아닌 className을 사용해야한다. 

2. 데이터 바인딩: 변수를 html에 넣을 때는 {중괄호}

function App(){

  let post = '블로그임';
  return (
    <div className="App">
      <div className="black-nav">
        <div>이승재</div>
        <div>{ post }</div>
      </div>
    </div>
  )
}

- hred, id, className, src 등 여러가지 html 속성들에도 적용 가능

3. html에 style 속성 넣을 땐 style={ } 안에 { } 자료형으로 넣기: { 속성명: '속성값' }

<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.