React.js 14 Web Geliştiricileri için Araçlar ve Kaynaklar

React.js'in popülaritesi olmuştur hızla büyüyor Facebook ilk kez 2013'te kütüphaneyi tekrar yayınladı. beşinci en sık yıldızlı açık kaynaklı proje Github’da, React geliştiricilerinin iş ilanları da artıyor. Tepki bir hafif JavaScript çerçevesi için kullanıcı arayüzü oluşturma - En belirgin örnekler Facebook ve Instagram'dır..

Tepki sunuyor MVC çerçeveleri için alternatif, açılı veya omurga gibi daha basit yapı ve performans optimizasyonuna odaklanma. React, web geliştirme ortamını önümüzdeki yıllarda kesinlikle tanımlayacağından, bu makalede sizlere geliştirici araç seti Tepki geliştirme alemine ayak basmanıza yardımcı olmak için.

Resmi React.js Facebook'tan dokümanlar

Facebook geliştiricilere bir ayrıntılı belgeler üzerinde Reaksiyonun temel kavramları. Dokümanlar yanında, burada harika bir öğretici de bulabilirsiniz Etkileşimli bir Tic Tac Toe oyunu inşa etmek nasıl tepki ile ve bir tartışma forumu React geliştiricileri için. Olarak dokümanlar açık kaynaklıdır, İsterseniz bile düzenleyebilirsiniz.

React.js Github deposu

Reac Github deposunda React'in kaynak kodunu inceleyin ne zaman ihtiyacın olursa. Mevcut gelişme durumundan haberdar olmak istiyorsanız, sorunlar, kilometre taşları, ve son çekme istekleri. Sıkışmışsanız, incelemek için iyi bir fikir olabilir Sorun giderme kılavuzu biraz.

Merhaba Dünya başlangıç ​​kodu

Hızlı bir şekilde Tepki vermeye çalışacaksanız, bununla başlayabilirsiniz. “Selam Dünya” etkileşimli demo Codepen'de. O içerir gerekli tüm varlıklar ve başlangıç ​​kodu yanı sıra. Babil de olduğu gibi kullanabilirsiniz. hem ECMAScript 6 hem de JSX sözdizimi. Sadece bu kalemi çatallayın ve tüm ortamı kendi başınıza kurmadan devam edebilirsiniz..

Başlangıç ​​Kitini Tepki

Başlangıç ​​Kitini Tepki bir izomorfik web uygulaması inşa edilmiş Node.js, Express, GraphQL, React, ve bir avuç web geliştirme aracı, örneğin Webpack, Babel, ve Browsersync. Size sağlar Facebook'un kullandığı ön uç yığını ve içine atlamanızı sağlar tam yığın reaksiyon geliştirme çok fazla uğraşmadan.

ReactCSS

ReactCSS mümkün kılar JavaScript'e satır içi CSS stilleri ekleyin. ReactCSS, React, Redux, React Native (React kullanarak yerel mobil uygulamalar oluşturmak için bir çerçeve), otomatik düzeltme, gezdirme, sözde unsurlar ve medya sorguları için destekle birlikte gelir. Hızlı bir şekilde yapabilirsiniz npm ile kurun.

JSFiddle entegrasyonunu reaksiyona sokun (JSX ile ve olmadan)

Bu bir harika çevrimiçi oyun alanı Eğer React uygulamaya başlayabileceğiniz bir yer istiyorsanız. Onun JSFiddle'da barındırılıyor, ve sahip iki versiyon: JSX'li bir tane ve JSX olmadan biri, hangisi ile daha rahat olursanız olun.

Biçim stili kılavuz üreteci

Hızlı bir şekilde yapabilirsiniz stil rehberi oluşturmak Bu kullanımı kolay olan React projeniz için Biçim stili kılavuz üreteci. Sadece zorundasın küçük bir belge ekle dosyalarınızı ve jeneratör gerisini halleder. Araç ayrıntılı bir benioku dosyası ile birlikte geliyor.

Belle konfigüre edilebilir React bileşenleri

Belle bir Bileşen kütüphanesini tepki göster bu sizi donatan bir dizi React bileşeni projenizde kullanmak isteyebilirsiniz, örneğin “Buton”, “kart”, “topaç”, “geçiş”, “Değerlendirme”, farklı form bileşenleri ve diğerleri. Bileşenleri iş hem mobilde hem de masaüstünde, ve onlar özelleştirilebilir yanı sıra.

Belle tek React bileşen kütüphanesi değil dışarıda, Github’da diğer harika Widget'ları yanıtla veya temel.

Storybook Kullanıcı Arabirimi Geliştirme Ortamı Tepki

Başka birinin bileşen kütüphanesini kullanmak istemiyorsanız, ancak kendin yapmak istiyorum, denemeye değer StoryBook'a Tepki Ver hangisi React bileşenleri için kullanıcı arabirimi geliştirme ortamı. Hikaye kitabı size etkileşimli bileşenler geliştirmek. Bir vardır ayrıntılı belgeler, ve yapabilirsin gelişmeye başlamak içinde Hikaye Kitabı Hub.

Tepki-Önyükleme

Tepki-Önyükleme Popüler olan React ile bütünleşir Önyükleme 3 ön uç çerçevesi. Geliştiricileri Bootstrap bileşenlerini React.js ile temel olarak yeniden oluşturdular. Bu bir sonuçlanır temizleyici kod tabanı daha az tekrarlayan ve daha yüksek performans.

Deponun etkin bir gelişim aşamasında olması nedeniyle, API'lerin gelecekte değişeceğini unutmayın. İçin mevcut gelişme durumu, kontrol et projenin yol haritası.

Chrome için Geliştirici Araçlarına Tepki Ver

Chrome için DevTools'u Tepki Et Chrome Geliştirici Araçları'nın bir uzantısıdır ve bileşen hiyerarşisini inceleyin. Öyleydi Facebook tarafından oluşturuldu geliştirici topluluğuna yeni React uygulamaları oluşturmada yardımcı olma çabasıyla. Basitçe bir Chrome uzantısı olarak ekle Tarayıcınıza Göz atabilirsiniz ait kaynak kodu Github'da.

Firefox için Geliştirici Araçlarına Tepki Ver

Bu Firefox sürümü aynı Facebook tarafından oluşturulan Geliştirici Araçlarına Tepki Ver. Sadece ekle Firefox tarayıcınıza bir eklenti olarak, ve React uygulamanızın hiyerarşi ağacını bir kerede incelemeye başlayın.

Atom için React.js Paketi

Ekleyebilirsin Atom kod düzenleyicinize destek verin Bu Atom React paketi ile. İle geliyor sözdizimi vurgulama, otomatik tamamlama, kod parçacıkları, HTML'den JSX'e dönüştürme, ve React gelişimini büyük ölçüde kolaylaştırabilen diğer bazı yararlı özellikler.

React.js Temelleri - ücretsiz çevrimiçi kurs

Yapabileceğiniz birçok mükemmel ve oldukça ucuz kurslar vardır. Tepki geliştirmeyi öğrenir, ancak bunu kaydedebilirsiniz React.js Temelleri tamamen ücretsiz çevrimiçi kurs. Yapılmış 12 ders, ile başlar Tepki Temelleri, ve bir güzel müfredat tüm önemli şeyleri kapsar.