27
Project 93 of 100 - Counter App in React Native
Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
Link to the repo: github
Ok, I know this is a simple one. But the fact is that almost everyone builds a counter application when they're first learning a new language or technology.
Today's project just counts. That's it. It starts at 0 and there's a plus button and a minus button, and some text printed out on the screen shows the count, and it's updated as we press the buttons.
This is an easy project to do but important because it's a real introduction to state management, which ends up being one of the most complex parts of front end development in large applications.
To start, we initialize a new React Native project by going to your Terminal or command line and running expo init reactNativeCounterApp (that's what I'm calling mine- you can call yours whatever you want).
When that creates the project, we can open it up in your favorite code editor. In the App file, clear out the template code and then add Button to the components destructured out of the React Native import. You should also import useState from 'react' because that's what we're going to use to keep track of state in this app. Your imports should look like this:
import { useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';Next go ahead and initialize useState to 0 with named variables counter and setCounter array-destructured out. Anyone who's familiar with React (you should be if you're trying to learn React Native) will know this is a standard state management hook included with React for functional components. So your useState should be initialized like so just inside your App component:
export default function App() {
const [ counter, setCounter ] = useState(0);
...Next write a <Text></Text> component in the JSX somewhere. In between the brackets declare the counter variable. Below this add two Button components. These are React Native primitive components that are meant to be as simple of a button as can be, but they work. You should give each button a title prop to display why they're there. I gave mine titles of "+" and "-" to show that they're going to be adding and subtracting, respectively.
Next, give each button an onPress prop. This is where the only real logic happens in our application, because it's where we will change our counter value held in the component's state.
For the add button with a title of "+" go ahead and pass an anonymous function. In the function, we want to use the setCounter method we created earlier. As you should know, we aren't supposed to try to change counter itself, but we can use it in setCounter() and just add 1 to the existing counter value.
For the subtract button, you'll want to do the same but subtract 1 from counter rather than add. Those two buttons should now look something like this in your template:
<Button title="+" onPress={ ()=> setCounter( counter + 1 ) } />
<Button title="-" onPress={ ()=> setCounter( counter - 1 ) } />You now have all of the guts necessary to make your counter application work and it should. So give it a shot!
Mine... is not a work of sheer beauty or anything, but it does the job. Hey, now we can safely say we're well on our way to learning React Native... because we've just finished one of the major milestones in learning any new technology ;)
Can you make yours look better? Give it a shot!
If you like projects like this and want to stay up to date with more, check out my Twitter @jwhubert91, I follow back! See you tomorrow for another project.
27