기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

한 친구가 졸업하고 인턴십을 시작했다고 말했습니다.하지만 회사에서는 아직까지뷰, 리더는 잠시 후에 사용을 허용하겠다고 말했습니다.반응하다프로젝트를 하기 전에 먼저 스스로 배워보세요.

그나저나 나도 블로그를 쓰고 있으니 도움이 필요한 사람들에게 도움이 되기를 바랍니다.

목차

1개 프로젝트 설치

1.1 디렉토리를 선택하고 터미널을 시작하십시오

1.2 create-react-app 명령 설치

1.3 프로젝트 생성

1.4 디렉터리 파일 보기

1.5 프로젝트 시작

2 반드시 사용될 타사 라이브러리

2.1 js-툴-빅-박스

2.1.1 시간 및 날짜 클래스

2.1.2 웹 스토어 클래스

2.1.3 이벤트 클래스

2.1.4 숫자 클래스

2.1.5 문자열 클래스

2.1.6 정기 검증 클래스

2.1.7 아약스 클래스

2.1.8 데이터 데이터 클래스

2.1.9 브라우저 브라우저 클래스

2.2 이하 또는 Sass 전처리기

2.3 Axios 요청 라이브러리

2.4 UI 라이브러리

---

1개 프로젝트 설치

1.1 디렉토리를 선택하고 터미널을 시작하십시오

이 React 프로젝트를 연습하기 위한 디렉터리로 컴퓨터에서 폴더를 찾은 다음 폴더의 URL에 "cmd"를 입력하면 터미널이 팝업되고 대상 디렉터리를 지정할 수도 있습니다.

 

여기에 "cmd"를 입력하고 Enter를 누르면 터미널 팝업 창이 나타납니다.

1.2 create-react-app 명령 설치

다음 명령을 실행합니다. -g는 전역적으로 설치한다는 의미입니다.

npm 설치 -g create-react-app

1.3 프로젝트 생성

예를 들어, js-tool-big-box-react 프로젝트를 실행한 후 다음 명령을 실행할 수 있습니다.

리액트앱 만들기 js-tool-big-box-react

그러면 터미널이 설치됩니다.설치가 조금 느릴 수 있습니다., 설치가 완료된 후 아래 그림과 같이 인내심을 갖고 기다리십시오.

1.4 디렉터리 파일 보기

• 공용 디렉토리에는 익숙한 HTML 파일과 일부 정적 필수 파일이 저장됩니다.
• src 디렉터리는 프로젝트 개발에 중요한 디렉터리입니다.
• 더 아래로 내려가면 index.js가 항목 파일입니다.
• App.js에서 일부 변경을 시도한 다음 웹 페이지 효과를 확인할 수 있습니다.

1.5 프로젝트 시작

위 그림에서는 VSCode 편집기를 사용하여 React 프로젝트를 엽니다. 이때 콘솔에 다음 명령을 입력합니다.

npm 시작

그러면 프로젝트가 브라우저 활성화를 적극적으로 도와줄 것입니다.http://로컬호스트:3000/주소를 입력하면 회전하는 React 아이콘이 보이고 프로젝트가 설치됩니다.

 

2 반드시 사용될 타사 라이브러리

프로젝트 설치가 완료되면 프로젝트 개발이 시작됩니다. 속담처럼, 노동자가 일을 잘하려면 먼저 에너지를 갈고닦아야 합니다.프로젝트 개발에 앞서, 프론트엔드 프로젝트 개발에 반드시 사용될 몇 가지 사항에 대해 이야기해 보겠습니다.타사 라이브러리 .이러한 타사 라이브러리를 사용하면 개발에 도움이 될 수 있습니다.더 효율적。

2.1 js-툴-빅-박스

먼저 js-tool-big-box의 학습 주소로 오십시오. 여기를 클릭하십시오:js-tool-big-box 도구 라이브러리 학습 주소

js-tool-big-box는 프론트엔드 개발 프로젝트에 거의 필수로 사용되는 npm 라이브러리입니다. 풍부한 기능을 갖추고 있고 사용하기 쉬워서 프론트엔드 개발을 매우 효율적으로 만들어줍니다. 현재 기능은 다음을 포함하지만 이에 국한되지는 않습니다.

2.1.1 시간 및 날짜 클래스

1. 시간 및 날짜 변환;
2. 보다 유연한 시간 형식;
3. 보다 개인화된 시간 획득;
4. 특정 시점부터 현재까지의 기간(자세한 반품 정보)
5. 평년인지 윤년인지 확인합니다.
6. 한 달은 며칠입니까?
7. 조디악의 표시;
8. 연중 법정 공휴일;
9. 전 세계 주요 도시의 시간을 확인하세요.

2.1.2 웹 스토어 클래스

1. URL에서 매개변수 값 가져오기
2. 쿠키 설정;
3. 쿠키를 받으세요.
4. 쿠키 삭제
5. localStorage를 설정하십시오.
6. localStorage 가져오기

2.1.3 이벤트 클래스

1. 흔들림 방지
2. 조절판

2.1.4 숫자 클래스

1. 수천 개의 쉼표가 구분됩니다.
2. 0보다 큰지 확인합니다.
3. 정수가 0보다 큰지 확인합니다.
4. 지정된 범위 내에서 난수를 생성합니다.
5. 지정된 자릿수로 난수를 생성합니다.
6. 숫자를 중국어 소문자로 변환합니다.
7. 숫자를 중국어 대문자로 변환합니다.

2.1.5 문자열 클래스

1. 문자열 반전;
2. 헝강과 작은 혹
3. 헝강은 큰 혹으로 변한다.
4. 버전 번호 비교;
5. 문자열의 바이트 길이를 가져옵니다.
6. UUID 생성;
7. ID 번호를 기준으로 성별, 나이, 생년월일을 얻습니다.
8. 주요 정보를 숨기려면 문자열 중간에 특수 기호를 추가하세요.
9. 문자열 대문자 및 소문자 변환;

2.1.6 정기 검증 클래스

1. 이메일 형식 확인;
2. 휴대폰 번호 형식 확인
3. URL 형식 확인;
4. ID 번호 형식 확인;
5. IP 주소 형식 확인;
6. 우편번호 형식 확인

7. 유니코드 문자인지 확인합니다.

8. 비밀번호 강도 값을 감지합니다.

2.1.7 아약스 클래스

1. jsonp 요청 보내기;
2. 파일의 순수 기능 버전을 다운로드하십시오.
3. 파일 다운로드, 가져오기 + 다운로드 기능 버전;

2.1.8 데이터 데이터 클래스

1. 배열에서 임의의 수의 값을 가져옵니다.
2. 텍스트를 클립보드에 복사합니다.
3. 어레이 중복 제거;
4. 더 자세한 데이터 유형을 얻으세요.
5. 숫자 배열 정렬(정방향 및 역순)
6. 객체 배열 정렬(정방향 및 역순)

2.1.9 브라우저 브라우저 클래스

1. 현재 브라우저가 모바일인지 확인합니다.
2. 요소가 가시 범위 내에 있는지 확인합니다.

3. 현재 브라우저가 위 또는 아래로 스크롤하는지 확인하고 위쪽과 아래쪽으로부터 현재 거리를 가져옵니다.

4. 전체 화면을 켜고 끕니다.

5. 브라우저 userAgent 및 자세한 정보를 얻으세요.

2.2 이하 또는 Sass 전처리기

CSS를 작성하는 전통적인 방법은 상대적으로 저가형입니다. less 또는 sass와 같은 전처리기를 사용하면 CSS 개발이 더욱 효율적이므로 적극 권장됩니다.

연구 문서(간략한 빠른 시작 | Less.js 중국어 문서 - 간략한 중국어 웹사이트(bootcss.com))

2.3 Axios 요청 라이브러리

일반적으로 프로젝트에는 서버와의 상호 작용이 포함되며 이때 axios를 사용하여 요청을 보낼 수 있습니다.

Axios 학습 문서(axios 중국어 문서 | axios 중국어 웹사이트(axios-js.com))

2.4 UI 라이브러리

React의 경우 C 사이드 개발이라면 상대적으로 가벼운 UI 라이브러리를 직접 작성할 수 있기를 바라지만, B 사이드 개발이라면 Ant Design을 추천합니다.

Ant 디자인 학습 문서(Ant Design - 엔터프라이즈급 UI 디자인 언어 및 React 구성 요소 라이브러리)