리액트를 이용한 웹 사이트 만들기

처음으로 리액트 사이트를 만들어 본다. 컴퍼넌트 및 props()를 이용하여 사이트를 만들고 사이트를 구성합니다. 가상 돔(Virtual DOM), 컴포넌트 기반, 데이터 처리, JSX를 이용하여 작업하였습니다.

리액트란

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다.

• 리액트의 특징 다섯가지
  1. Data Flow
  2. Component 기반 구조
  3. Virtual Dom
  4. Props and State
  5. JSX

설치

npx create-react-app react-webpage https://react-basic-site01.netlify.app

디자인

디자인은 웹상에 공유되어있는 디자인으로 작업하였다. 피그마 디자인

작업순서

• 필요없는 파일 삭제 [src에는 app.js / index.js 만 남김]
• rafce : 기본 문법 나오게 하기 ---> 확장 프로그램에서 ES7를 설치해야 작동.
• 리액트 시작 npm start