The presence in the mobile world of any project is as important as having a website. Thanks to React Native we can easily create native apps for iOS and Android and that is why in this article we will make a short introduction, explaining what a project with this framework is and how it is structured.
The rise of mobile in the world of new technologies
If there is something that we cannot deny today, it is that mobile is taking more and more prominence in the world of new technologies and more on the Internet. Doing a simple search in Google we will see how there are thousands of graphs with many numbers indicating that the use of mobile phones by users is increasing makes being prepared for this fact to become important in our business.
This leads technology to also adapt to it, producing new solutions or tools. Going further at a technological level, we can observe the birth of new frameworks oriented to the mobile world, such as Ionic Framework, Titanium or React Native.
It is something magical that allows web programmers to develop native apps without having to learn new very specific programming languages for each of the platforms. With the framework, you can even create a custom tab bar. Interested? Just click here!
Before pressing any key we will have to prepare the environment to be able to make our first app.
In order to simulate the iOS app, we will need Apple’s development software, Xcode. We are only going to use the built-in iOS simulator to be able to open and fiddle with our app.
On Mac, it can be installed without problems using Homebrew without having to download it manually and install it since this last procedure usually gives problems.
Install React Native
Once we have the node installed on our computer we can install React Native.
Initialize the app in React Native
Now that we have the environment ready to start programming our first app with React Native, we will go to the terminal again and place ourselves in a folder where we want the source code of the project to be colored and we will execute a command, where we tell React Native that starts a new project with the name of out web.
Structure of files and folders of our app code
After waiting a long time and seeing a few messages in the terminal, we can see that React Native has created a folder called octuweb that contains all the files necessary to develop the app. We also see that the last two messages that React Native has left in the terminal already tell us how to open our app with the simulator.
Create an application!
Everything is ready to create your first application, open a console and run. This will create an expo project with everything you need to run the app (something like `create-react-app` for the web) and with` npm start` to start the development server.