생활코딩 - REACT

생활코딩을 보고 공부한것을 제가 이해한 것을 바탕으로 정리했습니다.
다른 분들도 도움이 되길 바라며 글을 작성합니다. ✍️
추가적으로 필자의 개발환경은 MAC을 사용했으며 IDE는 인텔리제이를 사용중이다.

시작하기에 앞서 리액트를 만드는 방법은 두가지가 있다.

• 첫번째, 클래스 문법을 사용하는 것
• 두번째, 함수형(function)문법을 사용하는것

그중 이 글은 함수형 문법을 사용했다.

리액트의 역할?

리액트의 핵심적인 역할은 "사용자 정의 태그"를 만드는것
내가 원하는 대로 만들수도 있고, 남들이 만든것을 사용할 수도 있음.

일단 React를 하기위해 우리가 해야할 것들

1. JavaScript 점검
React 문서는 JavaScript에 익숙한 사람을 대상으로 쓰여져 있다.
나같이 개발 코린이에게는 산너머 산같다.

리액트 공식 홈페이지를 뒤적거리니 자바스크립트관련 사이트 링크를 찾아버렸다!
자바스크립트

리액트 공식 홈페이지가 추천해준 사이트!
JavaScript 내용이 혼동될 때마다, MDN과 javascript.info를 참고하자!

2. Node.js를 설치한다.

너무 당연한거라 자세한 이야기는 생략한다.
node.js사이트에 들어가서 노드를 다운받은 뒤!
npm 설치를 바로 ㄱㄱ

3.Crate-React-App

노드까지 다 설치가 되었다면 이제 본격적으로 리액트로 개발하기 위해
명령어를 적어준다.

npx create-react-app my-app

-나중에 npm과 npx의 차이도 서술하겠음.

자! 어찌저찌 내 개발환경에 리액트를 설치했다면 우리에게 너무 많은 명령어들이 보일거다.

• npm start
• npm run build
• npm test

그중에서도 'npm start'라는 명령어를 쳐보자!
리액트 개발환경이 실행되면서 코딩을 할 수 있는 환경이 동작하게 된다.
npm start를 하면 src안에 있는 index.js을 실행하는것.

여기까지 했다면 우리는 개발환경 세팅을 마무리한것이다.

이후 내용은 다음 글에 서술하겠습니다.