PLEASE NOTE PLEASE NOTE At the start of the year 2019, I updated this post and re-wrote it here 👇 At the start of the year 2019, I updated this post and re-wrote it here 👇 Getting Started with React Native in 2019: Build Your First App_Learn how to build your first React Native app with important basic concepts and where to go from here!_hackernoon.com Getting Started with React Native in 2019: Build Your First App Getting Started with React Native in 2019: Build Your First App _Learn how to build your first React Native app with important basic concepts and where to go from here!_hackernoon.com It is more in-depth, and covers almost every basic aspect about React Native ecosystem. By reading the new post, you will also built a more advance version of a typical “hello world” app. It is more in-depth, and covers almost every basic aspect about React Native ecosystem. By reading the new post, you will also built a more advance version of a typical “hello world” app. React Native is a framework for building mobile applications with JavaScript and leveraging Reactjs. It uses native UI components. If you are familiar with Reactjs, or come from front end development background, Reactjs uses a virtual DOM which act as a shadow to real DOM available. When an element changes, that change is reflected on the real DOM by Virtual DOM using a node that corresponds to each element. However, in React Native, there is no DOM rather than Native Components which are provided by platforms such iOS and Android. There are no web views here. React Native has an instance of JavaScriptCore to execute JS code when an application starts. React Native uses RCTBridgeModule to make a connection between native code and JavaScript code. It is assumed that as you dwell more in development with React Native, you might come across using a third party SDK for a specific mobile platform. This bridging will be very helpful. JavaScriptCore Difference between React Native and Reactjs React Native has its own wrappers around the native components and do not make use of every HTML element. For example, <View> which is considered similar to div of HTML. This is a major difference between React Native and Reactjs. This also means that you cannot reuse every library that renders HTML and is available for Reactjs. It has its own navigation modules. <View> div Platform Specific Designing Designing a mobile application for multiple platforms available with same set of code can be a bit overwhelming. In this case a developer or a development team is left with two choices. Either they come up with a user interface that universal to their application. This means, the UI of the app looks same on every platform. However, this is not going to be the case with every application you develop. React Native can detect the platform you are running and conditions can be used to apply the styling. Diving deeply in the bridging part or platform specific designing part of this article is out of the scope. This is written to familiarize you with basic ecosystem of React Native but I wanted to discuss these topics briefly such that to give an idea of what you are getting into. Developer Environment for React Native These are required dependencies to setup a local environment and further, to develop any type of application using it, on your machine. Dependencies required: Note: Note that you have a Node.js version >=4.0 to continue. >=4.0 To setup Native SDKs for specific platforms: iOS (install/have Xcode, it is free and most probably pre installed)
Android (I’d recommend that you follow instructions here) iOS (install/have Xcode, it is free and most probably pre installed) iOS Android (I’d recommend that you follow instructions here) Android here Last step is to install React Native CLI using this command: The above instructions work best if you need to build native code in your application or want to integrate React Native in an existing application. If you want to quickly prototype an application and you can use Create React Native App module that is very similar to Create React App. For Create React Native App you are not required to install above dependencies (of course you need Node.js for npm modules) and platform specific SDKs. Facebook itself recommends using Expo client on your phone to see the app in action. I will be using react-native-cli for brevity of the subject of this article. Create React Native App Create React Native App Create React Native App npm Expo react-native-cli Hello World with React Native To scaffold an app, use the React Native command line interface we just installed in the previous step. If you sneak peak inside the directory to see the structure, you will see a similar one: Lets try running the app before make any changes. Since I am on mac, I will be suing command: To run the same application in an Android Emulator or device (if connected), you can use the command: Since you are running any of the above command for the first time, it takes some minutes for the app show up in an emulator. Do not worry, if everything runs successfully, it will show up. The code you see above running is available in App.js: App.js If you are familiar with Reactjs, you can easily understand this code. <View> stands for wrapper element such as div in HTML and <Text> stands for <p> in HTML. <View> div <Text> <p> You will be prompted with a success message and in a new terminal window, Metro Bundler (developed by Facebook) will be running until the application closes. Metro Bundler (developed by Facebook) The file that renders this App component is index.js in the root directory. You will see this code: App index.js Do you notice something? There is no react-dom because there is no DOM in React Native. AppRegistery is the entry point to run a React Native application. App component or any other root component in the app should register by using AppRegistry.registerComponent such that a native system can load the bundle of the app and run the app by starting AppRegistry.runApplication. react-dom AppRegistery App AppRegistry.registerComponent AppRegistry.runApplication You can read more about AppRegistery here. AppRegistery here You have successfully setup your first React Native application. You can read my other articles on React Native: Building a Minimalist Weather App with React Native and Expo_React Native is a great framework to develop cross-platform mobile applications for the platforms iOS and Android. In…_blog.expo.io Building a Minimalist Weather App with React Native and Expo Building a Minimalist Weather App with React Native and Expo _React Native is a great framework to develop cross-platform mobile applications for the platforms iOS and Android. In…_blog.expo.io React Native: Getting Started with Lottie and Expo_In this tutorial, we will be using Lottie with React Native. Lottie is an opensource library that renders Adobe Effects…_hackernoon.com React Native: Getting Started with Lottie and Expo React Native: Getting Started with Lottie and Expo _In this tutorial, we will be using Lottie with React Native. Lottie is an opensource library that renders Adobe Effects…_hackernoon.com Starting Over with React Native_Start of 2018 🚀_medium.com Starting Over with React Native Starting Over with React Native _Start of 2018 🚀_medium.com For other topics such as React, Node, MongoDB you can visit me here or take a look at below posts: For other topics such as React, Node, MongoDB you can visit me here you can visit me here or take a look at below posts: Gatsby.js: How to set up and use the React Static Site Generator_Gatsby is a static site generator for React that released its first major version last month. It’s a tool that not only…_medium.freecodecamp.org Gatsby.js: How to set up and use the React Static Site Generator Gatsby.js: How to set up and use the React Static Site Generator _Gatsby is a static site generator for React that released its first major version last month. It’s a tool that not only…_medium.freecodecamp.org Build a Progressive Web App using React_Progressive Web App with React! When I read this I thought, why not build one ourselves. If you are familiar with React…_itnext.io Build a Progressive Web App using React Build a Progressive Web App using React _Progressive Web App with React! When I read this I thought, why not build one ourselves. If you are familiar with React…_itnext.io Link to the Github Repo for this project if you are still curious too see the how the project structure looks rather than trying it out yourself. Github Repo Github Repo React Native in 2019 At the starting of the year 2019, I updated this post and re-wrote it here 👇 At the starting of the year 2019, I updated this post and re-wrote it here 👇 Getting Started with React Native in 2019: Build Your First App_Learn how to build your first React Native app with important basic concepts and where to go from here!_hackernoon.com Getting Started with React Native in 2019: Build Your First App Getting Started with React Native in 2019: Build Your First App _Learn how to build your first React Native app with important basic concepts and where to go from here!_hackernoon.com It is more in-depth, and covers almost every basic aspect about React Native ecosystem. 🙏 For more questions, contact me on Twitter, or read more about me at my website. If you like this article and want me to write more about React Native, you can buy me a cup of coffee to write one 😊 🙏 For more questions, contact me on Twitter Twitter Twitter , or read more about me at my website website website . If you like this article and want me to write more about React Native, you can buy me a cup of coffee buy me a cup of coffee buy me a cup of coffee to write one 😊

Adobe

Facebook

Progressive

Twitter

React Native: Getting Started with Lottie and Expo

What to Read in 2018? 📚 A List of books worth your time

Newsletter

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Low Code

Nominated for 2022 - Most Authentic Developer Advocate of the Year

Too Long; Didn't Read

React Native: How to Setup Your First App

React Native: How to Setup Your First App

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 things I learnt from Steal Like An Artist

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

5 things I learnt from Steal Like An Artist

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps