React Native: Initial Lessons
What Is React Native?
React Native was developed by facebook to allow web apps to be run natively on mobile devices. It does so by converting each component such as Images, Text and View to their native widgets using JSX. This was one of my first initial differences I noted because in React I was still using components that very much resembled HTML to write text. Instead in react native to write hello world you would wrap it in a Text component like:
You might notice in the above picture we are passing in a styles object as a style prop. This is how React Native handles styling. It uses an object with camel case CSS naming conventions. This is not CSS however but many of the names and attributes of this object reflect CSS. Each react native component excepts a style prop by default, and it is good practice to define a styles object below the component you intend to use it in. For instance below App it is defined by default like so:
react native uses components and containers just like react. Also it can use hooks instead of having to define classes which is a handy feature it shares with react as well.
How to began your first react native app
First off you will need to install react native on your development environment. Do so by entering:
npm i react-native
I usually began my react native projects with expo which is a cli that allows you to start your react native app in different environments including emulated ones! This is handy if your developing with mobile and mind so you don’t have to keep picking up your phone. You can quickly install this by entering:
npm install -g expo-cli
After installation you should navigate to whatever directory you wish to create your react project in and enter:
expo init <name-of-project>
the ‘<name-of-project>’ will be replaced by whatever name you wish your app to be called. You will be presented with several options like basic, typescript etc. You’re gonna wanna pick basic unless you are proficient in typescript. The app usually takes a sec to build but afterwards viola! You’ve taken the first steps into the world of react native!