React Native Tamil Class – தொடங்குவோம்!
React Native என்பது மொபைல் அப்ளிகேஷன் வளர்ச்சி துறையில் புகழ்பெற்ற ஒரு தளம் ஆகும். இது React.js மூலம் உருவாக்கப்பட்ட, Facebook துவங்கிய ஒரு open-source framework ஆகும். React Native உங்களுக்கு ஒரே சமயத்தில் Android மற்றும் iOS பயன்பாடுகளை உருவாக்க உதவுகிறது.
இந்தக் கட்டுரையில், React Native-ஐப் பயன்படுத்துவது எப்படி என்று தமிழில் விளக்குகின்றோம்.
React Native என்றால் என்ன?
React Native ஒரு JavaScript framework ஆகும். இது மொபைல் பயன்பாடுகளை native look and feel உடன் உருவாக்க உதவுகிறது. "Learn once, write anywhere" என்பது இதன் அடிப்படைக் கொள்கை. இதனால், ஒரே கோடிங்குடன் இரண்டு (அல்லது அதற்கு மேற்பட்ட) தளங்களில் செயல்படக்கூடிய பயன்பாடுகளை உருவாக்கலாம்.
React Native-ஐ ஏன் தேர்வு செய்வது?
நேரம் மிச்சம் செய்யும்
ஒரே codebase மூலம் Android மற்றும் iOS பயன்பாடுகளை உருவாக்கலாம்.
நிலவளங்களை மிச்சப்படுத்தும்
தனித்தனி டெவலப்பர்களை நியமிக்க தேவையில்லை. React.js தெரிந்தவர்களைப் பயன்படுத்தி மொபைல் பயன்பாடுகளை உருவாக்கலாம்.
Native உடன் ஒப்பிடத்தக்க செயல்திறன்
React Native பயன்படுத்தி உருவாக்கப்படும் பயன்பாடுகள், native செயலிகளுக்கு இணையான உச்சநிலை செயல்திறனை வழங்கும்.
React Native Class-ஐ எப்படி துவங்குவது?
1. உங்களுக்கு என்ன தேவை?
React Native-ஐப் பயன்படுத்த துவங்க நீங்கள் கீழ்க்கண்டவற்றை நிறுவ வேண்டும்:
Node.js
React Native CLI அல்லது Expo CLI
Android Studio (Android Development க்கானது)
Xcode (iOS Development க்கானது)
2. முதற்கட்ட அணுகுமுறை:
நீங்கள் இதுவரை React அல்லது JavaScript தெரியாதவராக இருந்தாலும், React Native மூலம் நீங்கள் ஆரம்பிக்கலாம். உங்கள் கணினியில் கீழே உள்ள பணிகளைச் செய்யவும்:
# Node.js நிறுவிய பிறகு:
npm install -g react-native-cli
# புதிய Project உருவாக்க:
react-native init MyFirstApp
# Development Server தொடங்கு:
cd MyFirstApp
npx react-native start
3. Expo மூலம் Development செய்யும் எளிமையான வழி:
Expo, React Native க்கான ஒரு சூழல் ஆகும். இது உங்கள் development முறைமையை மேலும் எளிதாக்கும்.
# Expo CLI நிறுவ:
npm install -g expo-cli
# Project தொடங்கு:
expo init MyFirstApp
cd MyFirstApp
npm start
React Native உடன் ஒரு எளிய App உருவாக்குவது
Button Click Example:
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<Text style={styles.text}>Count: {count}</Text>
<Button title="Increase Count" onPress={() => setCount(count + 1)} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f8f9fa',
},
text: {
fontSize: 24,
marginBottom: 10,
},
});
export default App;
இந்த React Native கோடு ஒரு எளிய மொபைல் பயன்பாட்டை உருவாக்குகிறது. இதில் ஒரு count (எண்) காட்டப்பட்டு, அதை பக்கத்தில் உள்ள Increase Count என்ற பட்டன் அழுத்தும்போது 1 வாக்கு அதிகரிக்கிறது. இதில் உள்ள ஒவ்வொரு பகுதியையும் தமிழில் விளக்கலாம்:
1. Dependency Import செய்தல்
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
React: User Interface (UI) உருவாக்குவதற்கான முக்கியமான நூலகம்.
useState: React Hook. இது state-ஐ (data/மாற்றப்படும் தகவல்களை) நிர்வகிக்க உதவுகிறது.
View, Text, Button, StyleSheet: React Native-ல் UI உருவாக்கப் பயன்படும் கட்டமைப்புகள்:
View: Layout உருவாக்க உதவும்.
Text: எழுத்து காட்டுவதற்கு பயன்படும்.
Button: பட்டன் (button) உருவாக்க பயன்படும்.
StyleSheet: Application-ஐ அழகுபடுத்த (styles) பயன்படுத்தப்படுகிறது.
2. Component உருவாக்கல்
const App = () => {
const [count, setCount] = useState(0);
App: Application-ஐ முழுவதும் நிர்வகிக்கும் ஒரு function component.
useState(0):
count: state-ஐ சேமிக்கும் variable (இந்த app ஆரம்பத்தில் 0 ஆகும்).
setCount: count ஐ புதுப்பிக்க பயன்படுத்தப்படும் function.
உதாரணமாக, பட்டன் அழுத்தப்பட்டபோது count ஐ 1 வாக்கு அதிகரிக்க setCount ஐ அழைக்கிறோம்.
3. UI (User Interface) Return செய்தல்
return (
<View style={styles.container}>
<Text style={styles.text}>Count: {count}</Text>
<Button title="Increase Count" onPress={() => setCount(count + 1)} />
</View>
);
View:
View என்பது ஒரு container (பிடிப்புக் கட்டமைப்பு). இதில் உள்ள component-களை ஒழுங்காக வைத்திருக்க உதவுகிறது.
இங்கு styles.container மூலம் design செய்யப்பட்டுள்ளதைக் காணலாம்.
Text:
Text component current count-ஐ காட்டுகிறது. (உதா: "Count: 0").
{count}: JavaScript variable-ஐ Text-ல் காட்ட React Native-ல் {} பயன்படுத்தப்படுகிறது.
Button:
Button என்பது ஒரு கிளிக் செய்யப்படும் UI component.
title: பட்டனின் பெயர் (இந்தப் பட்டனில் "Increase Count").
onPress: Button-ஐ அழுத்திய போது நிகழ்ச்சியை (event) செயல்படுத்தும் function.
இங்கு, setCount(count + 1) பயன்படுத்தி count ஐ 1 அதிகரிக்க செய்கிறோம்.
4. Styles (அழகுபடுத்தல்)
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f8f9fa',
},
text: {
fontSize: 24,
marginBottom: 10,
},
});
styles.container:
flex: 1: Screen முழுவதையும் பிடிக்க View-ஐ அமைக்கிறது.
justifyContent: 'center': Content-ஐ சென்டரில் வைத்திருக்கிறது.
alignItems: 'center': Content-ஐ நடுவில் அடுக்குகிறது.
backgroundColor: App பின் நிலையின் நிறம் (#f8f9fa) அமைக்கப்படுகிறது.
styles.text:
fontSize: 24: Text-க்கு பெரிய எழுத்துரு அளவு.
marginBottom: 10: Text மற்றும் Button இடையிலான இடைவெளி.
5. App Export செய்யல்
export default App;
இந்தப் பகுதி App-ஐ மற்ற பாகங்களில் பயன்படுத்த அனுமதிக்கிறது.
இது எப்படி செயல்படும்?
App தொடங்கும் போது, count என்பது 0 ஆக இருக்கும்.
Button-ஐ அழுத்தும் போது, setCount செயல்பட்டு count ஐ 1 வாக்கு அதிகரிக்கச் செய்கிறது.
Text component புதிய count ஐ UI-யில் காட்டும்.
இது ஒரு துவக்கத்திற்கான React Native எடுத்துக்காட்டு!
React Native கற்றுக்கொண்டு உங்கள் Career-ஐ வளர்ச்சியடையச் செய்யுங்கள்! தமிழில் கற்றுக்கொள்வது எளிமையானது, மேலும் ஆர்வமூட்டக்கூடியது.
0 Comments