React 프로젝트 생성 + JSX문법

React 설치·실행

일반적으로 create react app이라는 라이브러리를 이용해서 프로젝트를 생성하는게 일반적이다. 

 

1) 프로젝트 생성

react프로젝트를 생성할 폴더에 다음 명령어 입력한다.

npx create-react-app blog

 

2) 생성된 프로젝트 미리보기

미리보기 실행하려면 terminal에 다음 명령어를 입력한다.

npm start
//localhost:3000

 

JSX

1) JSX(JavaScript XML)란? 

- JSX는 Javascript에 XML을 추가한 확장한 문법이다.
 - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
 - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

// 실제 작성할 JSX 예시
function App() {
	return (
      <h1>HelloWorld</h1>
    );
}

// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.
function App() {
	return React.createElement("h1", null, "HelloWorld");
}

 - JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
 - 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.(주관적인 관점)

 

2) JSX 문법

- class 넣을 땐 className

- 변수 넣을 땐 {중괄호}