What is React Native?
React Native allows us to build a mobile application for iOS and Android in a single language and framework.
Welcome to 30 days of React Native! Each day in our 30-day journey will cover a different React Native topic. Many of the articles will build upon the previous day’s materials, and by the end of it we’ll have covered all the concepts you need to build your own mobile app using React Native.
We expect readers to be familiar with fundamental React concepts like components already. If you’re not, you can learn many of these with our more web-focused course 30 days of React. A basic understanding of web concepts like CSS is also expected.
You don’t need to have any experience building mobile apps to understand any of the material covered. If you do have some mobile development experience and you’re already familiar with a topic, feel free to skip ahead.
So, what is React Native, anyway?
One of the core concepts of React Native (and React) is to represent user interfaces in terms of different components. Here is an example of a component in React Native:<iframe src=”https://snack.expo.io/embedded/@dabbott/intro-component?preview=true&platform=web” style=”height: 53em;border:1px solid rgba(0,0,0,.08);border-radius:4px;background:center no-repeat url(‘https://i.imgur.com/5apDm5w.gif‘), #fafafa;”/>
Throughout this series, you’ll see interactive code snippets like the one above. If you edit the code, the preview will update in realtime. You can even run the preview on an iOS or Android device! These code snippets are hosted using a free service called Expo Snack. This is similar to Codesandbox, Codepen, or JSFiddle for web code.
IntroComponent, contains 3 smaller components within it: an
Image component, a
Button, and a
Text label. The label updates when we press the button (go on, try it). It takes fairly little code to do a lot with React Native! We’ll explore how each of these components work later this week.
Why React Native?
How is React Native different from hybrid app platforms?
Tomorrow, we’ll demonstrate how fast it is to bootstrap React Native applications by setting up our very first project.