React 걸음마_개발환경 셋팅하고 프로젝트 생성하기

코딩을 배운지 어언 3개월 반...

깊게 아는 것이 없어서 이걸 언제쓰고 왜쓰며 왜 좋은지 원리도 이해 못하고 쓰고 있는 나를 보며

다시 초심자의 마음으로 돌아가서 정리하고 내것으로 만들어야겠다는 생각이 들었다.

꾸준히 포스팅하면서 리액트에 깊게 알아보는 시간을 가져볼것이다.!

우선 시작하기 전에 개발환경 셋팅부터 해주자!!

1. Node.js 설치 

https://nodejs.org/ko

Node.js

2. vscode 에디터 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

이제 셋팅이 다 되었다면 프로젝트 생성을 해보자

리액트 라이브러리 설치 

npx create-react-app .

또는

npx create-react-app 프로젝트폴더명

 

😈 아래 폴더들 생성됨 😈

node_modules  > 라이브러리 코드 보관상자 📦 

public > static 파일 모음집 📂

src > 이곳에 우리는 코드를 짤것임

package.json >우리가 설치한 라이브러리명, 프로젝트명, 버전 등등 => 프로젝트 정보노트 📕  

 

터미널에 입력

npm start

=> 리액트 프로젝트 미리보기 띄우기

 

 

 

리액트를 사용하려면 몇가지 규칙을 지켜야하는데...
이것을 JSX 문법이라고 칭함
( javaScript XML =  javaScript에 XML을 추가한 확장문법이라고한다~)

 

😈 JSX문법을 알아보자 😈  

• class 대신 className을 사용
• 변수를 사용할 때 중괄호 { } 안에 넣기
• html안에 스타일을 지정 시 style = {{key : value}} <- 객체형식으로 작성
• if문(for문) 대신 삼항연산자 사용 { AND연산자(&&)사용 }

post == true && <div>안뇽<div>
post == true ? <div>안뇽<div> : null

• 프로퍼티 명명 규칙 : 카멜케이스로 작성해야함 ( font-size -> fontSize )

App.js

function App() {

  let post = "Ariana Grande";
  return (
    <div>
      <div className='black-nav'>
        <h4>Blog</h4>
      </div>
       <h4>{post}</h4>
    </div>
  )
}

정리

프로젝트를 하다보면 초기셋팅에서 진을 빼는 경우가 많다..내 경험으론..

초기셋팅을 빠르게해서 바로 프로젝트 작업을 할 수 있도록

미리 소스코드를 만들어두어야겠다!!

 

내용은 코딩애플 React강의를 참고하였다

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!

정말 좋아여...코딩애플씨는 저의 한줄기 빛....