“Hello World!” in expo CLI

Let’s get started as usual with “hello world” in expo CLI and let’s create a counter app to see implementation of the react useState hook, and basic building blocks of react native.

For starting you need to have a expo CLI setup in our system, haven't yet? see the blog and complete the setup. as we are going to code, we need an IDE for that we’ll be using VS code in this blog, you can get that here.

Now if you followed the setup you may have the screen in front of you:

Let’s change the app’s text to “hello world”.

open the folder in the VScode

code .

Note: if you have completed the vs code installation properly, above instruction will work and open project in VS code, else you need to configure the path variable for VS code.

The app folder structure may look like

now let’s code!

Open the ‘App.js’ file it is the file responsible for all activities in app, it is the centre of the app, all process starts from App.js

Edit App.js and convert the text from “Open up App.js to start working on your app!” to “Hello World! Developers”.

Congratulations we have an app saying Hello World! Developers.

Now moving to part 2, a counter display app

If we look closely we can notice that in <Text> tag we have updated the string and yes it is where we have to update the text of our app.

and the text tag is wrapped within the <View > tag so if your famillier with html you can relate the <View> tag with <div> and <Text> tag with <p>

so far we understand display blocks of the app to display the text.

Moving to the second part Counting variable!

So we create a variable named count by useState method implementation is as simmilar as react!

Add this line just below the import statements,

import { useState } from "react";

and this line at starting of the function,

const [counter, setCounter] = useState(0);

we have a variable whoes state can be updated by “setCounter” method!

lets get the <Button > tag to display a button which can be press to increase counter, This tag have few attribute like “title”, “onPress”. we pass title to display the button text, and onPress function to increment the counter so the Component will look like,

<Button title="+" onPress={() => setCounter(counter + 1)} />

simmilarly for decrementing value of counter, we can use,

<Button title="-" onPress={() => setCounter(counter - 1)} />

Note: we need to import all related components from react native before use so import Button from react native

all set? we have just updated the state(value) of varible but we havent displaid that yet!

to display the variable we can use same method which we used in react, add below line before the buttons

<Text>Counter : {counter}</Text>

well code! its working!

now we need some styles so we can see our counter app neatly.

for that we use stylesheet, which is for now used by an initial app, but in futher blogs, we will get to know best practices to set up stylesheet in native development.

add the below style just below the container object in styles

btnContainer: {
flexDirection: "row",
marginTop: 10,
justifyContent: "space-evenly",
width: "60%",
},

add this styles in button container which is a <View> tag just placed below <Text> tag of counter field so the code will look like:

<Text>Counter : {counter}</Text>
<View style={styles.btnContainer}>
<Button title="+" onPress={() => setCounter(counter + 1)} />
<Button title="-" onPress={() => setCounter(counter - 1)} />
</View>

Now add something on your own before text tag of counter then run the app and open it in simulator. It will look like:

congratulations you nailed it !

The Final Code: App.js :

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button } from "react-native";
import { useState } from "react";
export default function App() {
const [counter, setCounter] = useState(0);
return (
<View style={styles.container}>
<Text>Hello World! Developers</Text>
<StatusBar style="auto" />
<Text>Counter : {counter}</Text>
<View style={styles.btnContainer}>
<Button title="+" onPress={() => setCounter(counter + 1)} />
<Button title="-" onPress={() => setCounter(counter - 1)} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
btnContainer: {
flexDirection: "row",
marginTop: 10,
justifyContent: "space-evenly",
width: "60%",
},
});

Hey developers and readers, thanks for reading till the end! any suggestion may appreciated in comments and stay with, as were going to build an minimal blog app here.