홈페이지 » 툴킷 » React.js 웹 개발자를위한 14 가지 도구 및 리소스

    React.js 웹 개발자를위한 14 가지 도구 및 리소스

    그만큼 React.js의 인기 있었다 빠르게 성장하는 Facebook이 2013 년에 처음으로 도서관을 출시 한 이래로 다섯 번째로 자주 출연 한 오픈 소스 프로젝트 Github, React 개발자를위한 구인 광고 또한 대폭 증가하고 있습니다. 반응은 간단한 자바 스크립트 프레임 워크 ...에 대한 사용자 인터페이스 구축 - 가장 유명한 예로는 Facebook과 Instagram이 있습니다..

    React는 MVC 프레임 워크를위한 대안, Angular 또는 Backbone과 같은 보다 직접적인 구조성능 최적화에 초점. React가 향후 웹 개발 환경을 분명히 정의 할 것이므로이 기사에서 우리는 개발자 툴킷 당신이 React 개발의 영역에 발을 들여 놓는 것을 돕기 위해.

    Facebook의 공식 React.js 문서

    Facebook은 개발자에게 자세한 문서 ~에 반응의 주요 개념들. 문서 외에도 여기에 대한 훌륭한 자습서가 있습니다. 대화 형 tic-tac-toe 게임을 만드는 법 반응과 토론 포럼 React 개발자에게. 마찬가지로 docs는 오픈 소스입니다., 원하는 경우 편집 할 수도 있습니다..

    React.js Github 레포

    React Github 레포에서는 React의 소스 코드를 확인하십시오. 필요할 때마다. 현재 개발 상태에 대한 정보를 얻고 자한다면 문제, 그만큼 이정표, 그리고 최신 풀 요청. 당신이 꼼짝 못하게된다면, 그것도 좋은 생각이 될 수 있습니다. 문제 해결 가이드 약간.

    Hello World 시동 코드

    당신이 빨리 반응하려고한다면, 당신은 이것을 시작할 수 있습니다. “안녕하세요 세계” 대화 형 데모 Codepen에. 그것은 포함한다 필요한 모든 자산 그리고 시동기 코드 게다가. 바벨 (Babel)도 마찬가지입니다. ECMAScript 6과 JSX 구문 모두. 이 펜을 사용하면 자신 만의 환경을 설정하지 않고도 작업을 진행할 수 있습니다..

    반응 스타터 키트

    그만큼 반응 스타터 키트 이다 동형 웹 앱 상용구 ~의 내장 Node.js, Express, GraphQL, React, 몇 가지 웹 개발 도구 (예 : 웹 팩, 바벨, 과 브라우저 동기화. 그것은 당신에게 페이스 북이 사용하는 동일한 프론트 엔드 스택 당신이 풀 스택 (full-stack) 너무 많은 번거 로움없이.

    ReactCSS

    ReactCSS 가능하다 자바 스크립트에서 인라인 CSS 스타일 추가. ReactCSS는 React, Redux, React Native (React를 사용하여 기본 모바일 응용 프로그램을 제작하기위한 프레임 워크), 자동 접두사, 마우스 오버, 의사 요소 및 미디어 쿼리를 지원합니다. 신속하게 npm으로 설치.

    JSFiddle 통합에 대한 반응 (JSX 사용 여부 포함)

    이것은 위대하다. 온라인 운동장 당신이 React를 시작할 수있는 곳을 원한다면. 그 JSFiddle에서 호스팅, ~하고있다. 두 가지 버전: JSX와 하나JSX가없는 제품, 어느 쪽이든 편한 편을 선택하십시오..

    반응 스타일 가이드 생성기

    신속하게 스타일 가이드 생성 이 사용하기 쉬운 귀하의 React 프로젝트 반응 스타일 가이드 생성기. 너는 오직해야만한다. 문서를 조금 추가하십시오. 파일에 저장하면 발전기가 나머지를 처리합니다. 이 도구는 자세한 readme 파일과 함께 제공됩니다..

    벨 구성 가능 원자로 구성 요소

    미인 ~이다. 구성 요소 라이브러리 반응 너에게 어울리는 일련의 반응 성분 프로젝트에서 다음과 같이 사용할 수 있습니다. “단추”, “카드”, “스피너”, “비녀장”, “평가”, 다른 양식 구성 요소 등이 있습니다. 구성 요소가 작동 함 모바일과 데스크톱 모두에서, 그리고 그들은 맞춤 설정 가능한 게다가.

    유일한 React 구성 요소 라이브러리가 아닙니다. 거기 밖으로, Github에 다른 훌륭한 것들을 찾을 수 있습니다. 반응 위젯 또는 원소 같은.

    React Storybook UI 개발 환경

    다른 사람의 구성 요소 라이브러리를 사용하고 싶지는 않지만 나만의 것을 만들고 싶다., 시도 할 가치가있다. React StoryBook 어느 것이 React 구성 요소를위한 UI 개발 환경. Storybook을 사용하면 대화 형으로 구성 요소 개발. 그것은 정교한 문서, 너는 할 수있다. 개발을 시작하십시오. ~ 안에 스토리 북 허브.

    반응 부트 스트랩

    반응 부트 스트랩 대중과 반응을 통합한다. 부트 스트랩 3 프론트 엔드 프레임 워크. 개발자는 기본적으로 React.js로 부트 스트랩 구성 요소를 다시 작성합니다. 이 결과는 더 깨끗한 코드 기반 적은 반복으로 더 높은 성능.

    저장소가 활발히 개발되고 있으므로 향후 API가 변경됩니다. 를 위해 현재의 개발 상태, 체크 아웃 프로젝트의 로드맵.

    Chrome 용 개발자 도구 대응

    Chrome 용 DevTools 대응 Chrome 개발자 도구의 확장 프로그램이며 구성 요소 계층 구조 검사. 그것은 페이스 북에서 만든 개발자 커뮤니티가 새로운 React 앱을 구축하는 데 도움을주기 위해 노력했습니다. 당신은 간단하게 Chrome 확장 프로그램으로 추가 귀하의 브라우저에. 당신은 소속 소스 코드 Github에서도.

    Firefox 용 개발자 도구 대응

    이것이 Firefox 버전 동일한의 페이스 북에서 만든 개발자 도구 개입. 그냥 추가하십시오. Firefox 브라우저에 추가 기능으로, React 앱의 계층 구조 트리를 한 번에 검사하기 시작합니다..

    Atom 용 React.js 패키지

    추가 할 수 있습니다. Atom 코드 편집기에 대한 지원 지원 이 Atom React 패키지. 함께 제공됩니다. 구문 강조, 자동 완성, 코드 스 니펫, HTML에서 JSX 로의 변환, 그리고 다른 어떤 유용한 기능들로 인해서.

    React.js Fundamentals - 무료 온라인 과정

    많은 우수하고 저렴한 코스가 있습니다. 반응 개발을 배우십시오., 그러나 당신은 이것을 등록 할 수 있습니다. React.js 기초 온라인 과정은 완전 무료입니다. 그것들은 다음으로 구성되어있다. 12 강의, 처음부터 반응의 기본, 그리고 멋진 커리큘럼 중요한 모든 것을 다루는.