React Native-এ Hello World প্রোগ্রাম লিখুন

React Native ইনস্টল করার পর App.js-এ ডিফল্ট কোড থাকে। আমরা সেটি মোডিফাই করে "Hello World" দেখাব।

ধাপ ১: প্রয়োজনীয় ইম্পোর্ট

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

ধাপ ২: অ্যাপ কম্পোনেন্ট তৈরি

export default class App extends React.Component {
  render() {
    return (
      
        Hello World
      
    );
  }
}

ধাপ ৩: স্টাইলशीট ডিফাইন

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  forText: {
    color: 'green',
    fontSize: 25
  }
});

সম্পূর্ণ কোড (App.js)

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      
        Hello World
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  forText: {
    color: 'green',
    fontSize: 25
  }
});

মূল পয়েন্টস

• View হলো প্যারেন্ট কন্টেইনার, Text এর চাইল্ড।
• style={styles.container} অবজেক্ট নোটেশন ব্যবহার করতে হয়।
• StyleSheet.create() দিয়ে স্টাইল অপ্টিমাইজ করা হয়।
• flex: 1 দিয়ে পূর্ণ স্ক্রিন কভার করা হয়।
• alignItems: 'center' এবং justifyContent: 'center' দিয়ে হরিজন্টাল ও ভার্টিক্যাল সেন্টার আলাইনমেন্ট।

আউটপুট

স্ক্রিনের মাঝখানে সবুজ রঙের "Hello World" টেক্সট দেখা যাবে।

ফাংশনাল কম্পোনেন্ট ভার্সন (আধুনিক)

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const App = () => (
  
    Hello World
  
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  forText: {
    color: 'green',
    fontSize: 25
  }
});

export default App;