목차
- React 소개
- React 코드 생김새
- React 연습문제
- React 앱 만들기
- React 명령어 (버전확인/삭제하기/매뉴얼보기)
- React 배우기 전 알아야 할 언어
- React 배우기에 좋은 사이트 소개
React 소개
사용자 인터페이스 구축 위한 JS 라이브러리.
PS.
- 프런트엔드 프레임워크 일종
- 단일 페이지 애플리케이션 빌드하는 데 사용.
- 재사용 가능한 UI 컴포넌트 생성 가능.
- Ajax 처럼, 특정 콘텐츠 부분만 동적으로 변경 가능.
React 코드 생김새
import React from 'react';
import ReactDOM from 'react-dom/client';
function Hz(props) {
return <h1>홈짱닷컴 Homzzang.com</h1>;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hz />);
PS. 구 버전 시절 예제
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
render() {
return <h1>Homzzang.com</h1>;
}
}
ReactDOM.render(<Hz />, document.getElementById('root'));
PS. 디지털 시계 : https://homzzang.com/b/js-1121
React 연습문제
ReactDOM.render(myElement, document.getElementById('root'));
React 앱 만들기
※ PC에 React 환경 구축 방법 (= create-react-app 설치) 소개.
※ Node.js와 함께 설치되는 NPM 이용해서 쉽게 구축 가능.
※ CMD 모드 실행 후, 아래 명령어 입력.
[방법1 - NPM 이용해 설치] ★
1. create-react-app 전역 모드로 설치. (※ g : global)
- C:\Users\사용자명>npm install -g create-react-app
2. create-react-app 이용해, hz이라는 내 앱 생성.
- C:\Users\사용자명>npx create-react-app hz
3. 생성한 hz 폴더로 이동.
4. hz 애플리케이션 실행. (자주 사용하니 꼭 암기.) ★★★
- C:\Users\사용자명\hz>npm start (또는, npm run start)
- ※ hz 애플리케이션 중단 : Ctrl + C
5. 아래 브라우저창 뜨면 설치 성공.
[방법2 - NPX 이용해 설치]
C:\Users\사용자명>npx create-react-app hz
C:\Users\사용자명>cd hz
C:\Users\사용자명\hz>npm start (또는, npm run start)
npm : 영구적으로 create-app-react 설치. (수동으로 버전 관리.)
npx : 1회성으로 create-app-react 설치. (항상 최신 버전 이용 가능)
PS.
React 명령어 (버전확인/삭제하기/매뉴얼보기)
create-react-app 버전 확인. (※ 대문자 V 사용)
create-react-app -V
create-react-app 삭제하기
sudo npm uninstall create-react-app
create-react-app 사용법 (매뉴얼) 보기
create-react-app --help
PS. 관련 강의 이어서 보기
https://homzzang.com/b/react-3
React 배우기 전 알아야 할 언어
HTML , CSS , JavaScript + JS ECMAScript 6 (ES6)
React 배우기에 좋은 사이트 소개
- React 공식 홈페이지 - https://reactjs.org/ (영어), https://ko.reactjs.org/ (한국어)
- 땅콩코딩 react 세팅 강의 - https://youtu.be/YLhLbQE2-t0
- 생활코딩 react 강의 - https://www.opentutorials.org/module/4058
- 워삼스쿨 react 강의 - https://www.w3schools.com/react/default.asp
최신댓글