React A JavaScript library

React A JavaScript library

Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

Component-Based

Build encapsulated components that manage their own state, then compose them to make complex UIs.

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Learn Once, Write Anywhere

We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

React can also render on the server using Node and power mobile apps using React Native.

In computing, React (also known as React.js or ReactJS) is a JavaScript libraryfor building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

React can be used as a base in the development of single-page or mobile applications. Complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API.

History

React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook’s newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

What is React Native?

React Native, which enables native Android, iOS, and UWP development with React, was announced at Facebook’s React.js Conf in February 2015 and open-sourced in March 2015.

On April 18, 2017, Facebook announced React Fiber, a new core algorithm of React framework library for building user interfaces. React Fiber was to become the foundation of any future improvements and feature development of the React framework.

Basic usage

The following is a rudimentary example of React usage in HTML with JSX and JavaScript.

<div id="myReactApp"></div>
<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>

The Greeter class is a React component that accepts a property greeting. The ReactDOM.render method creates an instance of the Greeter component, sets the greeting property to 'Hello World' and inserts the rendered component as a child element to the DOM element with id myReactApp.

When displayed in a web browser the result will be

<div id="myReactApp">
  <h1>Hello World!</h1>
</div>


React
React

AngularJS TypeScript-based open-source front-end framework

AngularJS TypeScript-based open-source front-end framework

Angular (commonly referred to as “Angular 2+” or “Angular v2 and above“)is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Differences between Angular and AngularJS

AngularJS

 
Architecture of an Angular application. The main building blocks are modules, components, templates, metadata, data binding, directives, services and dependency injection.

‘ Angular was a ground-up rewrite of AngularJS’.

  • Angular does not have a concept of “scope” or controllers, instead it uses a hierarchy of components as its primary architectural characteristic.[6]
  • Angular has a different expression syntax, focusing on "[ ]" for property binding, and "( )" for event binding[7]
  • Modularity – much core functionality has moved to modules
  • Angular recommends the use of Microsoft’s TypeScript language, which introduces the following features:
    • Class-based Object Oriented Programming
    • Static Typing
    • Generics
  • TypeScript is a superset of ECMAScript 6 (ES6), and is backwards compatible with ECMAScript 5 (i.e.: JavaScript). Angular also includes ES6:
    • Lambdas
    • Iterators
    • For/Of loops
    • Python-style generators
    • Reflection
  • Dynamic loading
  • Asynchronous template compilation
  • Iterative callbacks provided by RxJS. RxJS limits state visibility and debugging, but these can be solved with reactive add-ons like ngReact or ngrx.

Vue.js open-source JavaScript framework

Vue.js open-source JavaScript framework

Vue.js is an open-source JavaScript framework for building user interfaces. Integration into projects that use other JavaScript libraries is simplified with Vue because it is designed to be incrementally adoptable. Vue can also function as a web application framework capable of powering advanced single-page applications.

Vue.js is an MIT-licensed open source project. It’s an independent project with its ongoing development made possible entirely thanks to the support by these awesome backers

Browser Compatibility

Vue.js supports all browsers that are ES5-compliant.

What is Vue.js?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

If you’d like to learn more about Vue before diving in, we created a video walking through the core principles and a sample project.

If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the Comparison with Other Frameworks.

Vue.js
Vue.js