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
/

লোড হচ্ছে...