React Redux 이니시에이터

총결산

최근에 react-starter 프로젝트를 업데이트하여 다음과 같은 현저한 변화를 추가했습니다.

다양한 구축 구성(개발 및 생산)에 적응

은 NPM 스크립트

의 일부로 플러그인(bundleanalyzer,bundlebuddy)을 지정할 수 있습니다

은 NPM 실행 스크립트

(옵션)으로 웹팩 대시보드를 추가했습니다.
나는 아직 더 선진적인 라이브러리를 도입할지 결정하지 못했다. 예를 들어 Redux과 React-Router이다.마지막으로 react-redux-starter이라는 새로운 시작 프로젝트를 만들기로 했습니다. React 외에 Redux과 React-Router을 사용하고 싶은 사람들에게는 고급 시작 프로젝트와 같습니다.따라서 본고에서 나는 react-redux-starter 프로젝트에서 사용할 수 있는 내용을 묘사할 것이다.

프로젝트 개요

react-redux-starter 프로젝트는 기본 템플릿으로 React, React Router, Redux, Bootstrap 4, Sass, Webpack, 과 을 사용하여 단일 응용 프로그램(SPA) 구축에 필요한 기본 요소로 구성된다.
비록 나는 이 프로젝트를 어떤 유형의 템플릿이라고 부르지만, 그것도 하나의 소형 응용 프로그램이다. 왜냐하면 이것은 구조의 완전한 수직 부분을 보여주기 때문이다.이것은 Redux와 React 라우터의 예시가 실행 중이라는 것을 의미합니다.나는 우편 번호 목록을 얻기 위해 매우 간단한 구성 요소를 제공했다.나는 우편 번호 JSON 파일을 통해 데이터를 제공하여 예시의 단순성을 유지한다.그러나 이 간단한 구성 요소는 Redux 조작, Redux 용기, Redux 저장소의 사용을 확실히 설명한다.
다음 그림은 Redux 및 우편 번호 서비스를 사용하여 데이터를 얻는 방법에 대해 설명합니다.
Please see here for more detail

특징

템플릿은 다음과 같습니다.

전형적인 프로젝트 구조

a Babel 설정 및 구성

a 패키지 설정 및 설정

ESLint 설정 및 구성

a SCSS 설정 및 구성

우편 번호 목록을 표시하는 예시React 구성 요소

우편 번호 상태를 처리하는 Redux 설정

a React 라우터 설정으로 기본 탐색

표시
이 템플릿은 개발 및 생산 패키지 설정도 제공한다.
이 템플릿은 구축 과정에서 특정 플러그인을 포함할 수 있습니다.

유리 진열장

다음 애니메이션 GIF는 응용 프로그램의 모양을 보여 줍니다.

데스크톱

이동식

Visual Studio Code

노드회사 명 함께 개발

React-Microsoft가 Windows, Linux, macOS를 위해 개발한 원본 코드 편집기.디버깅, 끼워넣기식 Git 컨트롤, 문법 강조 표시, 스마트 코드 완성, 코드 세그먼트와 코드 재구성 지원

Javascript 실행 시

사용자 인터페이스 구축에 사용되는javascript 라이브러리

React Router-React

의 성명 루트

Redux는 JavaScript 응용 프로그램의 예측 가능한 상태 컨테이너입니다.

약속, 비동기 함수 및 조건이 낙관적으로 업데이트되는 Redux 중간부품 Redux

Redux용 Thunk 중간부품

Redux-Promise-Middleware-javascript 전송 프로그램

모듈 번들 Redux-Thunk

css 원 언어

Bootstrap은 HTML, CSS 및 JS

을 개발하기 위한 오픈 소스 키트입니다.

바베타 입문

Webpack을 찾습니다.
이 설명들은 개발 및 테스트 목적으로 프로젝트 복사본을 제공하고 로컬 기계에서 실행됩니다.

SCSS 선결 조건

시스템에 다음 소프트웨어를 설치해야 합니다.

노드 8.x

Npm 3.x

터미널에 다음 명령을 입력하여 노드와 npm 버전을 검증합니다

  node -v
  npm -v

안내4 설치

다음 절차에 따라 개발 환경을 운행한다.

GitHub 클론 "react redux starter"저장소에서

  git clone https://github.com/drminnaar/react-redux-starter.git

또는 SSH 사용

  git clone [email protected]:drminnaar/react-redux-starter.git

설치 노드 모듈

   cd react-redux-starter
   npm install

건축하다

react redux starter 프로젝트 애플리케이션 생성

개발
찌르다
npm 실행 구축:dev
npm 실행 구축:prod

응용 프로그램을 구축하고 변경 사항을 관찰하다

개발
찌르다
npm 실행 구축: 개발: 감시
npm 운행 구축: 제품: 관찰

BundleAnalyzer 플러그인을 포함하는 응용 프로그램 구축

개발
찌르다
npm 실행 구축: dev:bundleanalyze
npm 운행 구축: 제품: 묶음 분석
위의 명령을 실행하면 브라우저 창이 열리고 다음 그림과 같은 대화형 그래픽이 표시됩니다.

BundleBuddy 플러그인을 포함하는 응용 프로그램 구축

개발
찌르다
npm 실행 구축: dev:bundlebuddy
npm 실행 구축:prod:bundlebuddy

ESlint 실행

ESLint 를 사용한 Lint 프로젝트

  npm run lint

ESLint 및 autofix를 사용하는 Lint 프로젝트

  npm run lint:fix

달아나다

실행 시작

이것은 "서비스:개발"npm 작업을 실행합니다

npm start

개발 서버 실행

npm run serve:dev

대시보드를 사용하여 Dev 서버 실행

npm run serve:dev:dashboard

위의 명령은 다음 그림과 같이 콘솔에 대시보드 뷰를 표시합니다.

Prod Server 실행

이 명령은 생산 설정으로 프로그램을 구축하고 라이브 서버로 프로그램을 시작합니다

npm run serve:prod

결론

몇 가지 중요한 개념의 출발점을 간단하지만 충분한 세부 사항을 설명하는 것은 항상 어렵다.나는 이 프로젝트가 이 목표를 실현하는 데 도움이 되기를 바란다.이 프로젝트를 Redux, Webpack, React Router를 사용하여 React 응용 프로그램을 구축하는 방법을 배우는 이상적인 출발점으로 삼기 위해 시간의 추이에 따라 업데이트하고 조정할 것입니다.