만약에 이전에 ReactJS를 사용한 적이 있다면, 당신은 많은 도구와 자원이 우리를 전방 개발자로서 더욱 쉽게 생활할 수 있다는 것을 알고 있습니다.그러나 모든 사람이 같은 도구를 사용하는 것도 아니고, ReactJS 프로젝트를 추진할 수 있는 위대한 자원을 모두가 알고 있는 것도 아니다.
그래서 저는 리액트 JS 프로젝트에 참여할 때마다 사용하는 최고의 도구와 자원을 여러분과 공유할 수 있도록 이 게시물을 만들기로 했습니다.
🔖이 글을 책갈피에 넣고 개발자 친구와 공유합니다!니가 좋아했으면 좋겠어.
ReactJS에 대한 지식을 더 알고 싶고Javascript 기술을 향상시키고 싶다면 제 ReactJS 온라인 수업here을 보십시오.이전에는 이 방면의 경험이 필요 없었다.현대 ReactJS를 사용하여 실제 세계의 응용 프로그램을 구축하는 방법을 배울 것입니다.

카탈로그

create-react-app

React Developer Tools

styled-components

Storybook

CodeSandbox

The Most Definite React Hooks Cheat Sheet

React Router

Redux

Jest

Enzyme

GraphQL

react 응용 프로그램 만들기

이것은 내가 새 프로젝트를 시작할 때마다 go-to 명령이다.그것은 빠르고 간단하다.구성을 구성할 필요가 없습니다.one command line만 웹 응용 프로그램을 실행할 수 있습니다.

npx create-react-app my-app

사전 구성되고 숨겨져 있기 때문에 설치 또는 구성webpack이나 Babel 같은 도구는 필요하지 않습니다.네가 해야 할 일은 너의 코드에 집중하는 것이다.

React 개발자 도구

React 애플리케이션을 디버깅할 때 목록에서 가장 유명한 툴 중 하나입니다.React DevTools는 Chrome과 Firefox 브라우저의 내장 확장입니다.React 및 React Native에 적용됩니다.
만약 당신이 아직 설치하지 않았다면, 나는 당신이 이렇게 하는 것을 강력히 건의합니다.따라서 React 애플리케이션을 쉽게 개발할 수 있습니다.

스타일 지정 어셈블리

응력 없이 React 구성 요소의 스타일을 설정하려면 이 라이브러리를 사용해야 합니다.많은 다른 방법과 라이브러리로 당신의 응용 프로그램을 설계할 수 있지만 styled-components는 제가 추천하는 방법입니다.왜?
ES6 및 CSS를 사용하여 구성 요소에 React 구성 요소를 쉽게 통합할 수 있습니다.또 인기 있는 도서관으로 문서가 많다.이 훌륭한 라이브러리 때문에, React 구성 요소의 스타일 디자인은 지금까지 이렇게 쉬운 적이 없었다.

이야기책

응용 프로그램 논리와 주위 구성 요소의 방해를 받지 않고 React 구성 요소를 구축할 생각은 없으십니까?
해당되는 경우 Storybook 는 고객이 필요로 하는 솔루션입니다.UI 구성 요소의 놀이터인 사용자 인터페이스 개발 환경입니다.이 도구를 사용하면 독립적으로 구성 요소를 만들고 독립된 개발 환경에서 상호작용으로 구성 요소를 보여줄 수 있습니다.이것은 주 응용 프로그램 밖에서 일하기 때문에 특정한 응용 프로그램의 의존 관계와 수요를 걱정할 필요가 없습니다.
또한 고급 기능을 구현하고 개발 경험을 새로운 수준으로 끌어올릴 수 있는 다양한 기능addons이 포함되어 있습니다.

코드 샌드박스

CodeSandbox는 온라인 코드 편집기로 편안한 브라우저에서 원형을 만들고 웹 응용 프로그램을 구축할 수 있습니다.
React, Angular, Vue, Node 등을 쉽고 빠르게 사용하여 현대 웹 응용 프로그램을 만들기 위한 일련의 템플릿이 포함되어 있습니다.
이 밖에 지역사회에서는 많은 공공 코드 샌드박스 프로젝트와 예시를 공유했다.이것 좀 봐, 좋은 게 많으니까out there.

가장 명확한 답은 메모지입니다.

이거 내가 준 거야.나는 너에게 어떻게 대처해야 하는지를 익히도록 시각적 메모를 썼다.사실 그것은 단지 기본적인 메모지 한 장이 아니다.사실, 나는 모든 React 갈고리에 실제적인 예를 제공하여, 당신이 그것을 어떻게 사용하는지, 어디서 사용하는지 진정으로 이해할 수 있도록 했다.봐봐here, 네 생각을 알려줘.
나 자신에게는 매일 메모지를 사용하고 있다. 특정한 연결을 어떻게 사용하는지에 대한 기억을 새로 고쳐야 할 때.나는 네가 언제 어디서나 그것을 가질 수 있도록 download the PDF version를 강력히 건의한다.

반응 라우터

단일 페이지 애플리케이션(SPA)에서는 동일한 HTML 페이지를 사용하여 내비게이션에 따라 다르게 렌더링합니다.React에는 내장된 공유기가 없지만 react-router 라이브러리를 통해 쉽게 공유할 수 있습니다.
React Router는 URL에 사용된 라우팅에 따라 표시할 특정 구성 요소를 조건부로 렌더링합니다.따라서 React 응용 프로그램에서 쉽게 탐색하려면 기존의 앵커 탭을 사용하지 말고 React Router를 프로젝트에 추가하십시오.
이것은 모든 React 단일 페이지 응용 프로그램의 필수 라이브러리입니다.

뇌두

ReactJS 애플리케이션에서는 여러 가지 방법으로 상태를 처리합니다.그러나, 복잡한 상태 논리를 사용하는 대형 프로그램에서 작업을 할 때, Redux 라이브러리를 사용하여React를 하는 것을 강력히 권장합니다.
Redux는 React의 어셈블리 모델과 함께 사용할 수 있도록 설계된 상태 컨테이너입니다.Redux에서 구성 요소를 추출하는 데 필요한 값을 정의한 다음 구성 요소가 도구로 받아들일 수 있습니다.
그것은 응용 프로그램의 상태와 논리를 집중하는 것을 쉽게 한다.

농담하다

Jest는 테스트 프레임워크로 React와 잘 어울려 사용할 수 있다.실제로 create-react-app 명령을 사용하여 React 프로그램을 만들 때도 포함됩니다.
Jest는 구성 없이 즉시 사용할 수 있습니다.또한 테스트가 쉬워지도록 기능이 풍부한 API가 있습니다.그것은 보통 테스트 실행 프로그램으로 사용되며, 테스트 용례에서 단언하는 데도 사용된다.

효소

Enzyme Jest에서 구성 요소 렌더링, DOM 액세스 및 DOM 기반 단언에 사용할 수 있습니다.효소는 농담과 완벽하게 결합한다.유닛 테스트와 통합 테스트를 모두 포함할 수 있으며 Jest는 주로 스냅샷 테스트에 사용됩니다.
Jest 외에도 React 구성 요소를 쉽게 테스트할 수 있습니다.이것은 Airbnb의 테스트 라이브러리입니다. 다음 React 프로젝트에 추가하는 것을 매우 고려해야 합니다.

GraphQL

모든 프런트엔드 애플리케이션에서는 API 호출을 통해 외부 리소스로부터 데이터를 가져와야 합니다.GraphQL 이렇게 하는 거예요.이것은 API에 쉽게 요청할 수 있는 쿼리 언어입니다.API 설계의 예로 REST를 대체하고 서버 데이터와 기능을 공개하는 새로운 표준이 되고 있습니다.
GraphQL 쿼리를 작성하면 API에서 필요한 데이터만 요청할 수 있습니다.그것은 코드를 더욱 쉽게 유지하고 응용 프로그램 개발을 가속화시킬 수 있다.
또한 특히 GraphQL의 흥미로운 특징은 한 요청에서 여러 자원에서 데이터를 얻을 수 있다는 것이다.
따라서 REST를 사용하여 API에서 데이터를 가져오고 있다면 GraphQL을 보십시오.

결론

만약 네가 이 글을 좋아한다면, 그것에 책갈피를 붙이고, 너의 친구와 나누는 것을 잊지 마라.질문이 있으시면 언제든지 아래에 의견을 달아 주십시오.