Friday, July 21, 2017

React native: Introduction, Installation and Basic concepts

This react native tutorial was done using 0.45, and some aspects are prone to change


The world of mobile grows and grows every day, and with it, options to develop and use this platforms also increase, with focus on getting everything out faster and better. One such example is React Native.


React Native is a relatively new framework developed by Facebook to build native apps in a hybrid way for iOS and Android. With React Native you develop your App in JavaScript using (as the name suggests) React as the main tool. Taking full advantage of React, it is easy to develop and reuse components to show and handle in your application, as well as easily organizing the structure in a hierarchy. If this is your first time using React, you can check this post written by one of my fellow developers at Innuy, which explains the basics of it.


Another of the main advantages of React Native over other hybrid JavaScript approaches is the possibility to use native code alongside the React JavaScript code. This means that if you need to use some native component that is not present in the framework, or just want to do some fine-tuning optimization, you can get the desired result with some well placed Java, Objective-C or Swift, depending on the situation.


Fair warning though. This does not mean that React Native is the be all end all of the mobile solutions, not even hybrid solutions. As I said before, this is a relatively new technology that has its huge advantages but that still isn’t fully fledged out. As always with any type of development, particularly mobile development, make sure to consider your options before jumping head first into any framework.


But what React Native does, it does really well, so let’s continue in this tutorial and get our hands a little dirty with some down to the groundwork!


Installation



Let’s start with the installation. First of all, you will need to have Homebrew installed, which you may already have. In case you do not, it is pretty easy, just follow the instructions over on their page and you should be good to go in a minute.


Now we need to install Node.js, which is used by React Native, and Watchman, which is a file watcher also developed by Facebook that allows you to update your app for development in real time greatly speeding up the development process. To install these, just run the following lines:



brew install node
brew install watchman
Once this is done, we need to actually install React Native, and the ability to create a new React Native app. This can be done either with npm or yarn. However, using npm 5 (the current version) is not recommended since it is a little buggy. Just to avoid the trouble of downgrading npm to actually install React Native, in this tutorial we will use yarn. So let’s install yarn and react native! Run the following lines:


brew install yarn

yarn global add create-react-native-app
Finally, we can now create our new App. Just run the next command and you will have a new app called “FirstReactProject”

create-react-native-app FirstReactProject
This will create all necessary files for your project in a folder with that name. Now, to run it, you can simply cd to that folder and run “yarn start”. This will start a process, show you a QR code, and keep running. Just leave the console running, since this is what it will auto-update your app on your phone. If you close it you will just need to start it again.


To see the App on your device, you need to download the Expo app, scan the QR code from your device and that’s it! You will see your new app running on your device. One important note to make, this will only work if the computer is on the same network as the device.


Now, if we modify the app files, you should be able to see the new changes on your device in just a matter of seconds. But we will see this in the next section. Let’s proceed!


Basic concepts



Now let’s see our newly created project. Open your “App.js” file, which is where the code for this App is stored currently. Nothing too complex really. Just a couple of imports, a class component with a render method (which should be familiar if you have used React before), and some styles really similar to CSS.


So let’s break it down.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
The imports part should be self-explanatory. As it is usually done in JavaScript and many other languages, here is where we import what is needed for this file to properly work. By default, React will be imported, and some basic React Native elements that will make our life easier.

export default class App extends React.Component {
render() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Text>Changes you make will automatically reload.</Text>
      <Text>Shake your phone to open the developer menu.</Text>
    </View>
  );
}
}


Coming next is the component, which will determine how the App shows and behaves. Since this component is marked as “default” it will be where the App starts, being the rendered component.


After this, the render method is what determines how this component will show and contain basic calls to functions. It is just like React, so if you need a refresher on how this is used (or wish to learn from the start), you can check this post by one of my teammates here at Innuy. In the render method of the component, we return JSX to show our component properly. The only difference here between React and React Native is that there are some components that React Native provides that can be used. “Text” as seen in this code is one such example (though not a really interesting one), which will help with the translation from this JavaScript code into more native options at compilation time.


A lot more components can be found in React Native though. For a full list of which are available, you can refer to the React Native docs. As a rule of thumb if what you want to do has an equivalent on the React Native components, try using them.


Just as an example try editing the text inside one of the ‘Text” tags and you should be able to see the App updating in real time. If not, you can try force refreshing in the Expo app by accessing the menu and hitting refresh.


If you have suffered from long compilation times from hybrid development, just this can be a huge mindblown when you think about all the compiling time that can be saved. I know I was dumbstruck for a moment or two when I realized this the first time.



const styles = StyleSheet.create({
container: {
  flex: 1,
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'center',
},
});


Finally, we reached the styles at the end of the file. This is really similar to CSS and will work for exactly the same purpose, but it is done with the “StyleSheet” that React Native provides. Although styling can be done in the render method itself, it is highly recommended that it is separate to improve readability and meaning to each style.


One important thing to note now that we are seeing this styles is the flex property. React Native works with flexbox for positioning and formatting of visual layout for the App. This should help with aligning elements among themselves and establishing proportions between different components and elements of the App.


And now we are done! With this and a little bit of knowledge of basic React, you should be good to go to start developing in React Native!

One final piece of advice: even if this is a new technology, there are already a lot of components available for use by the community. If you wish to use a component you know for mobile but it is not present in the React Native components (as Tabs) try looking for it before delving headfirst into development or breaking out the native code. There are good odds that you will find exactly what you need.

0 comentarios:

Post a Comment