[React] 실서버 생성, Component, Props

build 디렉토리

 - 실제로 서비스할 때 사용

 - Terminal에 npm run build를 입력하면 생성된다.

 - Terminal에 npx serve -s build를 입력하면 실서버가 만들어진다.

 

 

public 디렉토리

 - create react app에서 npm run start를 했을 때, 파일을 찾는 document root

 

Component 만들기

//App.js 파일
import React, {Component} from 'react';
import './App.css';

class Subject extends Component{  //Subject라는 컴포넌트를 만들겠다.
  render(){
    return( //하나의 최상위 태그만 사용해야 한다.
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}

class TOC extends Component{  //TOC라는 컴포넌트를 만들겠다.
  render(){
    return( //하나의 최상위 태그만 사용해야 한다.
      <nav>
          <ul>
              <li><a href="1.html">html</a></li>
              <li><a href="2.html">css</a></li>
              <li><a href="3.html">js</a></li>
          </ul>
      </nav> 
    );
  }
}

class Content extends Component{  //Content라는 컴포넌트를 만들겠다.
  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></Content>
      </div>
    );
  }
}

export default App;

 

Components and Props

https://reactjs.org/docs/components-and-props.html#gatsby-focus-wrapper

Components and Props – React

class Subject extends Component{  //Subject라는 컴포넌트를 만들겠다.
  render(){
    return( //하나의 최상위 태그만 사용해야 한다.
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}

class App extends Component{
  render(){
    return(
      <div className = "App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        <Subject title="REACT" sub="For UI"></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}

 

독립하기 위해 필요한 도구

1. 설명서를 볼 줄 아는 것

2. 현재 상태를 측정하고 분석하는 것

3. 위의 두 가지를 기르기 위해 질문하고, 스스로 찾아보기

 

React Developer Tools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko 

React Developer Tools

웹브라우저 오른쪽 클릭 - Inspect - React 창에서 React 코드를 실시간으로 바꿀 수 있다.