Angular vs React vs Vue - Getting Started
Tags: webdev, react, angular, vue
Published: 2020-09-18 10:28:37

---
title: Angular vs React vs Vue - Getting Started
published: true
canonical_url: https://thecodeangle.com/angular-vs-react-vs-vue-getting-started/
description: 
tags: webdev, react, angular,vue
cover_image: https://res.cloudinary.com/dz4tt9omp/image/upload/v1600186661/ang_vs_rea_vs_vue.png---

> The only way to learn a new programming language is by writing programs in it.
> 
> *―* Dennis Ritchie

## Table of Content

-  <a href="#Introduction">**Introduction**</a>
-  <a href="#History">**History**</a>
      -   <a href="#history-angular">*Angular*</a>
      -   <a href="#history-react">*React*</a>
      -   <a href="#history-vue">*Vue*</a>
-  <a href="#install">**Requirements &** **Installation Process**</a>
      -   <a href="#install-angular">*Angular*</a>
      -   <a href="#install-react">*React*</a>
      -   <a href="#install-vue">*Vue*</a>
-   <a href="#conclusion">**Conclusion**</a>

<a name="Introduction"></a>
## Introduction

This article provides a step by step guide on how to install the three most popular javascript framework/library in the world of frontend web development. Many articles explain how this is done, but in this article, I try to break things into a precise and concise manner you can always refer to this anytime you want to install or setup a **React**, **Vue** or **Angular** application

As we all know, Javascript is the heart and soul of frontend web development. To build complex web applications, using vanilla javascript is probably not the right choice as you may end up pulling the hair out of your head.

To make things easier and product development faster, a library like **j**Query was introduced in 2006.

Later on, in 2010 **A**ngular 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.

<a name="History"></a>
## History

![History Image](https://res.cloudinary.com/dz4tt9omp/image/upload/v1600185440/story.jpg)
<a name="history-angular"></a>
### **Angular**

Initially released by Google on **14th September 2016.**It is completely different from **A**ngular Js which was created years earlier by the Google team. **Angular** was created to serve as an alternative to **A**ngular Js which has been placed on long term support until *December 31, 2021.*

At first release, **Angular** was initially called "Angular **2**". However, this caused a lot of confusion and the name **Angular** without any suffix was chosen.

**Angular** is written in Typescript, which is a superset of Javascript. The **Angular** team are committed to making a major release once every 6 months.

As of today, the latest release is version 10 which was released June 24, 2020.
<a name="history-react"></a>
### **React.js**

Also known as **React** or **React.js.** It is an open-source JavaScript library. **React** was created by Jordan Walke, a software engineer at Facebook.

Initially released on May 29, 2013, it is maintained by Facebook and a community of developers.

**React** is written in Javascript and it is regarded as the most popular and widely used between **Angular** and **Vue**.

The current stable version is 16.13.1, released on March 19, 2020.  
<a name="history-vue"></a>
### **Vue.js**

Also called **Vue **is also an open-source JavaScript library just like **R**eact. It makes use of the **model–view–viewmodel** structure.

Created by **Evan You, **it was released in February of 2014. The creator **Evan You **worked on **A**ngular Js originally at Google.

**Vue Js** is written in Javascript. The current stable release is on August 20, 2020.
<a name="install"></a>
## **Requirements** **&** **Installation Process**

![Requirements and Installation Process](https://res.cloudinary.com/dz4tt9omp/image/upload/v1600185423/install.jpg)  
<a name="install-angular"></a>
## ANGULAR

We are going to install and run the Angular application in 4 easy steps:

### Step 1:  Download Node.js

To use Angular, the first step is to install Node.js. Node.js is an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

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](https://nodejs.org/en/download/)

### 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
```
**ng** represents the angular command**, new** represents the fact it's a new project and **my-first-project** signifies the name of our 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**

### Addition

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.

<a name="install-react"></a>
## REACT.JS

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:

C:\\Users\\user\\my-first-react-app>npm init
Wrote to C:\\my-first-react-app\\package.json:
```json
{
   "name": "my-first-react-app",
   "version": "1.0.0",
   "description": "My First React App",
   "main": "index.js",
   "scripts": {
      "test": "echo \\"Error: no test specified\\" && exit 1"
   },
   "keywords": \[\],
   "author": "",
   "license": "ISC"
}
```

You can skip filling all the data above by adding a **\-y **flag to the **npm init** command.
```
npm init \-y
```
### 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.

The **Webpack CLI,** the **Webpack Dev Server** and **Webpack** itself. All this can be done with the command below:
```
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 preset env - **This package allows the compiling modern Javascript down to ES5.
-   **babel preset react -** This package allows the compiling JSX down to Javascript
-   **babel-loader -** This package allows transpiling JavaScript files using Babel and webpack.
-   **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:

1.  index.html
2.  App.js
3.  index.js
4.  webpack.config.js

### 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**.**

**index.html**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First App</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
```
The important thing to take note of in our **index.html** file is the div with the id called **app. **

**App.js**
```jsx
import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
            <h1>Hello World</h1>
      );
   }
}
export default 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.

**index.js**
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));
```
The **App.js **is imported into the **index.js** file, this enables us to render it into the browser.

**webpack.config.js**
```javascript
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(\_\_dirname, 'dist'),
    filename: 'index\_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: \[
      { test: /\\.(js)$/, use: 'babel-loader' },
      { test: /\\.css$/, use: \[ 'style-loader', 'css-loader' \]}
    \]
  },
  mode: process.env.NODE === 'production' ? 'production' : 'development',
  plugins: \[
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  \],
  devServer: {
    historyApiFallback: true
  }
}
```
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
```json
"scripts": {
    "start": "webpack-dev-server",
    "build-for-windows": "SET NODE\_ENV='development' && webpack"
  },
  "babel": {
    "presets": \[
      "@babel/preset-env",
      "@babel/preset-react"
    \],
    "plugins": \[
      "@babel/plugin-proposal-class-properties",
      "@babel/syntax-dynamic-import"
    \]
  }
```
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.

In the **build-for-windows **object, we set up our app to run in **development** mode. We can change it to **production** when we are ready to deploy the app.

Now inside the root of our application, we can start our application with the command below, like so:
```
C:\\Users\\user\\my-first-react-app\>npm start
```
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**.  

<a name="install-vue"></a>
## VUE.JS

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!
<a name="conclusion"></a>
## Conclusion

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.

Also, you can subscribe to my [newsletter](http://eepurl.com/gZ-jJH)