The Deep Dive — Transitioning to React

A top-down approach to learning React coming from other JS frameworks — such as AngularJS

Intro

—

This primer is designed to help answer key issues while learning React from AngularJS, or any other MVC JavaScript framework standpoint. It is based on a top-down approach, meaning starting from the top level(minimum) application down to lower level(advanced) concepts.

PS: This article is under constant editing. More information is going to be added, and removed along the way.

If you rather want to learn how to migrate to React from another framework take a time to read this instead.

Introspection

—

The emphasis is on this write-up is to get to business quick, and start contributing either to a mature project, or to do a migration from any framework to react.

It takes time to be familiar with new concepts. Just as transitioning from to jQuery to Angular was a struggle, expect similar feeling while transitioning to React from Angular. Some concepts are just going to be new, and some of concepts you loved are going to be missing.

Being an open minded programmer will help.

Questions

—

• Workflow ~ building releasable assets
• TDD ~Unit testing the React way, or your way. How to test the whole thing to make sure nothing breaks, as we add more code?
• App Shell ~ React’s minimum requirements to get up and running
• Data Layer ~ React’s data management and modeling data from API endpoints. Data coming from APIs or application that hosts the frontend(FE). This section covers the State, Domain/Model, and Store. What is the difference, if any, between the state and the $scope?
• HTTP ~ How communication with remote services works? How to receive HTTP response and add the response to the state?
• WebSocket~ How to receive WebSocket payload and add those into a state?
• Router ~ Does the react’s router work as AngularJS’ UI-Router? How do parameters are sent via the router? Is the third party a better option over native? How does React router work?
• Components ~ How directives fit into React’s Component scheme. How does composition work from component’s standpoint? Are there directives equivalents? how do react components integrate third-party libraries such as Bootstrap or jQuery Widgets? Do third party libraries worth integration into the modern React stack? Directives are simply components. The part that may be difficult to wrap your head around.
• Conditional rendering ~ To show or hide components or view fragments, Angular uses attribute directives such as ng-show ng-hide ng-if in templates. React on the other hand, delegate most of work to JSX’s inline JavaScript. This makes above directives irrelevant.
• Conditional rendering ~ Filters a.k.a Pipes are add-ons that Angular template engine uses. For performance reasons, they were suggestions to move filtering operations from template into controllers. React re-enforces the same idea. Instead of sorting at template layer, the collection is displayed already sorted. The same applies to trimming and formatting of some data structures such as telephone, zip code formats, etc.
• Message Passing ~ How parent components communicate with their children? How nested components communicate with their parents? How un-related components communicate?
• Event ~ Event handling may be a bit different from Angular. The obvious case of $watch and $on is related to this QA. But also handling events in templates may be a bit different.
• Forms ~ How forms work? What are good practices around forms validation? How to handle form submission? How to integrate third party libraries?
• JSX ~ Does it make sense to mix HTML in JavaScript(it is not: JSX is simply XML, and XML has been used in configurations files for Java for years. It is possible to model the application in such a way that the view is not mixed with logic — similar to MVC)
• MVC ~ Is react MVC ? Spoiler alert: it is not. MVC is one of the patterns available to model your applications from, it is not the only cool kid in town. Most React applications are modeled on Flux design pattern). React is mostly the V in MVC. Since it is a library, you can include it in applications built using other technologies. The only question I always have in such a scenario is does it worth it?

Workflow

—

There is a couple things worth to mention, before we dive into it. When a file change, there are transformations that have to follow.

• If the file is CSS, then cssLint and minification follow.
• In case of JavaScript though, JSX is rewritten to JavaScript. This can be done with babel or webpack internals.
• The resulting file is then bundled for the browser, using either webpack or browserify, and then minified using eitheruglify or any other alternative. It is possible to add tree shaking in the mix at this level.
• After this transformation phase, test runner kicks in, we build releasable code. Depending on the tools used, the tasks mentioned above can be executed in parallel.

Following tools will be used to make the application work.

• node + npm
• gulp+ babelfor tasks
• webpack for transpiling to ES5, code splitting, etc. In addition to that, there is a dev-server that comes with hot-reloading enabled.

Use Case: usinggulp

Reading list

• Following articles can help you get familiar building your app: [1], [2]
• Using gulp + babel + browserify with your react apps: [1],[2],[3]
• Using webpack with your react apps: [1]

TDD

—

Running tests doesn’t prevent the worst to happen, but rather getting prepared to provide and remember a fix to whatever went wrong in past.

“Fool me once, shame on you. Fool me twice, shame on me. Fool me three times, shame on both of us.” ~ Stephen King — source

Reading list

It is not reasonable to layout test strategies and know-how in a few lines. Here goes the list of complementary reading about the subject.

• using mocha + enzyme: [1], [2]

App Shell

—

The App Shell will be defined as top level component responsible to bootstrap your overall application.

Source

Router

—

Saying that react’s router is powerful yet simple, is no exaggeration at all. To get a job done, there is not much needed, but a small component that acts as a router.

The details of <Main/> component gives an example of the router, by default the IndexLayout component is displayed.

Source

Reading list

• The list of contents to help you understand more about the routing: [1]

Components

—

Components are first class citizens in React. That means everything is done via components. React has a dead-simple template, which makes it easy and flexible to work with, compared to Angular.

Reading list

• To get deep in business, you can read the following components: [1]
• Pure and Higher Order Components: [1], [2], [3], [4]

Conditional Rendering

—

Angular uses attribute directives to show or hide elements. It is possible to mix operators to make a decision to show or hide a component, or HTML tags. There are two approaches one being the use of a special CSS class, the other being to remove completely the element from DOM.

The use of props(properties) is limited to settings that are not going to change over the component/elements lifecycle. If the settings you are using are going to change, state is the good way to go.

Source

Reading list

• What is the difference between state and props? — [1], [2], [3]

Form

—

Forms are a complex subject. Since React has no specific way to handle forms validations, we will rely on mixins to group validations functions into re-usable libraries. In addition to that, libraries like ramda can be a good help.

Reading list

• To learn more about mixins — [1], [2], [3]

Event

—

# The wrong way
<Tag onClick={this.handleClick()}/>
# The right way
<Tag onClick={this.handleClick}/>
<Tag onClick={(e) => this.handleClick(e)}/>

Reading list

• Maximum update depth error — [1]
• Message vs Event vs Intent — [1]

Reading list

—

StackOverflow has interesting React Questions, and answers. It may be a good way to both sharpen knowledge and give back to the community, with answers you will provide and questions you may ask over there.

Whenever you have time, following links helped me a lot in my transition:

• React is Slow, React is Fast — tips to optimize React data grid rendering
• To learn react 4 in details head to — All About React Router 4
• To learn in details about other parts — Leveling up with React — is a good “go to” resource.

Outro

—

Learning from top to bottom helps me to learn as much as I can in less time. I hope this write up helps you, as it helped me answer some key points I needed to know about react.