[React Study] 생활코딩 React - 6. 샘플 웹앱 실행 ~ 11.2 컴포넌트 만들기 2

나의 선생님

 

React - 6. 샘플 웹앱 실행

터미널에서

- npm run start : 실행

- Ctrl + C : 종료

 

 

React - 7. JS 코딩하는 법

public -> index.html 파일

- 모든 component들은 id가 root인 곳 안에 작성하도록 약속되어 있음

<div id="root">요 안에</div>

 

- 대부분의 파일은 src 폴더 안에 들어감

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

- srt -> index.js 파일

- <App /> ➡ 파일

 

App.js

- App.js 파일을 함수 형식에서 클래스 형식으로 변경

- div 태그 안을 Hello React !! 로 변경

 

index.html

- 자동으로 리로드 되는 것을 볼 수 있음

 

React - 8. CSS 코딩하는 법

App.css

- 배경화면 변경

 

index.js

4번째 줄의 App과 9번째 줄의 App은 이름이 같으면 문제 없음

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

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

App KWONJEONG으로 변경 ➡ 상관 없음

 

React - 9. 배포하는 법

- 캐시 비우기 및 강력 새로고침

 

- 용량이 1.6 MB이나 되는 것을 알 수 있음

- 이는 큰 용량임..

 

npm start build

- 명령어를 실행하면 코드에서 공백이 사라진 것을 알 수 있음

- build -> index.html

- 불필요한 정보 없앰

 

npm install -g serve

- serve 명령어 설치

 

npx serve -s build

- 위 명령어 사용해 나온 주소를 입력하면 웹페이지를 볼 수 있음

 

React - 10. 리액트가 없다면

- 컴포넌트 만드는 방법!!

 

pure.html

- pure.html 파일을 작성

- 만약 이 코드가 엄청 복잡한 코드라면..? ➡ 복잡할 것

- 태그를 감춰놓고 이름만 보이게 하며 간단하게 만들 수 있다면?

 

React - 11.1 컴포넌트 만들기 1

App.js

- 컴포넌트 공간

 

- 컴포넌트는 반드시 하나의 최상위 태그를 써야함

- 자바스크립트 파일이지만 코드를 효율적으로 작성하기 위해 페이스북에서 작성

 

React - 11.2 컴포넌트 만들기 2

class Subject extends Component {
  render(){
    return (
      <header>
          <h1>WEB</h1>
          world wide web!
        </header>
    );
  }
}

class TOC extends Component{
  render(){
    return(
      <ul>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ul>
    );
  }
}

class Content extends Component{
  render(){
    return(
      <article>
        <h2>HTML</h2>
        HTML is HyperText Markup Language.
      </article>
    )
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
        <Content>z</Content>
      </div>
    );
  }
}