How to Create a React Js and Vue Js App With an Explanation

Category
Tutorial
Reading
7 mins
Views
19.1K
Posting
12 Oct 2022

Javascript has become one of the important things in website creation, over time, Javascript continues to grow and give birth to several Front-End frameworks that are very helpful for interface flexibility on the website. The birth of several popular Javascript Front-End Frameworks namely Vue js, React js & others.

Then what is the Front-End Javascript Vue js and React js Framework? how to use it? Each of these frameworks is made with advantages and disadvantages, but the question is... which one is more suitable and easy to implement into the website?

We are interested in discussing these two frameworks, namely Vue js and React js which have experienced a significant increase in users from year to year, and there are already many large websites that use this Front-End javascript framework, let's discuss what Vue js and React js and how to use this framework.

 

How to Create a React js And Vue js App with an Explanation

 

 

How to Create a React js And Vue js App with an Explanation

 

1. What is Vue js

Vue js was created by Evan You who previously used Angular.js while working at Google, until he thought about how to create a lightweight framework instead of Angular.js.

Launched early in 2014 until now, it continues to grow until it becomes a very powerful front-end framework

In developing websites that use Vue js, this framework is very easy to understand even for beginners and there are already many big companies using vue js, Alibaba, github, Nintendo, and so on.

There are several reasons why Vue js is in high demand:

Light size

The advantages of this framework are only no more than 24kb, Vue.js is not far behind other front-end frameworks, in terms of performance, this framework is fast because it is light and low in size, the smaller the size of a framework, the more people use it.

Very easy to understand even for beginners

Vue js is very easy to implement on a small or large scale, because its simple structure can save time in developing it. In other words, users will have no trouble if there are errors, because they can track them easily.

Complete and detailed documentation

One of the big or small factors for a user to use the framework is the documentation. Vue js excels in terms of documentation because it is detailed and comprehensive, where even novice users can easily learn Vue js armed with basic knowledge of HTML and JavaScript.

Easy integration and two-way communication

One of the other advantages of Vue.js with other frameworks is that it can be used to develop a website into components and structures with just one file. Vue js is known for its MVVM architecture, which easily handles a block in HTML. It can work with different components.

Example implementation of Vue.js to HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sample Vue.js to HTML application</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>  
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Vue.js is working!"
            }
        })
    </script>
</body>
</html>


2. Easy and short explanation of using Vue.js

Before using Vue js, we must first insert vue.js file using a CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

To display data in Vue js, we add an element to the div with id="app".

<div id="app">
    {{ messages }}
</div>

and lastly we insert the app class earlier in the Vue js object to process the data and display the data.

<script>
         var app = new Vue({
             el: "#app",
             data: {
                 message: "Vue.js is working!"
             }
         })
</script>

"el" is the element we choose to display the data that we used earlier is id="app", while "data" is for storing the data variable itself. You try to test by copying the script above to try it.

3. Create And Install Vue App using the CLI

Installing Vue js into your project is actually not too difficult, you only need to have Node.js installed on your computer, to install Vue js into your first project, make sure that node and npm are already installed, you can check by entering order:

node -v

and

npm -v

The command will display the node and npm versions respectively. Ok then, first of all you need to enter the following command into the terminal:

npm install -g @vue/cli

Wait until the installation process is complete, you can make coffee first while waiting hehe, because the install process is quite long. When it's finished, first make sure the Vue CLI is installed properly, you can enter the command:

vue -V (uppercase)

If the Vue CLI version appears, just create the first Vue js project by entering the command:

vue create "my-project"

Later 2 options will appear, you want to use Vue 3 or Vue 2, just choose what you want. Just wait until the Vue js project installation process is complete. When finished, run the application using the command:

cd-my-project
npm run serve

If it appears like this, then your Vue js project has been successfully created.

Apps running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.7:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

Copy paste http://localhost:8080/ and run it into the browser.

 

How to Create a React js And Vue js App with an Explanation

 

4. What is React js

React.js is used to create an application on a page, React js is a javascript library developed by facebook, where React.js has a function to divide the User Interface into several components. This library is known as the Virtual DOM concept. Some advantages of React js:

Efficient

React js only renders certain resources that correspond to the data components that are alternated, in other words React.js does not render all of the resources.

Simple

When compared to other JavaScript libraries or frameworks, React.js can be said to be a simple and well-defined framework with a component-based approach, React js uses a unique syntax known as JSX which allows it to be used in both JavaScript and HTML.

Code that can be used repeatedly

Makes it easy for users to use code components repeatedly with various levels during the project, which can save time and reduce existing resources.

Data flows one way

By using React.js, data only flows in one direction, that is, smaller data will not affect large data which can make changes and modifications to data quickly without interruption.

A simple example of a website that integrates with react js in an HTML document:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My first ReactJS app</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>

<div id="app"></div>

<script type="text/babel">
   let message = <h1>My first ReactJS app.</h1>
   ReactDOM.render(message, document.getElementById("app"));
</script>
</body>
</html>


4. A brief and easy explanation of React js

Before we get to the stage of making the application, we first insert the library files needed to run in the browser, the file is an external file, in other words it will not run without an internet connection.

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

To render React,js, we need a place to render a data, here we use id="app".

<div id="app"></div>

Next we are in the last stage in the data processing process as follows:

<script type="text/babel">
  let message = <h1>My first ReactJS app.</h1>
  ReactDOM.render(message, document.getElementById("app"));
</script>

In the code we process the data from the My First ReactJS application component to render it into the app element. Here we see the HTML H1 tag in it which is a JSX tool, JSX is a JavaScript tool where we can insert HTML in it. You try to test by copying the script above to try it.

 

​5. Create and Install React js App with CLI

To install React js with NPM, you are required to have Node.js first on your computer, because NPM or NPX can only run if Node.js is already installed, for those who don't know what NPM is, NPM stands for Node Package Module, NPM just like Composer in PHP, a command that makes it easier for us to manage applications. You can download NodeJs on their website: https://nodejs.org/en/ use the LTS version for a more stable version.

To automatically install React js into your computer, you can use the following command to create a React js based project:

npx create-react-app folder-name-project

Wait until the process is complete and your project folder name is created by itself, enter your project folder then test the React js project into the browser by running the command:

npm start

If successful it will appear like this in your browser:

How to Create a React Js and Vue Js App With an Explanation

 

Conclusion

Vue js and React js make it very easy for users to create websites efficiently and quickly, if you want to use large-scale applications or websites choose react js and if you want to build a fast, lightweight website with detailed documentation, choose Vue js.

Share