본문 바로가기
풀스택/React

3. 중간정리 - 리액트 보충설명

by woohyun22 2019. 4. 17.

리액트 - 프론트엔드 라이브러리


웹 애플리케이션의 유저인터페이스를 동적으로 효율적으로 관리하기 위해 사용


App.js

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
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    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;
 
cs


import React, { Component } from 'react';

리액트와 내부의 Component를  불러온다. JSX사용하려면 적어야된다.


import './App.css';

App.css를 불러온다. webpack를 사용해서 import가 가능하다.


컴포넌트 만드는방법은 클래스로 만들거나, 함수로 만드는 방법이있다.


클래스 형태는 꼭 redner함수가 있어야되고, render내부에서 jsx를 return해주어야한다. 


export default App는 App.js를 다른곳에서 사용할수 있도록 해준다.


index.js

1
2
3
4
5
6
7
8
9
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
 
ReactDOM.render(<App />, document.getElementById('root'));
 
serviceWorker.unregister();
cs


import App from './App';

이렇게 import해서 불러온다.


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

로 해당 파일의 


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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
 
 
        이 부분에 App.js가 들어가게 된다.
 
    </div>
 
  </body>
</html>
cs


index

<div id="root"></div> 부분을 찾아서 렌더링해준다.


----------------------------------------------------------------------------

결국 만든 App.js - index.js - (public)index.html


////

import React, { Component } from 'react';


class App extends Component {

  render() {

    return (

      <div>

        

      </div>

    );

  }

}


export default App;

////


기본형식




728x90
저작자표시

'풀스택 > React' 카테고리의 다른 글

5-1. JSX 기본 정리  (0) 2019.04.19
4. fetch 비동기형식  (0) 2019.04.17
2. react 리스트 - 배열  (0) 2019.04.16
1. App.js 예제 및 Movie 예제 만들기  (0) 2019.04.15
0. React시작 - 설치 및 설정  (0) 2019.04.15

관련글

댓글

티스토리툴바