[React]시작하기

리액트란?

리액트는 페이스북에서 만든, 사용자 인터페이스를 만들기 위해 사용되는 자바스크립트 라이브러리이다.
출처 : 위키백과

리액트의 대표적인 특징

• JSX 문법 (JavaScript eXtension) 사용
  • React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.
• Component 기반
  • 컴포넌트(Component)는 프로그램에 있어서 재사용이 가능한 각각의 독립 모듈이다.
    소프트웨어 시스템에서 독립적인 기능을 수행하는 '모듈'로서 시스템을 유지 보수 하는데 있어서 일부분 교체가 가능하도록 만든 기술이다.
    쉽게 말해, 각각의 컴포넌트가 독립적인 기능을 수행하는 소프트웨어 모듈이라고 설명할 수 있다. (유지보수용의)

---

1. 프로그램 설치하기

NodeJS - 리액트 프로젝트를 준비하기 위한 webpack , babel 등의 도구들을 실행하는데 활용

1. yarn - 자바스크립트 패키지를 관리하기 위해 사용 Node.js에 내장 된 npm으로 사용 해도 된다. (yarn이 더 빠르다고는 하는데.. 사실 잘..모르겠...)

다운로드 URL

NodeJS - https://nodejs.org/ko/ => (LTS 다운 추천)
Yarn - https://classic.yarnpkg.com/en/docs/install#windows-stable (필수아님)
VS Code(개인이 사용하는 에디터 사용하시면 됩니다.)

 

Reactjs code snippets - js파일에서 단축키 사용으로 쉽게 컴포넌트 생성

Reactjs code snippets 자주 사용하는 단축키

단축키	설명
rcc	클래스 컴포넌트 생성
rsc	함수형 컴포넌트 생성

* 추가 단축키는 더 공부 후에 나중에 정리 해보자

---

2. 프로젝트 생성

VSCODE -> 보기 (View) -> 터미널 (Terminal)
* 단축키 - ctrl + ` / 하단 바 끌어올리기 도 가능하다.

리액트 설치 방법이 나와있는 사이트
https://create-react-app.dev/docs/getting-started/ - 영문 버전
https://ko.reactjs.org/ - 한글 버전

react 프로젝트 설치

• npx create-react-app 프로젝트명 (yarn create react-app 프로젝트명)

 

해당 화면이 나타나면 설치 완료

• cd 프로젝트명 ( cmd 명령어로 해당 폴더로 이동이다. )
• npm start or yarn start - 실행

 

해당 화면이 나오면 React 설치 완료