First React Projeme Başlarken Yaptığım 5 Hata

Yeni bir dil veya çerçeve almanın nasıl bir şey olduğunu bilirsiniz. Bazen yolunuzu bulmanıza yardımcı olacak harika belgeler vardır. Ancak en iyi belgeler bile kesinlikle her şeyi kapsamaz. Ve yeni bir şey üzerinde çalıştığınızda, yazılı bir çözümü olmayan bir sorun bulmanız kaçınılmazdır.

İlk kez bir React projesi oluşturduğumda benim için böyleydi — ve React, özellikle şimdi beta dokümanlarla birlikte, dikkate değer belgelere sahip çerçevelerden biridir. Ama yine de yolumu bulmakta zorlandım. O projeden bu yana epey zaman geçti ama ondan aldığım dersler hala zihnimde taze. Ve orada pek çok React "nasıl yapılır" öğreticisi olmasına rağmen, keşke onu ilk kullandığımda bilseydim dediğim şeyi paylaşayım dedim.

İşte bu makalenin konusu bu - yaptığım ilk hataların bir listesi. Umarım React'i sizin için çok daha kolay öğrenmenize yardımcı olurlar.

Bir proje başlatmak için create-react-app kullanma

TL;DR Vite veya Parsel Kullanın.

React Uygulaması Oluşturun (CRA), yeni bir React projesi oluşturmanıza yardımcı olan bir araçtır. Çoğu React projesi için en iyi yapılandırma seçeneklerine sahip bir geliştirme ortamı oluşturur. Bu, herhangi bir şeyi kendiniz yapılandırmak için zaman harcamanıza gerek olmadığı anlamına gelir.

Yeni başlayan biri olarak bu, işime başlamak için harika bir yol gibi görünüyordu! Yapılandırma yok! Sadece kodlamaya başlayın!

CRA, bunu başarmak için iki popüler paket kullanır: webpack ve Babel. webpack, projenizdeki JavaScript, CSS ve resimler gibi tüm varlıkları optimize eden bir web paketleyicisidir. Babel, bazı tarayıcılar desteklemese bile daha yeni JavaScript özelliklerini kullanmanıza izin veren bir araçtır.

Her ikisi de iyidir, ancak işi daha iyi yapabilen daha yeni araçlar var, özellikle Hayatları ve Hızlı Web Derleyici (SWC).

Bu yeni ve geliştirilmiş alternatiflerin yapılandırılması webpack ve Babel'den daha hızlı ve daha kolaydır. Bu, uygulama oluşturma-tepki vermede çıkarmadan yapılması zor olan yapılandırmayı ayarlamayı kolaylaştırır.

Yeni bir React projesi kurarken ikisini birden kullanmak için, sahip olduğunuzdan emin olmalısınız. Düğüm sürüm 12 veya üstü kurulu, ardından aşağıdaki komutu çalıştırın.

npm create vite

Projeniz için bir isim seçmeniz istenecektir. Bunu yaptıktan sonra, çerçeveler listesinden React'i seçin. Bundan sonra, birini seçebilirsiniz Javascript + SWC or Typescript + SWC

O zaman dizini değiştirmeniz gerekecek cd projenize girin ve aşağıdaki komutu çalıştırın;

npm i && npm run dev

Bu, siteniz için URL ile bir geliştirme sunucusu çalıştırmalıdır. localhost:5173

Ve bu kadar basit.

kullanma defaultProps varsayılan değerler için

TL;DR Bunun yerine varsayılan işlev parametrelerini kullanın.

Veriler, adı verilen bir şey aracılığıyla React bileşenlerine iletilebilir. props. Bunlar, tıpkı bir HTML öğesindeki öznitelikler gibi bir bileşene eklenir ve argüman olarak iletilen pervane nesnesinden ilgili değerleri alarak bir bileşenin tanımında kullanılabilir.

// App.jsx
export default function App() { return <Card title="Hello" description="world" />
} // Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> );
} export default Card;

için bir varsayılan değer gerekliyse, prop, defaultProp özellik kullanılabilir:

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

Modern JavaScript ile, props nesne ve hepsine işlev bağımsız değişkeninde varsayılan bir değer atayın.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

Bu, ekstra dönüşüme ihtiyaç duymadan modern tarayıcılar tarafından okunabilen kod olarak daha uygundur.

Ne yazık ki, defaultProps JSX (JavaScript XML) kutudan çıkar çıkmaz desteklenmediğinden tarayıcı tarafından okunacak bazı dönüşümler gerektirir. Bu, potansiyel olarak çok fazla bilgisayar kullanan bir uygulamanın performansını etkileyebilir. defaultProps.

Kullanma propTypes

TL;DR TypeScript kullanın.

React'te, propTypes özelliği, bir bileşene destekleri için doğru veri türünün aktarılıp aktarılmadığını kontrol etmek için kullanılabilir. Dizi, sayı, nesne vb. gibi her pervane için kullanılması gereken veri türünü belirlemenize olanak tanırlar. Ayrıca bir pervanenin gerekli olup olmadığını belirtmenize de olanak tanırlar.

Bu şekilde, bir bileşene yanlış veri türü geçirilirse veya gerekli bir destek sağlanmazsa, React bir hata atar.

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

daktilo ile yazılmış yazı bileşenlere aktarılan verilerde bir tür güvenlik düzeyi sağlar. Çok emin, propTypes başladığımda iyi bir fikirdi. Ancak, artık TypeScript, tür güvenliği için başvurulacak çözüm haline geldiğine göre, onu her şeyden çok kullanmanızı şiddetle tavsiye ederim.

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

TypeScript, statik tip denetimi ekleyerek JavaScript'in üzerine inşa edilen bir programlama dilidir. TypeScript, daha fazla potansiyel hatayı yakalayabilen ve geliştirme deneyimini iyileştirebilen daha güçlü bir yazı sistemi sağlar.

Sınıf bileşenlerini kullanma

TL;DR: Bileşenleri işlev olarak yaz

React'teki sınıf bileşenleri, JavaScript sınıfları kullanılarak oluşturulur. Daha nesne yönelimli bir yapıya sahipler ve aynı zamanda bazı ek özelliklere sahipler. this anahtar sözcük ve yaşam döngüsü yöntemleri.

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

Bileşenleri işlevler yerine sınıflarla yazmayı tercih ederim, ancak JavaScript sınıflarını yeni başlayanlar için anlamak daha zordur ve this çok kafa karıştırıcı olabilir. Bunun yerine, bileşenleri işlevler olarak yazmanızı öneririm:

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

İşlev bileşenleri, basitçe JSX döndüren JavaScript işlevleridir. Okumaları çok daha kolaydır ve aşağıdaki gibi ek özelliklere sahip değildirler: this anahtar kelime ve yaşam döngüsü yöntemleri bu da onları sınıf bileşenlerinden daha performanslı kılar.

Fonksiyon bileşenleri ayrıca kanca kullanma avantajına sahiptir. Tepki Kancaları bir sınıf bileşeni yazmadan durum ve diğer React özelliklerini kullanmanıza izin vererek kodunuzu daha okunabilir, bakımı yapılabilir ve yeniden kullanılabilir hale getirir.

React'i gereksiz yere içe aktarma

TL;DR: Kancalara ihtiyacın yoksa bunu yapmana gerek yok.

React 17, 2020'de piyasaya sürüldüğü için, artık bir bileşen oluşturduğunuzda React'i dosyanızın en üstüne içe aktarmanıza gerek yok.

import React from 'react'; // Not needed!
export default function Card() {}

Ancak bunu React 17'den önce yapmak zorundaydık çünkü JSX dönüştürücü (JSX'i normal JavaScript'e dönüştüren şey) adlı bir yöntem kullandı. React.createElement bu yalnızca React'i içe aktarırken çalışır. O zamandan beri, JSX'i dönüştürmeden dönüştürebilen yeni bir transformatör piyasaya sürüldü. createElement yöntemi.

Kancaları kullanmak için yine de React'i içe aktarmanız gerekecek, parçalarıve kitaplıktan ihtiyaç duyabileceğiniz diğer işlevler veya bileşenler:

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

Bunlar benim ilk hatalarımdı!

Belki de bazı daha iyi uygulamalar daha sonra ortaya çıktığı için "hata" çok sert bir kelimedir. Yine de, bir şeyi yapmanın "eski" yolunun projelerde ve diğer eğitimlerde hala aktif olarak kullanıldığı pek çok örnek görüyorum.

Dürüst olmak gerekirse, başlarken muhtemelen beşten fazla hata yaptım. Yeni bir araca her ulaştığınızda, onu etkili bir şekilde kullanmak için bir düğmeyi çevirmekten çok bir öğrenme yolculuğu gibi olacak. Ama yıllar sonra hala yanımda taşıdığım şeyler bunlar!

React'i bir süredir kullanıyorsanız, başlamadan önce keşke bilseydim dediğiniz bazı şeyler nelerdir? Başkalarının aynı mücadelelerden kaçınmasına yardımcı olacak bir koleksiyon elde etmek harika olurdu.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://css-tricks.com/5-mistakes-starting-react/