Angular vs React vs Vue — Getting Started
The only way to learn a new programming language is by writing programs in it.
― Dennis Ritchie
Table of Content
- Requirements & Installation Process
To make things easier and product development faster, a library like jQuery was introduced in 2006.
Later on, in 2010 Angular js was created by Google. It became the first framework that provided a complete architecture for front-end application development.
Fast forward to today, and we have the big 3 that dominate the world of frontend web development ( Angular, React, and Vue)
Each of these tools is unique and can perform the same function effectively. One fact that cannot be ignored is that there will always be a debate about which is better among the three, but in this article, our focus is on how to set them up on our machine.
Initially released by Google on 14th September 2016. It is completely different from Angular Js which was created years earlier by the Google team. Angular was created to serve as an alternative to Angular Js which has been placed on long-term support until December 31, 2021.
As of today, the latest release is version 10 which was released June 24, 2020.
Initially released on May 29, 2013, it is maintained by Facebook and a community of developers.
The current stable version is 16.13.1, released on March 19, 2020.
Requirements & Installation Process
We are going to install and run the Angular application in 4 easy steps:
Step 1: Download Node.js
The installation of Node comes along with NPM(Node Package Manager). NPM is the tool we will be using in the terminal to install other 3rd party libraries needed to run an Angular application.
If you don’t have Node.js installed on your machine, you can do that here
Step 2: Install The Angular CLI
Once Node.js has been installed on your machine, this stage involves installing the Angular CLI. We can do this by opening the terminal and running the command below:
npm install -g @angular/cli
Once the installation process is complete, you can type ng v in the terminal to confirm if it was successfully installed. That command will display the version of Angular you have running on your machine.
Step 3: Create a New Angular Project
Now that the Angular CLI has been installed, we now have access to the ng command in our terminal.
To create a new project we can run the command below:
ng new my-first-project
Once the installation process is complete and the needed dependencies and files downloaded, the next thing to do is to navigate into the project directory. We can do this by running the cd my-first-project command in the terminal.
Step 4: Run The Application
To run the application and display it on the browser, we will run another command from the terminal, shown below:
ng serve --open
Once this command has executed successfully, a tab should open in the browser showing the Angular boilerplate template
We just successfully run an Angular application. By default, our application will be running on localhost:4200
To prepare and bundle our app for production, we can run the ng build -prod command in the terminal. This will minimise and bundle our application making it ready for deployment.
We will work on two different ways of setting up a React project. The first one will be done using the create-react-app command, and the second one will be set up using Webpack and Babel.
Using The create-react-app Command
This will be done in two(2) easy steps.
Step 1: Install create-react-app
To have access to the create-react-app command, we need to install it on the terminal using npm. The command to that is shown below:
npm i create-react-app
Step 2: Create Project With NPX
We can now create a new project using npx. npx is a package runner tool that comes with npm version 5.2 and above. It allows us to create a new React project from the terminal by running the command below:
npx create-react-app my-first-app cd my-first-app npm start
Above we created a new project called
my-first-app , we moved into the newly created project directory and started the project with npm.
By default, our project will be running on localhost:3000 in the browser. To prepare and bundle our app for production, we can run the npm run build command in the terminal.
Using Webpack and Babel
This involves a much longer process to run React. It will be done in 7 steps.
Step 1: Create The Project Folder
To install React using this method, we will create a new folder to install all the required dependencies. We can do this with the command below:
C:\Users\user> mkdir my-first-react-app C:\Users\user> cd my-first-react-app
Step 2: package.json
To install any dependencies, a package.json file is required to be installed in the project. To do this, we will run the npm init command in our project directory, from the terminal.
C:\Users\user\my-first-react-app> npm init
The above command will require some information like the name, author, description version etc. to be filled in the terminal. A sample of this can be found below:
You can skip filling all the data above by adding a -y flag to the npm init command.
Step 3: Install React and React Dom
So for React to work on our project, we need to install React and React Dom. To do this, we will run the command below:
C:\Users\user\my-first-react-app> npm install react C:\Users\user\my-first-react-app> npm install react-dom
Step 4: Install Webpack and Babel
Let’s start with Webpack. Webpack is going to require three things to be installed.
C:\Users\user\my-first-react-app>npm install webpack webpack-dev-server webpack-cli --save
Next up to install is Babel. Some of the Babel dependencies we are going to install include:
- babel-core — Gives us access to the Node API.
Now let us install them by running the command below:
C:\Users\user\my-first-react-app>npm i @babel/core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev
Babel is now installed!
Step 5: Create All Necessary Files
We need to create the files needed for us to set up and bootstrap the application. These files are going to be created in the root folder (my-first-react-app ) of the application. They include:
Step 6: Configure Rules, Loaders, and Dev Servers
Next step is to open up the files and complete the setup. We start with the index.html file.
The important thing to take note of in our index.html file is the div with the id called app.
This is the part of our code that will be shown in the browser. When we eventually run the application, we should see a Hello world text.
The App.js is imported into the index.js file, this enables us to render it into the browser.
From the above code, we set the entry point of the application as index.js. Then the output path is where we will bundle the app for production. This will be done inside the dist folder.
In the mode object, we can either set the app to be bundled for either production or development mode. This will be done in the package.json file
Step 7: Setup package.json File
On opening the package.json file, you may come across “test” “echo \”Error: no test specified\” && exit 1″ inside the scripts object. You should clear it off and post the above code in the scripts object.
Now inside the root of our application, we can start our application with the command below, like so:
The app will run on http://localhost:8080 by default. If we go to this address on the browser, we should see Hello World on display.
To generate the bundle needed for deployment, we can run the command below in the terminal.
C:\Users\user\my-first-react-app>npm run build-for-windows
So that is how React can be created using Babel and Webpack.
We will be setting up Vue with the Vue CLI. This will be done using yarn in 3 easy steps.
Note: In case you don’t have yarn installed on your machine, you can install it with npm by running the npm i yarn command.
Step 1: Install The Vue CLI
We do this by running the command below:
yarn install -g vue-cli
With this, we have installed Vue globally on our machine.
Step 2: Create a New Vue Project
To complete this step we run the command below:
vue create first-vue-app
This will show the options below in the terminal.
Vue CLI v4.5.6 Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features
To keep things at a basic level, we can select the default option.
Step 3: Run Vue App
To run the application, we need to move into the project directory which is first-vue-app with the command below:
cd first-vue-app yarn serve
Now, the project will become accessible at http://localhost:8080/ by default in your browser!
So that is pretty much everything that is needed to set up an Angular, React or Vue application. If you have any issue during the installation process, please feel free to drop a comment, I will be sure to respond to it.
Originally published at https://thecodeangle.com on September 13, 2020.