Build OS X desktop apps using React Native. Developer Tools + 1 #4 Product of the Week March 30, 2016 +1. Tweet Share Embed. Featured 5 years ago. Electron helps you for build a cross platform desktop applications with using Node.js as a back-end and a Chromium front-end. So you can use JavaScript, HTML and CSS for develop your application and using Electron you can wrap them as a desktop app. Basically, Electron is a framework for creating native applications with web technologies. React Native becoming very popular among Android and iOS developer because of its cross platform native development technique. React native is now doing what is impossible few years back but now its a complete game changer technique, which would soon change the development arena and any one can developer both android and iOS apps using single language. Build the first UI button. In this section, you’re going to create a button using TouchableOpacity that’s going to play the sound for the note when pressed. To start, make sure in the file App.js you’ve imported the following APIs from the react-native core.
There are a couple of things you need to install to set up the environment for React Native. We will use OSX as our building platform.
Step 1: Install create-react-native-app
After installing NodeJS and NPM successfully in your system you can proceed with installation of create-react-native-app (globally as shown below).
Step 2: Create project
Browse through required folder and create a new react native project as shown below.
After executing the above command, a folder with specifies name is created with the following contents.
Step 3: NodeJS Python Jdk8
Make sure you have Python NodeJS and jdk8 installed in your system if not, install them. In addition to these it is recommended to install latest version of yarn to avoid certain issues.
Step 4: Install React Native CLI
You can install react native command line interface on npm, using the install -g react-native-cli command as shown below.
Step 5: Start react native
To verify the installation browse through the project folder and try starting the project using the start command. Microsoft word install free mac.
If everything went well you will get a QR code as shown below. Cpu monitor app mac.
As instructed, one way to run react native apps on your android devise is to using expo. Install expo client in your android devise and scan the above obtained QR code.
Step 6: Eject the project
If you want to run android emulator using android studio, come out of the current command line by pressing ctrl+c.
Then, execute run eject command as
This prompts you options to eject, select the first one using arrows and press enter.
![]()
Then, you should suggest the name of the app on home screen and project name of the Android studio and Xcode projects.
Though your project ejected successfully, you may get an error as −
Ignore this error and run react native for android using the following command −
But, before that you need to install android studio.
Step 7: Installing Android Studio
Visit the web page https://developer.android.com/studio/ and download android studio.
After downloading the installation file of it, double click on it and proceed with the installation.
Step 8: Configuring AVD Manager
To configure the AVD Manager click on the respective icon in the menu bar.
Step 9: Configuring AVD Manager
Choose a device definition, Nexus 5X is suggestable.
Click on the Next button you will see a System Image window. Select the x86 Images tab.
Then, select Marshmallow and click on next.
Finally, click on the Finish button to finish the AVD configuration.
After configuring your virtual device click on the play button under the Actions column to start your android emulator.
How Build Desktop Mac Apps With React Native DesktopStep 10: Running android
Open command prompt, browse through your project folder and, execute the react-native run-android command.
Focus quit app mac. Then, your app execution begins in another prompt you can see its status.
How to permanently delete apps on macbook. In your android emulator you can see the execution of the default app as −
Step 11: local.properties
Open the android folder in your project folder SampleReactNative/android (in this case). Create a file with named local.properties and add the following path in it.
here, replace Tutorialspoint with your user name. https://yellowplug432.weebly.com/blog/office-2016-mac-download-hup.
Step 12: Hot Reloading
And to build application modify the App.js and the changes will be automatically updated on the android emulator.
If not, click on the android emulator press ctrl+m then, select Enable Hot Reloading option.
React Native becoming very popular among Android and iOS developer because of its cross platform native development technique. React native is now doing what is impossible few years back but now its a complete game changer technique, which would soon change the development arena and any one can developer both android and iOS apps using single language.
This tutorial is for all the beginners who is thinking to learn React Native. So using this tutorial you can complete your first task to install Install React Native on MAC ( MACINTOSH ) system and create your first React Native project and run that project in real iOS device or iOS emulator. If you use windows system then you can also read my this tutorial. So lets get started ? .
Step 1. Install Homebrew :
Homebrew is a type of platform dependency installation software which would allow us to install all the download and install all the required files. To install Homebrew open you terminal prompt and type the below command :
React Native Desktop Application
![]() Step 2. Install Node.js :
Next step is to install the node.js online using command.
Step 3. Install watchmen :Step 4. Install React Native CLI :Step 5. install Xcode command line tools :
To install the latest version on Xcode you need to follow the below steps :
Open Xcode -> Preferences -> Locations tab -> install latest version of Xcode command line tools.
Step 6. Create your first react native project in MAC :
Step 7. Run your created project https://newtraveler449.weebly.com/blog/microsoft-malicious-spyware-removal-tool-for-mac.
Screenshot :
Here you go guys, Now you have successfully created your first React Native project in MAC. To start editing your project just open the index.ios.js file. Feel free to share your thoughts via comments ? .
Also Read :Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |