React - Home (입문) + 사용 환경 구축

1. React 소개
2. React 코드 생김새
3. React 연습문제
4. React 앱 만들기
5. React 명령어 (버전확인/삭제하기/매뉴얼보기)
6. React 배우기 전 알아야 할 언어
7. 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 container = document.getElementById("root"); 

const root = ReactDOM.createRoot(container);

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 폴더로 이동.

• C:\Users\사용자명>cd hz

 

4. hz 애플리케이션 실행. (자주 사용하니 꼭 암기.) ★★★

• C:\Users\사용자명\hz>npm start (또는, npm run start) 
• ※ hz 애플리케이션 중단  : Ctrl + C

 

5. 아래 브라우저창 뜨면 설치 성공.

• http://localhost:3000/
• ※ 위 소스 파일 위치 : C:/Users/aspire/hz/src/App.js

 

---

[방법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