[CSDN 소프트웨어 엔지니어 능력 인증 학습 특 선] 아주 상세 한 React 입문 실례

36874 단어 react.프런트 엔 드 엔지니어CSDN 소프트웨어 엔지니어 능력 인증학습 능력
CSDN 소프트웨어 엔지니어 능력 인증 (이하 C 시리즈 인증) 은 중국 소프트웨어 개발 자 망 CSDN 이 제정 해 내 놓 은 능력 인증 기준 이다.C 시리즈 인증 은 최근 1 년 동안 의 실제 오프라인 조사 연구, 고찰, 교체, 테스트 를 거 쳤 고 소프트웨어 엔지니어 의 개발 과정 에서 필요 한 각종 기술 기능 을 정리 했다. 기업 의 채용 수요 와 인재 의 지원 통 증 을 결합 시 켜 공개, 투명, 공정 의 원칙 을 바탕 으로 인 재 를 육성 할 때 실제 업무 장면 을 확보 하고 모든 탑승 실 체 를 확보 하 며 모든 과정 에 흔적 이 남 고 파일 을 변경 할 수 없다.
우 리 는 매일 CSDN 역 내 기술 문장 을 정선 하여 여러분 이 IT 기술 을 체계적으로 공부 할 수 있 도록 도 울 것 입 니 다.
React 를 배 우 는 것 은 단번에 이 룰 수 있 는 일이 아니 라 입문 도 그리 간단 하지 않 은 것 같다.하지만 모든 것 은 가치 가 있다.
오늘 여러분 에 게 상세 한 React 의 실례 를 가 져 다 드 리 겠 습 니 다. 실례 는 어렵 지 않 지만 초보 자 에 게 React 의 사고 와 작성 과정 을 충분히 인식 할 수 있 습 니 다.이 실례 의 모든 세부 사항 을 진지 하 게 완성 하면 너 로 하여 금 적지 않 은 이익 을 얻 게 할 것 이다.이제 시작 합 시다!
코드 다운로드
미리 보 기 는 먼저 이 예 가 도대체 무엇 을 했 는 지 설명 한다.본 고 는 한 페이지 의 인원 관리 시스템 의 프런트 응용 을 실현 했다.다음 기능 포함:
  • 인원 기본 정보 목록;
  • 인원 의 입력 및 삭제;
  • 인원 의 상세 한 정 보 를 조회 합 니 다.
  • 인원 정보의 편집;
  • 인원 신분 에 따라 선별 한다.
  • 인원 의 특정한 속성 에 따라 정렬 한다.
  • 사람의 이름, 연령, 신분, 성별 등 키워드 에 따라 인원 검색 을 한다.

    •  
    첫 번 째 단계: UI 컴 포 넌 트 반응 을 구분 하 는 것 은 모듈 식 컴 포 넌 트 에 관 한 것 입 니 다.
    React 는 모듈 화 되 고 구성 요소 화 되 어 있 습 니 다.우리 가 여기 서 첫 번 째 로 해 야 할 일 은 응용 을 각 구성 요소 로 나 누 는 것 이다.나 는 그림 1, 그림 2 를 바탕 으로 우리 가 곧 실현 할 각 구성 요 소 를 그 렸 다.
    각 동 그 라 미 는 구성 요소 의 기능 은 다음 과 같 습 니 다. 이것 은 본 응용 프레임 워 크 입 니 다. 집안일 에서 반드시 보 셔 야 합 니 다. 그 중에서 기울 임 글 자 는 각 구성 요소 의 이름 입 니 다.
    ManageSystem 그림 3 의 가장 바깥쪽 에 있 는 빨간색 사각형 입 니 다. 이것 은 관리 모듈 의 가장 바깥쪽 용기 로 전체 응용 을 수용 합 니 다.Staff Header 그림 3 최상 위 파란색 사각형 입 니 다. 이 모듈 은 사용자 가 조작 하 는 입력 을 받 습 니 다. 키워드 검색 입력, 선별 조건 과 정렬 방식 을 포함 합 니 다.Staff ItemPanel 그림 3 중간 파란색 사각형 입 니 다. 이 모듈 은 사용자 작업 (키워드 검색, 선별, 정렬) 결 과 를 기반 으로 하 는 모든 항목 을 보 여 주 는 데 사 용 됩 니 다.Staff Footer 그림 3 의 맨 아래 파란색 사각형 입 니 다. 이 모듈 은 새로운 인원 의 추가 에 사 용 됩 니 다.Staff Item 그림 3 내부 의 빨간색 사각형 입 니 다. 이 모듈 은 한 사람의 기본 정 보 를 보 여 주 는 데 사 용 됩 니 다. 삭제 와 상세 한 조작 단 추 를 포함 합 니 다.Staff Detail 그림 4 의 빨간색 사각형 은 Staff Item 의 '자세 한 정보' 를 클릭 할 때마다 이 항목 의 상세 한 정 보 를 표시 합 니 다.이 모듈 은 인원 의 상세 한 정 보 를 보 여 주 는 데 사용 되 며 인원 정보 편집 기능 도 갖 추고 있다.프레임 구 조 를 더욱 명확 하 게 보 여주 기 위해:
    ManageSystem

    StaffHeader

    StaffItemPanel

        StaffItem
        StaffItem
        StaffItem...

    StaffFooter

    StaffDetail(             )

    두 번 째 단계: 정적 버 전 을 구축 하 는 React 응용 은 첫 번 째 단계 에서 우 리 는 각 구성 요 소 를 분 단 했 고 각 구성 요소 의 직책 도 설명 했다.다음 에 우 리 는 단계별 로 우리 의 응용 을 완성 합 니 다. 먼저 우 리 는 정적 버 전의 React 를 만 들 고 render UI 구성 요소 에 만 사용 되 지만 어떠한 상호작용 도 포함 하지 않 습 니 다.
    이 절 차 는 그림 1, 그림 2 를 참조 하여 하면 됩 니 다. 대부분의 작업 은 기본적으로 JSX 를 사용 하여 html 코드 를 순서대로 쓰 는 것 입 니 다.이 과정 은 너무 많은 사고 가 필요 없다.모든 구성 요소 에는 하나의 render () 방법 만 포함 되 어 있 습 니 다.
    주의해 야 할 것 은 정적 판 의 응용 입 니 다. 데 이 터 는 부모 구성 요소 가 props 속성 을 통 해 아래로 전달 되 고 state 속성 은 사용 할 수 없습니다. state 는 동적 인 상호작용 만 을 위해 생 긴 다 는 것 을 기억 하 십시오.
    이 응용 구성 요 소 는 상대 적 으로 많 습 니 다. bottom - up 방식 으로 하위 구성 요소 부터 시작 하 는 것 도 좋 습 니 다.
    자, 우리 시작 합 시다.
    Staff Header 는 먼저 Staff Header 를 예 로 들 어 Staff Header. js 파일 을 만 듭 니 다.다음 과 같다.
    
import React from 'react';
export default class StaffHeader extends React.Component{

    render(){
        return (
          
    
              
          
    
              
    
                
                  
    
                    
                    
                        
                        
                    
                    
                        
                        
                    
                  
    
                    
              
    
          
    
        );
    }
}

    이 구성 요 소 는 검색 상자, 인원 선별 드 롭 다운 상자, 배열 방식 드 롭 다운 상 자 를 제공 하 는 데 사 용 됩 니 다.맞 아, 우 리 는 우선 정적 인 React 를 만들어 야 해.보 이 는 모습 참조 그림 3 맨 위 에 있 는 파란색 상자.물론 최종 스타일 을 실현 하기 위해 서 는 css 의 협조 가 필요 합 니 다. css 는 본 고의 관심 사가 아 닙 니 다. 본 응용 css 도 매우 간단 하고 소스 코드 를 직접 볼 수 있 습 니 다.
    Staff Item Staff Item 은 모든 구체 적 인 인원 의 기본 정보 구성 요소 로 인원 의 기본 정 보 를 보 여주 고 사용자 의 삭제 와 자세 한 정 보 를 클릭 하 는 데 사용 된다.새 Staff Item. js (이 구성 요 소 는 Staff ItemPanel 에서 참조):
    
import React from 'react';
export default class StaffItem extends React.Component{

    render(){
        return (
              
                {this.props.item.info.name}
                {this.props.item.info.age}
                {this.props.item.info.id}
                {this.props.item.info.sex}
                
                    삭제
                    상세 한 상황
                
              
        );
    }
}

    Staff ItemPanel 다음은 Staff ItemPanel 입 니 다. 이 구성 요 소 는 부모 구성 요소 가 들 어 오 는 각 인원 항목 을 보 여 주 는 데 만 사 용 됩 니 다. Staff ItemPanel. js 파일 을 새로 만 듭 니 다.
    
import React from 'react';
import StaffItem from './StaffItem.js';
export default class StaffItemPanel extends React.Component{

    render(){
        let items = [];

        if(this.props.items.length == 0) {
            items.push(    );
        }else {
            this.props.items.forEach(item => {
                items.push();
            });
        }

        return (
          {items}
    
            
                
      
                  
                  
                  
                  
            
    
            
          
    
        );
    }
}

    이 구성 요소 의 기능 은 상대 적 으로 간단 하 다.
    
        if(this.props.items.length == 0) {
            items.push(    );
        }else {
            this.props.items.forEach(item => {
                items.push();
            });
        }

    항목 이 없 을 때 해당 하 는 힌트 를 주기 위해 다음 그림 을 보 여 줍 니 다.
    그림 5
    Staff Footer Staff Footer 구성 요소 의 기능 은 새로운 인원 을 추가 하고 Staff Footer. js 파일 을 새로 만 드 는 것 입 니 다.
    
import React from 'react';
export default class StaffFooter extends React.Component{

    render(){
        return (
    http 인터페이스 Spring boot 의 Http 압축 설정 gzip
    5. Java 디자인 모델 --- 위임 모드 (Delegate Pattern)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage