[ReactJS] Hello world!

Hello world!

튜토리얼부터 포스팅하고 기능을 설명하는건 순서가 안맞는 것 같지만,

리액트에 대한 기본 지식이 없다면 여기서 라이브러리 사용방법을 익히고 튜토리얼로 돌아가도 좋다.

어떤 언어를 익히건 초기에는 콘솔창에 Hello world를 띄우기 마련이다

똑같은 원리로, 리액트에서도 리액트만의 문법을 사용하여 Hello world를 출력해 보도록하자.

그전에, 리액트는 로컬에서 실행환경을 갖추고 작업해도 되지만,

Codepen이라는 브라우저 기반 환경에서도 원활히 돌아가기 때문에, 실습 시 이 사이트를 추천한다.

Hello world를 미리 짜놓은 페이지는 다음과 같다.

https://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')                                                                         
);

리액트에서 Hello world를 출력하는 코드는 다음과 같이 나타내어 질 수 있다.

ReactDom에서 JSX라고 불리는 문법을 이용하여, HTML 코드 어딘가에 자신이 만든 컴포넌트를 삽입하는 것이다.

JSX와 컴포넌트, 앨리먼트 더 나아가서 prop와 state에 대해 점차적으로 살펴 볼것이며,

추후에는 이를 이용해 작은 컴포넌트들로 부터 큰 프로젝트를 진행할 수 있을 것이다.

한가지 중요한 점은 리액트는 자바스크립트 라이브러리이므로 자바스크립트에 대한 문법을 알아야 한다는 것이다.

만약 자바스크립트에 대한 공부가 부족하다고 생각하면 MDN이나 생활 코딩등에서 기초문법을 공부하고 오기 바란다.

또한 좀더 심화적인 문법으로 2015년 출시된 자바스크립트의 공통 표준인 ES6 문법을 지원하기 때문에

ES6의 일부 대표적 문법에 대해서도 숙지해야한다.