React Native Environment Setup
⚙️ React Native Environment Setup (TypeScript সহ)
React Native অ্যাপ ডেভেলপমেন্ট শুরু করার জন্য সঠিকভাবে Environment Setup করা অত্যন্ত গুরুত্বপূর্ণ। এই কোর্সে আমরা TypeScript ব্যবহার করবো যাতে কোড আরও secure, scalable এবং professional হয়।
📌 ১. React Native Development এর জন্য কী কী লাগবে?
- Node.js (LTS Version)
- npm বা yarn
- Expo CLI অথবা React Native CLI
- Android Studio (Android Emulator)
- VS Code (Code Editor)
💡 Note: Beginners দের জন্য Expo সহজ,
কিন্তু আমরা production-level শেখার জন্য React Native CLI + TypeScript ব্যবহার করবো।
📌 ২. Node.js Installation
প্রথমে Node.js (LTS) ইনস্টল করুন।
🔗 Download: https://nodejs.org
node -v npm -v // Output: v18.18.0 9.6.7
📌 ৩. React Native CLI Install করা
React Native CLI globally install করার দরকার নেই। আমরা npx ব্যবহার করবো।
npx react-native --version // Output: 0.73.x
📌 ৪. Android Environment Setup
- Android Studio ইনস্টল করুন
- Android SDK + Emulator সেটআপ করুন
- Environment Variable সেট করুন
ANDROID_HOME Path:
C:\Users\YourName\AppData\Local\Android\Sdk
adb devices // Output: List of devices attached emulator-5554 device
📌 ৫. TypeScript সহ নতুন React Native App তৈরি করা
নিচের কমান্ড ব্যবহার করে TypeScript টেমপ্লেট সহ অ্যাপ তৈরি করুন:
npx react-native init MyApp --template react-native-template-typescript
// Output: ✔ Downloading template ✔ Installing dependencies ✔ Project created successfully
📌 ৬. Project Folder Structure (TypeScript)
MyApp/ ├── android/ ├── ios/ ├── src/ ├── App.tsx ├── tsconfig.json ├── package.json
App.tsx হচ্ছে আপনার অ্যাপের main entry point।
📌 ৭. App Run করা (Android)
cd MyApp npx react-native run-android
// Output: BUILD SUCCESSFUL Launching emulator... App installed successfully
📌 ৮. Sample TypeScript Component
import { View, Text, StyleSheet } from 'react-native';
const App = (): JSX.Element => {
return (
Welcome to React Native with TypeScript 🚀
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 18,
color: 'teal',
},
});
export default App;
// Output:
// Mobile Screen এ "Welcome to React Native with TypeScript 🚀"
✨ Summary
- Node.js ও Android Studio সেটআপ শিখলেন
- React Native CLI ব্যবহার করলেন
- TypeScript Template দিয়ে অ্যাপ তৈরি করলেন
- Android Emulator এ অ্যাপ রান করলেন
✅ এখন আপনি React Native + TypeScript শেখার জন্য পুরোপুরি প্রস্তুত!
👼 Quiz
/