⚛ 💡 React Native Introduction
Build Native Mobile Apps using JavaScript and React
Reading the latest articles it seems that React Native will be the number 1 framework to build native apps. Therefore I decided to take a look at it.
📄 Table of contents
"One machine can do the work of fifty ordinary men. No machine can do the work of one extraordinary man." ― Elbert Hubbard
1. Comparing ReactJS and React Native
To sum up Alexis Mangins great article on comparing ReactJS and React Native:
- ReactJS is a JS library and React Native is a framework
- ReactJS uses a bundler, React Native uses Android Studio/XCode
- React-Native doesn’t use HTML to render the app, but provides alternative components that work in a similar way
- Animations in React Native are done with its own API and gestures play an important role, in ReactJS simple CSS animations have been sufficient
- Navigation in ReactJS was easily done with react-router, React Native has it's own API
- Most common used platforms in React Native are Android and iOS. Since each has their own guidelines, development considerations have to be done independently
- Development tools in React Native are similar to ReactJS, however the DOM inspector in Native isn't that good
- Publishing to the app stores with React Native requires to know their guidelines
2. Main features of React Native
The homepage states:
- Build Native Mobile Apps using JavaScript and React
- A React Native App is a Real Mobile App
- Don't Waste Time Recompiling
- Use Native Code When You Need To
React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
3. Building an application
The tutorial itself recommends to understand the basics of React, especially JSX, components, state and props.
The new thing here is, that a component has to be registered in the App.Registry and will be established as the root component.
The first "React Native specific" components are:
- The
<view>component provides a container for other components to control style and layout - The
<Text>component for displaying text - The
<Image>component to provide images - The
<TextInput>component allows to enter text - The
<ScrollView>component provides a scrollable container to host components and views - The
<ListView>component displays a vertical list of changing data
4. Developing on iOS vs Android
5. The future of React Native
#
Conclusion
Please leave comments, feedback and suggestions as I am always trying to improve.
Share your thoughts - it's never been easier 😄