5 things that you’ll learn when you start to use React Native
…but I'll tell you now!
React Native is part of the modern JavaScript hype. If you work at a digital company or follow some software community, you probably heard that React Native is the future of mobile development.
It brings to mobile development some concepts from modern web development, which are awesome. But the similarity with web could cause some confusion if you never touched React Native — I was confused when I started 1 month ago.
I’ll show you 5 things that make React Native awesome and different from traditional web development.
1. It’s a real app!
As we know, React Native is a JavaScript based lib. Because of that, some people may think it's a Hybrid application using WebView(like Cordova) or even a Progressive Web App.
Believe it or not, we can develop a native mobile app in JavaScript using React Native. These apps will run on mobile devices with native performance, all its features and no WebViews.
There’s nothing to fear about React Native!
2. It's not transpiled
When I first heard about React Native, I thought it would be an mobile application written in JavaScript, but transpiled to Native code. I can’t remember why I thought that, but I wasn’t the only one. Since I started working with React Native, people started asking me the same thing.
React Native has real JavaScript running inside your smartphone.
React Native is JavaScript code running on mobile devices for real. It uses the JavaScriptCore to run the code in a separated thread, in parallel with the Main Thread(Objective-C, Java, etc) and the Shadow Queue, the layout thread.
Read more about React Native architecture here.
3. You can’t run your web components on your mobile app
In my mind, if I had a style guide full of ReactJS web components, I would be able to use it inside React Native. Sharing components from web application to mobile app. But I was wrong… again!
The component based structure in React Native is different from the web. Specially because mobile devices don't have DOM and don't share the same markup language of the web. So, we are not able to render web components in mobile devices, because we use React Native instead of ReactDOM.
4. There’s no HTML
Due to the lack of DOM, React Native doesn’t use tags like: div, section, span, input, etc. But don’t worry, almost every HTML tag has an equivalent React Native component, so we are able to use the same mindset of the web to develop with React Native components View, Text, TextInput, etc.
5. There’s no CSS
Due to the lack of markup, there’s no CSS in React Native. But don’t panic, we can style our app using almost the same mindset of traditional CSS.
Eg. marginBottom: 15
Important: React Native enforce us to use Flexbox layouts by default. So we don’t need to use float and display to build our layout structure.
That’s it. If you are planning to start developing a mobile app, you are 1 step ahead from where I was when I started. And next time you hear about React Native, you’ll be able to talk and even question people about how they are developing their mobile applications.
Soon, I’ll share more about the challenges of building the Magnetis mobile app.
Follow Magnetis Backstage and be up-to-date with Magnetis team!
