# 170: React'in Amatör Dönmesini İzleyin + Babel + Webpack + CSS Modülleri Projesi - CSS Hileleri

Anonim

Adil uyarı! Bu, bu teknolojilerin nasıl kurulacağına dair hızlı, anlaşılır, uzman odaklı bir özet değildir. Yine de, sonunda, her şeyi başarılı bir şekilde sürdürüyoruz. Bu, bu tür bir işi yapmanın gerçek dünya deneyimini belgelemekle ilgili. Bazı şeyler kolayca çalışır, bazıları çalışmaz. Bazen bu benim hatam. Bazen dokümanlar net değildir. Bazen ayaklarımızın altında değişiklikler oldu. Hepsiyle savaşmalıyız.

Burada küçük bir planımız var. Yapmak istediğimiz şey, aşağıdakileri kullanan yerel bir proje başlatmaktır:

  1. React: Diyelim ki bir SPA inşa ediyoruz ve bir bileşen modeliyle çalışmayı şiddetle arzuluyoruz.
  2. ReactDOM - Web için inşa ediyoruz.
  3. Webpack: Bir geliştirme sunucusu, etkin modül yeniden yükleme ve bağımlılıklarımızı üretime uygun bir şekilde bir araya getirmenin bir yolunu istiyoruz.
  4. Babel: Gelecekte çok fazla JavaScript derlemesine ihtiyacımız olmayabilir, ancak JSX'e ihtiyacımız var ve onu derleyen Babel.
  5. CSS Modülleri: Bileşene özgü izole CSS yazmak istiyoruz ve bu, stillerimizin stil sayfalarında kaldığı yerlerde bunu yapmanın güzel bir yoludur.

Neyse ki, bu videoyu yapmayı planlarken, Linh Nguyen My tarafından yazılan "Webpack 4 kullanarak sıfırdan React uygulaması nasıl oluşturulur" adlı makaleyi buldum. Medium'da 12.5K alkış! Vaov! Buna bir miktar alkış ekledim, çünkü bu süper popüler arkadaş kombinasyonunu gerçekten işe yarayan yaklaşılabilir bir şekilde ele alan tek eğitim gibi görünüyor.

Bu, her şeyin kolay ve sorunsuz gittiği anlamına gelmez! Yol boyunca pek çok küçük sorunla karşılaştım. Bazıları benim şişko parmaklı şeylerim. Bazıları, benim zar zor anladığım komutları çalıştırdığımızda ortaya çıkan gizemli hatalardır. Bazılarının özelliklerle ilgili belgeleri eksik görünüyor. Yine de, sonunda her şeyi hallediyoruz ve çalışan bir projemiz var!