DEV Community

Avinash Kumar
Avinash Kumar

Posted on

How to get into React Native?

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:

  1. Install the React Native CLI (Command Line Interface) by running npm install -g react-native-cli

  2. Create a new project by running react-native init MyProject

  3. Run the project on an emulator or device by running react-native run-ios or react-native run-android

  4. Begin developing your app by editing the files in the src directory of your project

  5. Use React Native's built-in components, such as View, Text, and Image, to build your user interface

  6. 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;

Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
bcostaaa01 profile image
Bruno

You could show how it looks in the UI of the mobile app on iOS, for example, but aside from that, I like the way you made it very simple ๐Ÿ™‚

One thing I would have added would be a comparison between the same code snippet in React.

Great article in general!๐Ÿ‘