jineecode

react 01 본문

JS/react

react 01

지니코딩 2020. 12. 7. 12:46

 

1. 터미널에서 실행.

npm run start

 

2. 실행 종료.

ctrl C 

 

JS 코딩하는 법

 

1. public 폴더는 index.html 이 있는 곳.

( 이 react 파일을 실행한 결과가 담긴 html 이다. )

 

 

2. root

 

public/index.html

  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>

html의 #root가

 

 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

document.getElementByID('root') 이다.

 

 

3. App

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

 

  <App /> : react를 통해 만든 사용자 정의 태그, 컴포넌트이다. 이것의 실제 구현은 

import App from './App'; 이 코드이다.

 

'./App'; 는 /App.js 를 생략한 것이다.

 

또한

 

import App from './App'; 

  <App />

 

두 이름이 같아야 한다.

 

src/App.js

 

함수형을 class형으로 진행한다.

import logo from './logo.svg';
import './App.css';
import { Component } from 'react';

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;

 

이제 어디를 수정해야 창이 바뀔까?

바로 <div className="App">  </div> 사이를 수정해주면 된다. 

이때, 하나의 태그의 안쪽에 나머지 태그가 있어야 한다.

가장 바깥 쪽에는 태그 하나만 있어야 한다.

import logo from './logo.svg';
import './App.css';
import { Component } from 'react';

class App extends Component {
  render(){
    return (
      <div className="App">
        hello, react!
      </div>
    );
  }
}

export default App;

 

결과:

잘 바뀐 것을 확인할 수 있다.

 

 

 

CSS 코딩하는 법

src/index.css

 

 

배포하는 법

터미널에 npm run build 명령 실행 시 디렉터리에 build 파일 생성.

안내되는 로컬에 접속하면 불필요한 내용 없어진 사이트에 접속이 가능하다.

 

'JS > react' 카테고리의 다른 글

react of component  (0) 2021.02.11
react의 골격  (0) 2021.02.11
react 실행, git hube에 연동하기.  (0) 2021.02.11
react 설치하기  (0) 2020.12.04
React  (1) 2020.12.04
'JS/react' Related Articles more
Comments