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:
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?.
But, wait a second... You said we would also target Windows/Linux/Mac, how on earth are you planning on doing this?.
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.
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:
yarn global add build-tools
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:
yarn global add react-native-cli
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):
react-native init <Your Project Name\> --template re-base
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:
react-native init <Your Project Name\> --template re-dux
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:
react-native init <Your Project Name\> --template re-route
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:
react-native init <Your Project Name\> --template re-start
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: yarn run web to see your new Hello World app on the browser, or npm/yarn run electron to see your App run in your Windows/Mac/Linux or 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!.
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.
This guide/tutorial is my original content. There is a version of this Guide/Tutorial on my 3 different blogging sites under the same username @achatainga. I have re-posted it from my other blogging platforms to this amazing site. I have included the links on the resources