react

 

 

리액트 설치 (공식사이트 : https://reactjs.org/)

React 는 UI 컴포넌트 라이브러리이다

장점

1. 단순한 앱개발 :React 는 순수 자바스크립트로 만든 컴포넌트 기반 아키텍쳐이다
2. 빠른 UI : 가상 DOM 제공
3. 코드량 감소 : React 커뮤니티와 개발 생태계를 통해 수많은 라이브러리와 컴포넌트를 접할수있다

단점 :

1. 리액트는 단방향 데이타 바인딩만 제공한다
2. 리액트는 다른 프레임워크처럼 성숙하지 않다
3. 리액트는 모든 기능을 갖춘 프레임워크는 아니다. 여러 라이브러리를 같이 사용해야만 한다

Node.js 설치

**https://nodejs.org/ko/download**

설치가 끝나면   node -v 으로 확인

1. yarn 설치

**https://yarnpkg.com/en/docs/install#windows-stable**

npm install --global yarn

yarn --version

yarn --version 으로 확인

1. 에디터 Visual Studio Code 설치

**https://code.visualstudio.com/Download**

1. Visual Studio Code 에서 확장 프로그램 설치
2. ESLint : 자바스크립트 문법 체크
3. Relative Path : 상대경로에 있는 파일 경로를 편하게 작성할수 있는 도구이다
4. Guides : 들여쓰기 가이드라인을 그려준다
5. Reactjs code snippets : 리액트 관련 스니펫 모음으로 제작사가 Charalampos Karypidis 인것 설치할것
6. live server
7. Simple React snippets

JSX : 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장으로 특히 React.createElement 를 반복적으로 호출하는 불편을 해소한다

설치

npm install -g create-react-app

또는

yarn global add create-react-app

프로젝트 생성

형식 :  npx create-react-app  <프로젝트 이름>

npx create-react-app first-app

cd first-app

npm start (또는 yarn start)

 

Hooks 는 리액트 v16.8 에 새로 도입된 기능

함수형 컴포넌트에서는 원래 상태관리가 불가능(state)했었는데

가능하도록 하는 useState 기능이 추가되었다

• *** JSX 와 HTML 의 차이점**

태그 특성은 낙타 표기법

(예) <input type=”text” maxlength=”30”/>  HTML

return  <input type=”text” maxLength=”30”/> JSX 낙타표기법

1. 모든 요소는 짝이 맞아야 한다
2. 특성 이름이 HTML 언어 사양이 아닌 DOM API 에 기반을 둔다

 

 

 

-설치 잘 안되면  vs code 내의 터미널 창에서 설치하자 (npx create-react-app first-app) 

 

 

-Reactjs code snippets 익스텐션 다운 받으면 rsf 같은 단축어로 템플릿 자동생성 가능하다 

 

 

-index.js에 root파일

-app.js에 컴포넌트 넣어 주면 화면에 뜬다 

-하나의 컴포넌트에는 하나의 div 

-이미지 파일을 src나 public에 넣고 import 해서 사용 

-