React+Redux 웹 추서 신기

인용문
10월에 했던 React Native 프로젝트가 Redux 등 라이브러리에 사용되지 않았기 때문에 한동안 React를 깊이 있게 공부하고 싶었는데 데모 연습 부하가 되고 싶었다. 그때는 사실 어떤 장르를 해야 할지 생각도 못했고 애니메이션, 소설 읽기, 자원을 모으는 기원 프로젝트도 봤다.마침 소스를 배우는 안드로이드 소설 리더인 임독, 배우면서 하기 시작했기 때문에 완성된 기능은 아래에 열거되어 있다.프로젝트 주소는 여기에 있습니다. 좋은 의견이 있으면 issue나pr을 환영합니다.
효과도
image
목표 기능

[x] 차트--완성

[x] 책 상세 정보 - 완성

[x]독서--완성

[x] 책갈피 추천--완성

[x] 서적 검색 - 완성

[x] 베스트 북 - 완성

[x]분류서적--완성

[x]주제서 목록 - 완성

[x] 책갈피 상세 정보 - 완료

[x] 홈 페이지 - 완료

디렉토리 구조

.
├─actions                              #redux action,    
├─components                           #    
│  └─common                            #    
│      ├─component-module              #     
│      ├─images                        #    
│      │  └─icon
│      └─style                          #    
├─modules                               #    
│  ├─api                                #  api   
│  └─constants                          #     
├─reducers                              #redux  reducers，  action      
├─router                                #      
├─store                                 #redux  store,  reducers
└─template                              #  html  
.

프로젝트의 초기 구조와 설명이 위와 같이 나열되었다.
다음은 디렉터리 구조에 대해 다음과 같은 설명을 한다

프로젝트의 최초는react-pxq를 참고하여 초기화한 것입니다.

중간부품 로그 중간부품-redux-logger, 비동기 API 호출-redux-thunk 등;

component-module와components가 저장한 것은react 구성 요소이다. 차이점은 용기 구성 요소는components에 놓고, 모듈 구성 요소(예를 들어 왼쪽 메뉴 구성 요소, 책 목록 구성 요소 등)는component-module에 넣는다.

페이지 상태 등 공공 부분은 독립적으로 통일적으로 관리하는 것이 가장 좋다.

전역 설정은 pathRewrite 필드를 사용하고 웹팩-dev-server 버전

을 주의해야 합니다.
준비 작업

API 정리

학습 Redux(비계 구축)

API 데이터

데이터 출처는 주로 두 가지이다. 하나는 기원된 안드로이드 프로젝트와 RN 버전의 데이터이고, 다른 하나는 추서신기 h5 이동단

이다.

데이터 전역: 인터넷에서 많은 방법을 찾았는데 편리함을 고려하여 역방향 에이전트로 처리

Redux 배우기

처음에 저는 일주일 넘게 Github에서 0부터 ReactJS(ReactJS101)를 배웠습니다. 기본적으로 매일 1-2장을 보고 즐겁게 놀았습니다. 간단명료하고 알기 쉬워서 초보자가 읽기에 적합합니다.

앞의 8장: 주로 다음에 사용될 기초 개념을 익히는 것이다. 물론 매 장마다 이론을 설명하고 뒤에 예가 있어 스스로 실천을 할 수 있고 앞의 개념에 대한 이해를 깊이 있게 한다.
뒤의 9, 10 두 장은 위에서 배운 내용을 활용하여 간단한 프로젝트를 만들기 시작한다.

이어서 5-6일 동안 인터넷 소스 오픈 프로젝트의 비계인 하나의react+redux의 완전한 프로젝트와 개인 총결산을 배웠는데 기본적으로 본다

사용한 라이브러리, 압축된 스크립트, 레드ux 코드를 참고하십시오.

마지막으로 완일봉 선생님이 쓴 레드ux 입문 강좌

를 3일 정도 봤어요.
이 부분의 내용은 다음에 프로젝트의 전체 구조를 구축할 때 본 것으로 Reducers, action,store의 내용을 비교적 깊이 있게 이해하고 이해한다.
기술 창고

많은 핵심 라이브러리를 열거했지만 자신도 숙련된 운용에 대해 말할 수 없기 때문에 겪은 문제와 후기에 개선된 것들을 열거했다.

Webpack(3.10.0)

본 프로젝트는 주로 제3자의 비계를 사용하고 역방향 에이전트 부분을 배웠습니다. 물론 자신도 웹 패키지를 구축했고 나중에 웹 패키지를 업그레이드할 것입니다.

에서 역방향 프록시 부분을 제시한다. 웹팩-dev-server를 사용하여 역방향 프록시를 설정할 때 pathRewrite를 속성에 사용할 때 웹팩-dev-server 버전에 주의해야 한다. 이 속성은 1.15.0에 있지 않으면 작용하지 않는다.시간을 낭비하지 않도록 인터넷에서 같은 문제를 찾았는데 이런 해석이 없었다는 것을 설명한다.

Webpack을 3.10 버전으로 업그레이드하고 다른 오래된 가방, 예를 들어 file-loader, css-loader 등을 업데이트하는 데 문제가 발생한 것은 다음 표에 있습니다.

Webpack1.x Webpack3.10
문제.
1.x
3.10
비고
참고 자료webpack 2 cannot resolve empty extensions
extensions 그룹에 빈 문자나 문자열이 나타날 수 없습니다resolve: {extensions: ['','.css']} resolve: {extensions: ['.css']}
참조 1Error: Chunk.entry was removed. Use hasRuntime() "extract-text-webpack-plugin": "^1.10.0", "extract-text-webpack-plugin": "^2.1.2",
버전 문제
참조 1Error: Breaking change: extract now only takes a single argument. Either an options object *or* the loader(s). loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer']), ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
새 버전에서는 하나의 매개 변수만 지원합니다
npm run dev 명령 실행 결과 오류 프롬프트
API Schema를 찾을 수 없습니다.modulesDirectories modules
속성 이름 변경
npm run dist 명령 실행 결과 오류 프롬프트
OccurenceOrderPlugin을 찾을 수 없습니다.new webpack.optimize.OccurenceOrderPlugin(),newwebpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin(),new webpack.optimize.UglifyJsPlugin() new webpack.HotModuleReplacementPlugin(),new webpack.optimize.UglifyJsPlugin()
OccurenceOrderPlugin 및 NoErrorsplugin 제거
참조 1
Redux

간단하게 말하자면 그는 단방향 데이터 흐름을 관리하는 구조로 업무의 복잡도에 따라 그 중의 과립도를 제어할 수 있다.처음에 공부할 때 오히려 프로젝트를 복잡하게 만들었고 원리를 보면 알 수도 없고 나중에 앞에서 본 내용을 끊임없이 실천하고 이해하며 결국은 이론과 실천을 결합시켜야 한다.모델은 다음과 같다. 간단한 데이터 흐름은View->Action->(Middleware)->Reducer[사진 업로드 실패...(image-e3819-1514295005420)]

React-router(2.x)
react-router(2.x)와react-router(4.x)의 것은 여전히 다르다. 물론 주로 쓰기 방법상 4.0으로 업데이트되지 않았다.
또한 패키지를 발표할 때nginx 등 응용 서버의 위탁 관리를 사용할 때 인덱스를 사용해야 합니다.html 파일, 그렇지 않으면 루트가 차단됩니다.
Antd(2.13)

antd는 (개미금복체험기술부) 대량의 프로젝트 실천과 정리를 거쳐 침전된 중국 디자인 언어인 Ant Design이다. 사용자는 개미금복, 알리바바, 입소문, 미단, 디디 등 일련의 유명 회사를 포함한다. 그 중에서 이동단, 웹단, 프로

를 포함한다.

오류가 발생하면 Antd의 issues를 뒤적일 수 있어 기본적으로 해결할 수 있다.

Issues의 말은 일정한 규범에 부합해야 하기 때문에 처음에는 번거로움을 느꼈지만 나중에 질문의 지혜를 보고 이 부분의 필요성을 문득 깨달았다.

확장된 컨텐츠
기능 확장

토론구 데이터 통계 분석은 주로 한동안 핫이슈 내용을 알고 싶어 한다.

테스트 및 최적화

현재 프로젝트 코드는 단원 테스트를 진행하지 않았고 후속 학습 통합 JEST 테스트

일부 페이지의 구성 요소 최적화 및 일부 버그