Create a Cross-Platform app which would run on Android/IOS/Web/Windows/Mac/Linux using React-Native
As a self taught programmer who works as a freelancer, I would like to recommend this amazing solution which will help you build your dream app that would run on Android/IOS/Web/Windows/Mac/Linux using React-Native.
A bit of information:
"React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS."
When I first learn about React-Native I immediately fell in love with it. Programmers like myself need to be able to learn once and apply such knowledge everywhere. React-Native is the perfect solution for freelancers and entrepreneurs because we are basically a One-Man-Enterprise.
However, if you read above, React-Native is for Native Apps, not for the Web or for Window, Linux o Mac. How do we solve that?.
As it turns out, there is a nice library called react-native-web, which actually takes the same code and using technologies like Webpack, you can transform your React-Native code into React!.
But, wait a second... You said we would also target Windows/Linux/Mac, how on earth are you planning on doing this?.
Well, since React-Native-Web exists, we can always use another great solution called Electron. With Electron, you can "embed" your react-native-web app into it and it will run for Windows/Linux/Mac.
Now the best part:
After playing around a bit with different setups, I stumbled upon a great boilerplate which has it ALL IN ONE!. It is called React Everywhere!. Their Github repository explains the necessary steps to have you install your "Hello world" App in a few steps which I will cover here:
1 - First of all you need NPM: NPM stands for "node package manager" and it is basically a software you install in your development environment to download Nodejs libraries.
But what is Nodejs?:
"Node.js is an open source, cross-platform run-time environment built on Chrome’s V8 JavaScript engine. It uses an event-driven, non-blocking I/O model which makes it lightweight and efficient. The Node.js environment enables JavaScript users to deploy the language for server-side scripting, whilst also running scripts to produce dynamic web page content.". Make sure to have the latest Nodejs and NPM installed by clicking here. Once you have it installed you would need to learn a bit of how to use it using the terminal. I highly recommend installing Yarn right after nodejs because it is a lot faster and has many benefits. If you do not understand much so far, it is ok, you can follow along and install it. 2 - You will need to install Build-Tools by typing this in your terminal: You will see your machine working and let it work until it is done. 3 - Now let us install react-native Cli globally by doing: 4 - Next up, let us follow React-Everywhere's instructions to create a new project. In your terminal type (make sure you are in the folder you wish to start setting up your development environment): This solution works out of the box, but if you want your boilerplate to have redux (please visit their link to learn more about it), then you will need to type the following command: It will tell you that <Your Project Name> already exists, would you like to override? Just type in the terminal Yes. If you want to have react-router (again, visit the previous link to learn more about it), you would need to apply the following command: It will again tell you that <Your Project Name> already exists. Again, make sure to type in yes to override. Finally, we would need to apply the following command: You will need to type in "yes" again to confirm the fact you want to override. All of this is necessary for the project to work correctly. Once your computer has finished with all its downloading, linking, etc... You will need to finally enter your projects folder and type: This final script basically adds the necessary commands to package.json which you will later need to run or build your app. That is it!. You may type in the console: I know this post is a bit technical and not for the non-coders, but I would like you to still take a look into it because if you manage to master the information that you have here, you may become a programmer for not only Web Apps but also for Android/IOS/Windows/Mac/Linux Apps!. Thanks for reading, commenting and sharing this information. Very Low Supply at 100,000 tokens. Own 0.1% of suppl...
yarn global add build-toolsyarn global add react-native-clireact-native init <Your Project Name> --template re-basereact-native init <Your Project Name> --template re-duxreact-native init <Your Project Name> --template re-routereact-native init <Your Project Name> --template re-startyarn run finishInstall.jsnpm/yarn run web to see your new Hello World app on the browser, npm/yarn run electron to see your App run in your Windows/Mac/Linux or npm/yarn run android/ios (you need to have your Android IOS Phone connected by USB and have your USB in debugging mode) to see your App run in Android or IOS!.
Sponsored ( Powered by dclick )
Steem Hedge Token
we could use this for steemspeak
dapp with keychain+steemconnect
Thank you for commenting!. As a matter of fact, I have been working on a pilot project which uses keychain+steemconnect with this setup. As soon as I have it ready and working on this boilerplate I shall create a open source github repository for people to just install and code!.
Peace :v:
Congratulations @achatainga! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
You can view your badges on your Steem Board and compare to others on the Steem Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPVote for @Steemitboard as a witness to get one more award and increased upvotes!
nice info
Posted using Partiko Android