React ?

React전에 Jquery, Backbone, AngularJS가 있었다.
Jquery -> DOM을 다루는
Backbone과 AngularJS를 위시한 SPA(Single Page Application)

React는 Angular같은 Framework가 아니라 Library입니다.

DOM은 웹의 핵심으로써, 브라우저가 화면을 그리기 위한 정보가 담겨있는 문서

3가지 특징

  1. Component
    Component는 UI를 구성하는 개별적인 뷰 단위 (모듈화)

  2. JSX
    React를 위해 태어난 새로운 자바스크립트 문법

  3. Virtual DOM

Create-react-app

NPM 설치

  1. 개별적으로 프로젝트 폴더에 따로 설치 가능
  2. 전체적으로 사용하도록 설치도 가능 (-g global)
  3. 사용은 주로 npm으로 시작
  4. npx : 따로 모듈 설치 없이 사용할 수 있게 해주는 툴

REACT 프로젝트 생성

1
2
3
npx create-react-app my-app
cd my-app
npm start

초기구조
APP.JS -> INDEX.JS -> INDEX.HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

/* App.js */
//컴포넌트 수입
import React from 'react';
import logo from './logo.svg';
import './App.css';

//컴포넌트
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

//컴포넌트 수출
export default App;


/* index.js */
// APP - app.js에서 불러온 데이터

import App from './App';
//id가 root인 곳에 정보를 뿌려준다.

ReactDOM.render(<App />, document.getElementById('root'));

/* index.html */
<div id="root"></div>

JSX

Javascript의 HTML - HTML방식과 유사
Attrubutes나 css는 낙타 방식이다. (className, textAlign)
Js코드를 활용하고 싶으면 {}를 활용한다.

하루를 기록하다