React를 배우고 싶습니다.

React 개발의 초기 구축 순서, 컴퍼넌트 호출의 방법의 학습을 기록합니다. 집에서 학습한 것의 개인용 메모 정도입니다만, 참고가 되는 분이 계시면 기쁩니다. 환경은 Mac입니다.

만들자

node는 설치되었습니다.
명령은 다음과 같습니다.

프로젝트 만들기

npx create-react-app my-app

※ 참고로 한 번 이하 오류가 발생했지만 대문자의 응용 프로그램 이름을 사용할 수없는 것 같습니다. 어째서일까・・・

name can no longer contain capital letters

우선 작성할 수 있었습니다. 서버를 움직이면 로컬 부팅이 가능해 화면이 보입니다.

서버 시작

npm start

여러가지 만나보자

표준 App.js를 다음과 같이 바꾸어 보았습니다.

App.js

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';

import PageOne from './pages/Pageone';

const PageTwo = () => {
  return (
    <div>
      PageTwo
      <Link to="/">
        <button>
          show PageOne when you click this!!
        </button>
      </Link>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path="/" exact component={PageOne} />
          <Route path="/pagetwo"  component={PageTwo} />
        </div>
      </BrowserRouter>
    </div>
  );
};

export default App;

여기에서는 router 와 컴퍼넌트의 호출을 써 봅니다.
참고로 한 페이지 → React Router에서 페이지 전환을 간략하게 설명

그리고 모처럼이므로 컴포넌트를 분할해 보았습니다.
PageOne이라는 구성 요소(페이지?)를 pages라는 폴더로 분리합니다.

내용은 이런 느낌.

PageOne.js

import React from 'react';
import { Link } from 'react-router-dom';

import Aisatsu from '../components/Aisatsu';

const PageOne = () => {

    return (
      <div>
        <Aisatsu greet="こんにちは！" />
        PageOne
        <Link to="/pagetwo">
          <button>
            show PageTwo when you click this!!
          </button>
        </Link>
      </div>
    );  
  }


  export default PageOne;

export default 라는 것이, 컴퍼넌트를 호출하기 위해서는 필요하다.
또한 Aisatsu라는 구성 요소를 호출합니다.
Aisatsu는 여기.

Aisatsu.js

import React, { Component } from 'react';

class Aisatsu extends React.Component {
    render() {
      return (
        <h1>{this.props.greet}</h1>
      );
    }
  }

export default Aisatsu;

props의 사용법도 어쩐지 알았습니다.

덧붙여서 화면은 이런 느낌.


우선은 공부 있을 뿐이라고 하는 것으로···.
계속 만들어 갑니다.