Modern Bir React Kütüphanesi Başlangıç Paketi: Kapsamlı Bir Rehber
React’i kullanan herkesin bildiği gibi, bu popüler JavaScript kütüphanesi, web uygulamaları oluşturmak için inanılmaz bir esneklik ve güç sunar. Ancak, gelişmiş projeler için, özellikle de kod tekrarını en aza indirmek ve yeniden kullanılabilirliği artırmak istediğinizde, kendi özel React kütüphanelerinizi oluşturmanız gerekir. Bu makale, modern bir React kütüphanesi başlangıç paketi oluşturma sürecinde size adım adım rehberlik edecek kapsamlı bir kılavuz görevi görmektedir.
Başlangıç: Projenizi Kurma
İlk adım, projenizin temelini oluşturacak olan temel yapıları kurmak. Bunun için, paket yöneticisi olarak npm veya yarn’i kullanarak, yeni bir proje klasörü oluşturup, gerekli bağımlılıkları eklemek gerekir. Bu adımda kullanacağımız en temel araçlar şunlardır:
- create-react-app: React uygulamaları oluşturmak için en yaygın kullanılan araçtır. Projenizin temel yapı taşlarını hızlı ve kolay bir şekilde oluşturmanıza yardımcı olur.
- Rollup: React kütüphanenizi dağıtmak için kullanacağımız güçlü bir JavaScript paketi. Rollup, kütüphanenizin dosya boyutunu küçültür ve modüler bir şekilde paketler.
- TypeScript: Kütüphanenizi geliştirme sürecinde kodunuzun daha sağlam ve anlaşılabilir olmasını sağlar.
- Jest: Kütüphaneniz için kapsamlı testler yazmak için kullanacağımız popüler bir test çerçevesi.
Projenizi kurmak için aşağıdaki komutları kullanabilirsiniz:
“`bash
npx create-react-app my-react-library –template typescript
cd my-react-library
npm install rollup rollup-plugin-typescript2 rollup-plugin-commonjs rollup-plugin-node-resolve @types/react @types/react-dom @types/jest jest @babel/core @babel/runtime @babel/preset-env @babel/preset-react @babel/preset-typescript
“`
Bu komutlar, projenizi başlatacak, TypeScript ile çalışacak şekilde ayarlayacak ve gerekli paketleri kuracaktır.
Kütüphane Yapısını Oluşturma
Şimdi, kütüphanenizin temel yapısını oluşturma zamanı geldi. Öncelikle, ‘src’ klasörünü oluşturun ve kütüphanenizdeki temel bileşenleri, yardımcı fonksiyonları ve arayüzleri bu klasörün altına yerleştirin.
Aşağıda, tipik bir React kütüphanesi için temel bir yapı örneği verilmiştir:
“`
src/
|- components/
| |- Button/
| | |- Button.tsx
| | |- Button.styles.ts
| |- Input/
| | |- Input.tsx
| | |- Input.styles.ts
|- utils/
| |- helpers.ts
|- index.ts
“`
Bu yapı, kütüphanenizi düzenli ve ölçeklenebilir tutmanıza yardımcı olacaktır.
Bileşen Geliştirme
Kütüphanenizi oluşturmanın en önemli adımı, temel bileşenlerinizi geliştirmektir. React’in gücünden yararlanarak, yeniden kullanılabilir, özelleştirilebilir ve iyi test edilmiş bileşenler oluşturmanız gerekir.
Örneğin, basit bir Button bileşeni için bir örnek verelim:
“`typescript
import React from ‘react’;
import styled from ‘styled-components’;
interface ButtonProps {
variant?: ‘primary’ | ‘secondary’ | ‘tertiary’;
onClick?: () => void;
children: React.ReactNode;
}
const StyledButton = styled.button`
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
${({ variant }) => {
switch (variant) {
case ‘primary’:
return `
background-color: #007bff;
color: white;
`;
case ‘secondary’:
return `
background-color: #6c757d;
color: white;
`;
case ‘tertiary’:
return `
background-color: #f8f9fa;
color: #343a40;
`;
default:
return `
background-color: #e9ecef;
color: #495057;
`;
}
}}
`;
const Button: React.FC = ({ variant, onClick, children }) => {
return (
{children}
);
};
export default Button;
“`
Bu örnekte, **Button** bileşeni, farklı variantlar, onClick eventleri ve özelleştirilebilir içerikler gibi çeşitli özellikleri destekler.
Test Etme
Yazdığınız kodun çalıştığından ve beklendiği gibi davrandığından emin olmak için kapsamlı testler yazmak çok önemlidir. Jest gibi bir test çerçevesi kullanarak, bileşenlerinizin, yardımcı fonksiyonlarınızın ve diğer kütüphane parçalarının doğru şekilde çalıştığını doğrulayabilirsiniz.
Aşağıda, **Button** bileşenimizin için basit bir test örneği verilmiştir:
“`typescript
import { render, screen, fireEvent } from ‘@testing-library/react’;
import Button from ‘../src/components/Button/Button’;
describe(‘Button’, () => {
it(‘renders the button correctly’, () => {
render();
const buttonElement = screen.getByText(‘Click me’);
expect(buttonElement).toBeInTheDocument();
});
it(‘calls the onClick function when clicked’, () => {
const handleClick = jest.fn();
render();
fireEvent.click(screen.getByText(‘Click me’));
expect(handleClick).toHaveBeenCalledTimes(1);
});
});
“`
Kütüphanenizi Dağıtmak
Kütüphanenizi geliştirdikten ve test ettikten sonra, diğer projelerde kullanılabilmesi için dağıtmanız gerekir. Rollup gibi bir paketi kullanarak, kütüphanenizi tek bir dosya veya bir dizi dosya olarak paketleyebilirsiniz.
Kütüphanenizi dağıtmak için `rollup.config.js` dosyasını oluşturun ve aşağıdaki yapılandırmayı ekleyin:
“`javascript
import typescript from ‘rollup-plugin-typescript2’;
import commonjs from ‘rollup-plugin-commonjs’;
import resolve from ‘rollup-plugin-node-resolve’;
export default {
input: ‘src/index.ts’,
output: [
{
file: ‘dist/my-react-library.js’,
format: ‘cjs’,
},
{
file: ‘dist/my-react-library.esm.js’,
format: ‘esm’,
},
],
plugins: [
resolve(),
commonjs(),
typescript({
useTsconfigDeclarationDir: true,
}),
],
};
“`
Bu yapılandırma, kütüphanenizi CommonJS ve ESM formatlarında dağıtacaktır. Daha sonra, terminalde aşağıdaki komutu kullanarak kütüphanenizi paketleyebilirsiniz:
“`bash
npm run build
“`
Kütüphanenizi Projelere Entegre Etme
Kütüphanenizi dağıttıktan sonra, diğer projelerde kullanabilirsiniz. Bunu yapmak için, kütüphanenizi npm veya yarn aracılığıyla yükleyerek başlayın.
Örneğin, aşağıdaki komutu kullanarak kütüphanenizi yeni bir React projesine yükleyebilirsiniz:
“`bash
npm install my-react-library
“`
Daha sonra, kütüphanenizi React projenizdeki dosyalara içe aktarabilir ve bileşenlerini ve yardımcı fonksiyonlarını kullanabilirsiniz.
“`typescript
import Button from ‘my-react-library’;
const App: React.FC = () => {
return (
);
};
“`
Sonuç
Bu makale, modern bir React kütüphanesi başlangıç paketi oluşturma sürecinde size kapsamlı bir rehber sağlamıştır. Projenizi yapılandırma, bileşen geliştirme, test etme ve dağıtma adımlarını ele alarak kendi özel React kütüphanelerinizi oluşturabilir ve projelerinizde yeniden kullanılabilirliği artırabilirsiniz.
Daha fazla bilgi ve örnek için, orijinal makaleye göz atabilirsiniz. Ayrıca, React dokümantasyonu ve web sitem de size ek kaynaklar sunabilir.
#Etiketler
#React #Kütüphane #Başlangıç #TypeScript #Rollup #Jest #Dağıtım #Entegrasyon #Geliştirme #Web #Uygulama #JavaScript #Bileşen #Test #Modülerlik #YenidenKullanılabilirlik #FatihSoysal