Webpack+react 제품군 버킷으로 그레인 백엔드 프로젝트 개발

빌드 도구 소개

웹팩 소개

Webpack은 작은 테스트입니다.

웹팩 구성 파일 사용

less-loader는 더 적게 구문 분석합니다.

eslint-loader 구문 확인

js 구문 변환

요청 시 새로운 js 구문이 도입되었습니다.

url-loader는 이미지를 스타일로 구문 분석합니다.

HTML 파일 팩

HTML로 이미지 리소스 패키징

기타 리소스 패키징

자동으로 컴파일, 패키징 및 실행

HMR(핫 금형 교체)

devtool 매핑 기술

프로덕션 환경 준비

패키지된 파일 디렉터리 지우기

CSS를 별도의 파일로 추출

CSS 파일의 호환성 처리

CSS를 압축하다

HTML을 압축하다

vscode 컴파일러 사용

반응 소개

안녕하세요 반응

가상 DOM을 생성하는 두 가지 방법

몇 가지 작은 질문

jsx 구문 규칙

jsx의 작은 연습

구성 요소를 만드는 두 가지 방법

검토

구성 요소의 세 가지 주요 속성 상태

상태의 약어

props, 컴포넌트의 세 가지 주요 속성

props를 통해 태그 속성을 전달하는 단순화된 작성 방법

구성 요소의 세 가지 주요 속성에 대한 참조 및 이벤트 처리

참조 새 구문

검토

Todolist는 정적 구성요소를 구현합니다.

할 일 목록은 데이터를 동적으로 표시합니다.

할 일 목록 완료

제어되는 구성 요소와 제어되지 않는 구성 요소

구성요소 수명주기

검토

forceUpdate 및 willRecriveProps 정보

getDerivedStateFromProps

getSnapshotBeforeUpdate

diff 알고리즘 확인

키의 기능

반응 스캐폴딩 다운로드

반응 스캐폴딩에 대한 간단한 설명

반응 스캐폴딩에 대한 자세한 설명

간단한 구성요소 조합

댓글 사례 - 정적 페이지

사용자 의견 사례 - 동적 초기화

사용자 댓글 사례 - 댓글 추가

사용자 리뷰 사례 - 완전한 상호작용

사용자 리뷰 - 제2판

액시스 운동

간단한 가져오기 연습

Github 검색 사례 - 정적 페이지

github 검색 사례 - 요청 보내기

github 검색 사례 - 완전한 상호작용

검토

github 검색 사례—pubsub 버전

반응 구성 요소 간의 통신 방법

라우팅 소개

기본 라우팅 사용법

기본 라우팅에 대한 자세한 설명

2차 라우팅 구축(1)

검토

2차 라우팅 구축(2)

매개변수를 전달하는 라우팅 구성요소

프로그래밍 방식 경로 탐색

antd의 간단한 사용

검토

폴더 소개 - 프로젝트 효과 시연

자식 검토

프로젝트 기술 선정

create-react-app을 사용하여 애플리케이션 구축

antd 스타일의 주문형 도입 구성

antd 맞춤 테마

로그인 및 관리 경로 구축

로그인 정적 페이지

antd의 구성 요소 정적에서

사용자 이름의 선언적 검증

비밀번호 맞춤 확인

로그인 양식 통합 검증

고차 구성 요소 및 고차 기능

검토

Redux 브랜치 준비

Redux 상호작용 모델 소개

Redux 회로도에 대한 자세한 설명

사례 반응 버전

Case-redux-no-action 버전

Case-redux 최종 버전

반응-리덕스 소개

Case-react-redux (첫 번째 버전)

Case-react-redux (두 번째 판)

반응-리덕스 비동기 프로그래밍

redux 디버깅 도구 사용

React-Redux를 위한 모듈식 코딩

검토

Redux 개발 환경 구축

API 인터페이스 및 테스트

도메인 간 문제를 해결하기 위해 프록시 구성

게시 요청 json 형식 인코딩 매개변수

Axios 요청 인터셉터 사용

Axios 응답 인터셉터 사용

프로젝트 기본 경로 구성

진행률 표시줄 효과 요청

서버가 반환한 사용자 정보를 Redux 관리를 위해 처리

자동 로그인

로그아웃 기능

검토

데코레이터 구문

토큰 검증

관리자 전체 레이아웃 구축

관리 하위 라우팅 구축

헤더 정적 레이아웃

로그인 상태 만료 시 자동 점프

헤드 인터랙션 - 전체 화면 전환

머리 상호작용 - 로그아웃

헤드타임 표시

날씨 정보 얻기

날씨 정보 표시

withRouter 사용

왼쪽 탐색 정적 레이아웃

왼쪽 탐색 정적 - 전환 효과

메뉴를 동적으로 생성

메뉴는 기본적으로 선택되어 자동으로 열립니다.

헤더 구성 요소에 제목 표시

redux를 사용하여 제목 관리

상품 분류 정적 페이지(1)

상품 분류 정적 페이지(2)

동적으로 데이터 초기화

팝업 창 추가 및 수정

새 제품 추가

제품 카테고리 업데이트

탐색 기본 선택 문제 해결

상품관리 정적페이지

초기화 목록 표시 + 페이징

작업 항목 상태

검색 요청 보내기

검색 기능 구현

제품 세부정보 구성 및 라우팅 변경

라벨 선택 및 제목 문제 해결

제품 세부정보-정적 페이지

세부정보 표시

서버에서 세부정보 가져오기

제품 세부정보 표시-redux

제품 세부정보 표시-백엔드 요청

새 제품 정적 페이지 추가

일부 제품 데이터 수집

벽걸이형 사진

업로드 구성요소를 사용하여 파일 업로드

응답 업로드 및 삭제

완전한 업로드 기능

리치 텍스트 편집기

완전한 새 제품

제품 수정

역할 관리 소개

새 역할 추가

트리 메뉴

인증 기능 완료

사용자 목록 가져오기

신규 사용자

트래버스 메뉴 - 배열의 일부 방법

전자 차트 사용