This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Avinash Kumar
To get started with React Native, you should first have a solid understanding of React and JavaScript. Here are the basic steps to getting started with React Native:
Install the React Native CLI (Command Line Interface) by running
npm install -g react-native-cliCreate a new project by running react-native init MyProject
Run the project on an emulator or device by running
react-native run-ios or react-native run-androidBegin developing your app by editing the files in the src directory of your project
Use React Native's built-in components, such as View, Text, and Image, to build your user interface
Utilize React Native's APIs, such as Fetch and AsyncStorage, to access device functionality and data
A simple Calculator Program:
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
const Calculator = () => {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
const handleButtonPress = (val) => {
setInput(input + val);
}
const handleClearPress = () => {
setInput('');
setResult('');
}
const handleEqualPress = () => {
setResult(eval(input));
}
return (
<View>
<Text>{input}</Text>
<Text>{result}</Text>
<View>
<Button title="1" onPress={() => handleButtonPress(1)} />
<Button title="2" onPress={() => handleButtonPress(2)} />
<Button title="3" onPress={() => handleButtonPress(3)} />
<Button title="+" onPress={() => handleButtonPress('+')} />
</View>
<View>
<Button title="4" onPress={() => handleButtonPress(4)} />
<Button title="5" onPress={() => handleButtonPress(5)} />
<Button title="6" onPress={() => handleButtonPress(6)} />
<Button title="-" onPress={() => handleButtonPress('-')} />
</View>
<View>
<Button title="7" onPress={() => handleButtonPress(7)} />
<Button title="8" onPress={() => handleButtonPress(8)} />
<Button title="9" onPress={() => handleButtonPress(9)} />
<Button title="*" onPress={() => handleButtonPress('*')} />
</View>
<View>
<Button title="." onPress={() => handleButtonPress('.')} />
<Button title="0" onPress={() => handleButtonPress(0)} />
<Button title="C" onPress={handleClearPress} />
<Button title="/" onPress={() => handleButtonPress('/')} />
</View>
<View>
<Button title="=" onPress={handleEqualPress} />
</View>
</View>
);
}
export default Calculator;
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Avinash Kumar
Avinash Kumar | Sciencx (2023-01-29T04:31:48+00:00) How to get into React Native?. Retrieved from https://www.scien.cx/2023/01/29/how-to-get-into-react-native/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.