React 애플리케이션을 모듈로 구성

이곳은 첫 번째 포스터, 장기 독자입니다.보답할 때가 된 것 같습니다.
내가 소프트웨어 개발에 종사한 지 8년이 된 마지막 2년 동안 나는 React 개발을 했다.vanilla Javascript와 jQuery에서 왔어요. 연애한다고 말해 주세요.
이 문서에서는 React 애플리케이션을 구성하는 방법에 대해 자세히 설명합니다.
이 글은 또한 당신이 리액션을 어떻게 설정하고 사용하는지 알고 있다고 가정한다. (즉, 이것은 입문서가 아니다.)
우리 시작합시다!

간단한 소개

나는 토도에 싫증이 났다. 그래서 우리가 허구한 셸 프로그램은 게임 스튜디오의 버그 추적기였다. 알파와 베타 테스트 인원들이 버그를 보고할 수 있도록 했다.
그것은 네 개의 모듈이 있는데 그것이 바로 계기판, 게임, 사용자, 분석이다.

이런 방법의 장점은 부모 응용 프로그램이 하위 모듈에 대해 구체적으로 이해하지 못한다는 데 있다.그것은 단지 그것이 모듈이 있다는 것만 안다.각 모듈은 자신의 위치와 데이터를 관리한다.부모 프로그램의 어느 곳에서든 <Route /> 또는 <Link></Link> 을 추가할 필요가 없습니다. 이것은 하위 프로그램에서 정의한 것입니다.
이 글의 코드는 GitHub에 있습니다.

잭 윌리엄스 / 개발 반응 모듈

모듈로react 응용 프로그램을 구성하는 예시

이것은 저의 dev.to 글에 첨부된 예시 저장소입니다.
React 개발을 위해 모듈을 사용하는 방법을 보여줍니다.
우리가 개발하고 있는 허구의 셸 응용 프로그램은 게임 스튜디오의 버그 추적기입니다. 알파와 베타 버전을 허용합니다.
테스트 인원은 쉽게 오류를 보고할 수 있다.
이 프로젝트는 Create React App에 의해 시작됩니다.

사용 가능한 스크립트

프로젝트 디렉토리에서 다음을 실행할 수 있습니다.

npm 시작

응용 프로그램을 개발 모드로 실행합니다.
열기http://localhost:3000는 브라우저에서 볼 수 있습니다.
편집하는 경우 페이지가 다시 로드됩니다.
콘솔에서 lint 오류를 볼 수 있습니다.

npm 시험

상호작용 감시 모드에서 테스트 실행 프로그램을 시작합니다.
자세한 내용은 정보running tests 섹션을 참조하십시오.

npm 운영 구축

프로덕션 응용 프로그램을 build 폴더에 생성합니다.
프로덕션 모드에서 올바르게 반응하고 최적의 결과를 얻기 위해 구축을 최적화합니다.
View on GitHub

개시하다

실제 인코딩을 시작합시다!
create react 응용 프로그램이 없으면 npm install -g create-react-app를 사용하여 설치합니다.그리고...create-react-app dev-react-modules cd dev-react-modules npm install react-router-dom --save yarn start저는 응용 스타일을 상세하게 소개하지 않을 것입니다. GitHub repo 에서 보실 수 있습니다.

모듈 만들기

src 폴더 아래에서 모듈 구조를 먼저 만듭니다.그것은 이렇게 보인다.

모듈

분석

대시보드

미니게임

사용자

각 모듈의 폴더에 색인을 추가합니다.js

src\modules\Analytics\index。js

import React from 'react';

const Analytics = () => (
    <div>Analytics Module</div>
);

export default {
    routeProps: {
        path: '/analytics',
        component: Analytics
    },
    name: 'Analytics',
}

src\modules\Dashboard\index。js

import React from 'react';

const Dashboard = () => (
    <div>Dashboard Module</div>
);

export default {
    routeProps: {
        path: '/',
        exact: true,
        component: Dashboard,
    },
    name: 'Dashboard',
};

src\modules\Games\index。js

import React from 'react';

const Games = () => (
    <div>Games Module</div>
);

export default {
    routeProps: {
        path: '/games',
        component: Games,
    },
    name: 'Games',
};

src\modules\Users\index。js

import React from 'react';

const Users = () => (
    <div>Users Module</div>
);

export default {
    routeProps: {
        path: '/users',
        component: Users,
    },
    name: 'Users',
};

여기는 별다른 것이 없습니다. 모듈과 기본 내보내기를 만들었습니다.단, 우리는 하나의 구성 요소만 내보내는 것이 아니라, 모듈에 필요한 모든 것을 내보내고, 부급으로 하여금 일을 안배하게 한다.모듈 테마, 네비게이션 아이콘, 필요한 권한 등으로 확장할 수 있습니다...
내가 좋아하는 것은 모듈을 추가하기 위해 부급을 변경할 필요가 없다는 것이다.저는 그냥...모듈을 추가합니다.
출구를 분석해 봅시다. 제가 아래에 몇 가지 평론을 추가했습니다.

export default {
    routeProps: { // This gets passed straight to react-router
        path: '/users', // Where the module lives in the nav hierarchy
        component: Users, // The actual component itself
    },
    name: 'Users', // The name of the module
};

도출 구조를 부모 모듈과 하위 모듈 간의 계약으로 볼 수 있습니다.학부모는 내가 몇 개의 모듈을 가지고 있든지 간에 나는 단지 이 물건들을 너에게 보여줄 수 있을 뿐이라고 말했다.
지금 우리는 모든 이 모듈을 내보내야 한다.modules 폴더에 색인을 만듭니다.js.

src\modules\index。js

import Analytics from './Analytics';
import Dashboard from './Dashboard';
import Games from './Games';
import Users from './Users';

export default [
    Dashboard,
    Analytics,
    Games,
    Users
];

여기에서 우리는 모듈 목록을 내보냅니다.이것이 바로 부모가 필요로 하는 것이다.

상위 응용 프로그램 만들기

현재, 우리의 하위 모듈이 모두 완성되었으니, 메인 응용 프로그램에서 그것들을 모두 통합합시다.js.

src\App。js

import React from 'react';
import { useState } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import logo from './logo.svg';
import './App.css';

import modules from './modules'; // All the parent knows is that it has modules ...

function App() {
  const [currentTab, setCurrentTab] = useState('dashboard');

  return (
      <Router>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <ul className="App-nav">
              {modules.map(module => ( // with a name, and routes
                  <li key={module.name} className={currentTab === module.name ? 'active' : ''}>
                    <Link to={module.routeProps.path} onClick={() => setCurrentTab(module.name)}>{module.name}</Link>
                  </li>
              ))}
            </ul>
          </header>
          <div className="App-content">
            {modules.map(module => (
              <Route {...module.routeProps} key={module.name} />
            ))}
          </div>
        </div>
      </Router>
  );
}

우리 그것을 분해합시다.import modules from './modules';내가 전에 말했듯이 학부모가 알아야 할 것은 모듈이 있다는 것이다.이곳에서 우리는 그것들을 수입한다.

<ul className="App-nav">
  {modules.map(module => (
      <li key={module.name} className={currentTab === module.name ? 'active' : ''}>
        <Link to={module.routeProps.path} onClick={() => setCurrentTab(module.name)}>{module.name}</Link>
      </li>
  ))}
</ul>

여기서 학부모들은 모듈에 이름과 링크가 있다는 것을 알고 있다. (계약이기 때문에 기억나?)따라서 탐색 메뉴를 동적으로 구성할 수 있습니다.

<div className="App-content">
  {modules.map(module => (
    <Route {...module.routeProps} key={module.name} />
  ))}
</div>

여기서 부모 모듈은 모듈에 구성 요소가 있는 경로를 알고 있기 때문에 동적 <Route /> 의 경로를 나타낼 수 있다.
이제 자체적으로 구성되고 모듈화된 React 애플리케이션이 있습니다.
하지만 잠깐만, 더 있어!

새 모듈 추가

우리는 버그 추적기를 위해 핵심 모듈인 버그를 빠뜨렸다.
우리의 새로운 구조의 묘미는 내가 해야 할 일은 내보내기 목록에 새 모듈을 추가하는 것이다.

src\modules\Bugs\index。js

import React from 'react';

const Bugs = () => (
    <div>Bugs Module</div>
);

export default {
    routeProps: {
        path: '/bugs',
        component: Bugs,
    },
    name: 'Bugs',
};

src\modules\index。js

import Analytics from './Analytics';
import Bugs from './Bugs'; // added
import Dashboard from './Dashboard';
import Games from './Games';
import Users from './Users';

export default [
    Dashboard,
    Games,
    Bugs, // added
    Users,
    Analytics,
];

결론

나는 이미 이 구조를 사용한 지 몇 년이 되었는데, 나는 그것을 좋아한다.그것은 우리 프로그램에서 많이 확장되었지만, 나는 이 글을 간단하게 유지하고 싶다.
나도 이 공을 나에게 돌릴 수 없다.몇 년 전, 내가 React와 합작하기 시작했을 때, 나는 운 좋게도 베테랑 React 전문가와 합작했다.그는 나에게 이런 구조를 가르쳐 주었다.나는 다른 개발자에게 배우는 것을 좋아한다!
생각, 문제, 건의?당신은 어떻게 당신의 프로젝트를 조직합니까?