What Is React Native?

This is React Native?

React Native is a framework created by Facebook. And what is a framework, you might wonder? Well, you could say that it’s kind of a base upon which you write the code to create your application. It provides some of the necessary code and makes writing it a bit more efficient. React Native is based on React and shares many similarities, with the main difference being that React is used to build web applications, and React Native is used for mobile applications. Both frameworks are open-source, so anyone can use them.

Why React Native?

One of the main benefits of using React Native is that the apps that you build with it can run on both Android and iOS platforms. It’s great for building simple apps, and it’s a popular tool to build social media and e-commerce apps. Another plus is that it’s based on one of the most popular programming languages – JavaScript.

How does it work?

If you’re familiar with React, you will probably feel quite at home using React Native. To understand the basic structure of a React Native app, you need to understand some of the basic React concepts: JSX, state, and props. You can read more about that here.

One important concept in both React and React Native is the use of components, which means that we divide the code into smaller chunks that can be reused. This makes it possible to update (re-render) one or more components, without having to update the whole app. Here we use something called Core Components: there are Basic Components, like <View> (instead of the <div> tag), and <Text> (instead of <p>, the paragraph-tag), plus many others – for example, activity indicators and buttons. A magic thing about components in React Native is that they adapt to both Android and iOS, so the app gets the look and feel of any other app on that platform. Without it, we would have to create separate apps for each platform.

“One important concept in both React and React Native is the use of components, which means that we divide the code into smaller chunks that can be reused.”

Another thing that stands out is the styling. Since CSS is only for web development, we can’t use that in React. And it kind of makes sense, since we’re splitting up our code into components, we want to keep the styling close by instead of in a separate file. The default method is something called StyleSheet, which looks similar to CSS but it’s actually JavaScript (for instance we write with “camelCase”, instead of “kebab-case” like in normal CSS). The styling is written in the same file as the component. There’s also the approach of having the styling in a separate file for each component. And thirdly, there’s something called Styled Components, which is a library we install in our code that allows us to create and style our components with normal CSS inside them. It sounds abstract, but once you start using it, you’ll soon get used to it.

Try it for yourself

If you want to start playing around with React Native, you can begin with having a “Snack” – an Expo Snack, that is. Expo is a platform that lets you develop, build and test your own applications in a very user-friendly environment, free of charge. You can create your own Snacks, which are like React Native playgrounds in your browser.

They also have a great guide on how to start using React Native.

Now, let’s go build some apps!