Hello world 👋🏻 my name is Francisco, fcoterroba on the Internet and today I bring you a post in which we are going to talk about the latest framework that I am learning on a personal level. IONIC 🔵
In a matter of minutes, and with hardly any previous experience, you will know why I am learning this framework, what it is intended for, who is behind it, the market share it currently has, what it is for and above all, what What do you like the most, we will see the first contact with the language 🤓
The first contact will be based on everything related to the framework, from the correct installation, the things that we will need beforehand to the main examples that are usually used to learn and finish testing any language, library or framework. 💪🏻
If you like programming, I recommend you go through the programming tag where you can find the more than 5 projects that I have uploaded to date in a multitude of different programming languages, including JavaScript, Swift and, above all, Python..
If I have to emphasize one, I especially liked the Link shortener with graphical interface in Python with a somewhat advanced level in the language.
If you have a lower level, I recommend the first steps in Swift or how to make a calculator in python using the terminal.
I also remind you that everything you learn here can be uploaded to GitHub as a personal project, companies value that! 👁🗨
Additionally, you can give it a touch of beauty to your profile following the post I uploaded last week
Before starting, although later I will explain what it is, I will I recommend visiting a post that I uploaded more than a month ago, in which I explain many of the most used computer terms in our day to day. Since, in this post, you will see words that you probably do not sound a lot. 🤯 You can reed the post here.
If you are more interested in the backend, I recommend you also visit my post talking about Go, Google's back language.
Now yes, let's start!
IONIC: What it's?
IONIC is a framework (a framework is a standardized set of concepts, practices and criteria to approach a particular type of problem that serves as a reference to face and solve new problems of a similar nature. A set of additional tools to a programming language, let's say .) open source used in the development of hybrid mobile applications, combining HTML5, CSS and JavaScript.
In summary, IONIC is a framework that, using front-end web technologies such as HTML5, CSS3 and JavaScript, is capable of creating mobile applications for Android and iOS. From the same code, yes.
A little history about IONIC
The base of IONIC is developed on Angular and Cordova. It was born in 2013 and its latest version is IONIC 4, released at the beginning of last year.
Are there alternatives to IONIC?
Yep.
Today, there are, in my opinion, three frameworks, libraries or technologies that serve the same purpose. React Native, Angular and IONIC.
As we see in the graph above ☝🏻, we can see that the victory goes to Angular followed by Ionic at the beginning of the last five years, although the position was taken away by the Facebook framework, React Native, in mid-2017.
Globally, except in China, victory has always been on Angular's side.
But let's get on with it! 👇🏻
FIRST STEP
Before installing Ionic we must install Node.JS, which is a Javascript environment that allows us to run said programming language on the server.
We can download the latest version or the LTS version (latest stable version, without bugs) on your webpage.
The installation does not go much beyond giving next until you see finish
2️⃣ SECOND STEP 2️⃣
Once installed we are going to install IONIC by writing the following command in the terminal:
npm install -g ionic
3️⃣ THIRD STEP 3️⃣
Finally we must open our favorite IDE or code editor (in case it has terminal inside, if not, we must write the command in the terminal inside the project folder that we have previously created), create a specific folder for the project and Write the following command in the terminal:
ionic start hola-mundo blank
When writing it, it asks us to choose a framework between Angular and React. You can choose the one you want.
When this is installed we already have our IONIC project built. To see it we must write this last command:
cd "NOMBREDELACARPETAQUENOSHACREADO" ionic serve
And it will automatically open a web page that shows us what our IONIC App is like. Usually in localhost:8100
HELLO WORLD
To do this we are going to first edit the BLANK that appears at the top left. The file /src/pages/Home.tsx and modify the tag IonTitle to name it whatever we want, in my case, Home.
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React from 'react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';
const Home: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>INICIO</IonTitle>
</IonToolbar>
</IonHeader>
...And later, we are going to edit what appears on the screen, which is located in /src/components/ExploreContainer.tsx I have written something like this, inside the return, but you can write whatever you want, always in HTML format.
import React from 'react';
import './ExploreContainer.css';
interface ContainerProps { }
const ExploreContainer: React.FC<ContainerProps> = () => {
return (
<div className="container">
<strong>HOLA MUNDO 👋🏻 SOY FCOTERROBA</strong>
<p>Visita mi web! <a target="_blank" rel="noopener noreferrer" href="https://www.fcoterroba.com">www.fcoterroba.com</a></p>
</div>
);
};
export default ExploreContainer;With this we already have our hello world!
If you are interested, I leave you the complete repository in my perfil de GitHub in addition to inviting you to follow me! ♥
I leave you this course on YouTube to make a complete chat app with login in Firebase! 🔥
And that would be all for today! I hope you liked doing it as much as I did! I also hope you have a great week and we'll see you here soon! Greetings and remember to follow me on the networks as Twitter, Facebook, Instagram and LinkedIn. 🤟🏻
sources: reviblog.net, qualitydevs.com
English 
Spanish