리액트 1

FaceBook에서 만든 frontend 제작 언어.

리액트는 자주 사용하는 코드 덩어리를 컴퍼넌트화 시켜둬서 직접 코딩량은 줄이면서 보기좋은 사이트를 만들기 쉽게 해 준다.

 

1.nodejs 설치

홈페이지 메인에서 설치

 

2.create-react-app 설치

커맨드 npm install -g create-react-app

 

3.create-react-app 셋팅

커맨드 create-react-app .

 

5분 정도 걸리고, 리액트 기본 모듈 패키지 받고, index.html까지 만들어준다.

 

4.실행

visualcode에서 만들어준 프로젝트 폴더 오픈

터미널에 npm start run

브라우저에 기본 react 샘플 열림

 

5.코드수정

index.js 에서 <App /> 사용자 정의 태그를 작성해뒀고,  내용은 App.js 안에 들어있다.

App.js 내부를 수정 해서 페이지를 꾸밀 수 있다.

 

6.css 수정

index.css에서 수정하면 된다. 

import 할 때

import App from './App';

뒤의 App은 파일명이다

 

7.개발자도구 새로고침

개발자도구 ON상태에서 새로고침 우클릭하면 아래 메뉴 호출 가능

 

8.deploy

커맨드 npm run build

build 폴더 생긴다.

 

웹서버 설치

npm install -g serve

 

웹서버 실행

npx serve -s build

 

접속 

터미널에 출력 된 정보로 접속

 

개발자도구 네트워크 탭에서 페이지 크기 확인 가능