#     
## React

**React** is an open-source User Interface (UI) JavaScript library developed by Facebook. Since its inception in 2011, organizations have adopted React to create front-end experiences like mobile apps, websites, and more. Some companies that make use of the React library are Facebook, Airbnb, and Netflix.

React makes it easy to build reusable web applications utilizing component architecture. With this process, debugging is a lot easier because React supports one-way data flow.

### Advantages of React

- The maintenance of the library is performed by a large company, Facebook, so that it will remain for a long time.
- React can be used to quickly build Single Page Applications (SPAs).

### Disadvantages of React

- The React library size is large, and it has a steep learning curve, especially for developers with basic skills in HTML, CSS, and JavaScript.
- It requires knowledge of JavaScript XML (JSX) as it uses a HTML-like template syntax.

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import React from 'react';

export default class App extends React.Component {
  state = {
    hobby: 'Travelling',
    likes: 'Kayaking'
  }
  render() {
    return (
      <div className="main">
      <h1>Enjoy Doing</h1>
      <ul>
        <li>{this.state.hobby}</li>
        <li>{this.state.likes}</li>
      </ul>
      </div>
    );
  }
}


*, *::before, *::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  font-family: Montserrat, sans-serif;
  overflow: hidden;
}

.main {
  background: #1a1a1a;
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


li {
  list-style: none;
}

li + li {
  margin-top: 1.5em;
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

From the snippet of code above, we set the initial state on the class component and reference the state to render the value on the page. In addition to creating the state, we include a couple of `div`, `h1`, `ul`, and `li` elements with `JSX` class names to style the component in the `style.css` file.

#     
## Vue

Like its counterpart React, **Vue** is a progressive JavaScript framework built by Evan You in 2014 for building complex user interfaces. Vue focuses on the view portion of applications. It supports two-way data binding between the view and the model, especially considering the model-view-view-model (MVVM) framework.

### Advantages of Vue

- Vue's learning curve is not too steep for newbie developers, especially if you already know HTML, CSS, and JavaScript.   
- Vue is performant with a file size of 20KB.
- Minimal customization and a blazing fast virtual DOM are needed to get Vue started.

### Disadvantages of Vue

- In the job market, the number of available jobs for Vue developers is not as large as that of React.
- There is a lack of third-party tools and plugins compared to React.






import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')


<template>
  <div id="app">
    <HelloWorld msg="My name is Teri" />
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>


In the code above, Vue makes it easy to render data in our application onto the document. Also, looking at the `main.js` file, we need to create an instance with the ID `#app` to initialize a new app and keep track and manipulate the document. 

In the `App.vue` file, we import a `HelloWorld` component that takes in a prop with a string of `msg`, which parses the data and displays it as an expression in curly brackets `{{msg}}` in the `h1` element.

What are the differences between React.js and Vue.js?

React is backed by Facebook and is widely adopted with a steep learning curve, while Vue is more beginner-friendly but has fewer job opportunities and plugins.