Let's find out about React.js

First let's see

Why React.js

4715 developers attended

Ashley Nolan’s Front-End Tooling Survey, on 2016.

The survey contained many questions.

First question was
- which JavaScript libraries and/or frameworks do you currently use most frequently on projects?

The next question was
- which JavaScript library or framework would you regard as essential to you on the majority of your projects?

A recent survey on about 1M websites by W3Techs

In a recent article Pavels Jelisejevs,

an experienced front-end developer,

has compared the two frameworks in Different Aspects

Maturity

A tool will be mature if it is:
- stable
- being supported by the vendor
- owns a large knowledge base and working community

Similar Features

Angular and React both share the nice features
- components
- data binding
- platform-agnostic rendering.
- XSS protection
- utilities for unit-testing components
- nice support for routing, CSS encapsulation, and Ajax (Http) requests

Routing: (Angular: @angular/router; React: React-router)
CSS encapsulation: (Angular: Component???; React: css-in-js)
http: (Angular: @angular/http; React: Fetch or axios)
Enzyme for additional unit-testing utilities in React

Different Features

Angular
- dependency injection
- templates, based on an extended version of HTML
- @angular/forms for building forms
React
- a more minimalistic approach
- no dependency injection
- JSX instead of classic templates

Having all of these features available out of the box is highly convenient when you don’t want to spend time picking the libraries yourself. However, it also means that you’re stuck with some of them, even if you don’t need them. And replacing them will usually require additional effort. For instance, we believe that for small projects having a DI system creates more overhead than benefit, considering it can be effectively replaced by imports.

Not much. And this can be a good thing. It means that you have the freedom to choose whatever additional libraries to add based on your needs. The bad thing is that you actually have to make those choices yourself. Here We’ve found the freedom of choosing your own libraries liberating. This gives us the ability to tailor our stack to particular requirements of each project and we didn’t find the cost of learning new libraries that high.

Ease of Learning as a Beginner

Angular
- Learn about TypeScript
  - hard for JS developers easier for Java and .NET developers
- Basic topics (modules, dependency injection, decorators, components, services, pipes, templates, and directives)
- Advanced topics (change detection, zones, AoT compilation, and Rx.js)
React
- Learn about JSX
  - a language that combines the markup and logic within the components
- Learn to write components, use props for configuration and manage internal state

Ease of Learning as a Beginner

Angular
- The sheer number of new concepts is confusing to newcomers !
- The angular experience might be a bit rough since you need to keep in mind:
  - Rx.js subscription management
  - change detection performance
  - bananas in a box (an actual advice from the documentation).
- People often encounter error messages that are too cryptic to understand
React
- You don’t need to learn any new logical structures or loops since all of this is plain JavaScript

An excellent place to start is https://facebook.github.io/react/docs/hello-world.html
Then get familiar with the router https://reacttraining.com/react-router/web/guides/quick-start
Then get familiar with Redux https://egghead.io/courses/getting-started-with-redux
Then look at the size of your project and find and learn some additional libraries (The hardest part)

We were genuinely surprised at how easy it was to get started using React. Even people with a backend development background and limited experience in frontend development were able to catch up quickly.

The error messages you might encounter along the way are usually clear and provide explanations on how to resolve the underlying problem.

The hardest part may be finding the right libraries for all of the required capabilities, but structuring and developing an application is remarkably simple.

So the entry barrier for

Angular

is much higher than for

React.js

So what's the future?

So let's learn React.js

Space	Forward
Right, Down, Page Down	Next slide
Left, Up, Page Up	Previous slide
P	Open presenter console
H	Toggle this help