Why React?

Monday, January 21, 2019 1:37 PM

Why React?
1. Flexibility:
One of the main attractions to REACT is that, ONCE you learn it, you can build user interfaces for a huge
number of platforms and use cases. REACT is extremely flexible!

REACT is known to embed fewer opinions than the competition.

Where Can I Use REACT?

When REACT was originally produced, it had a simple purpose. Create components for web applications.

React - The Big Picture Page 1

When REACT was originally produced, it had a simple purpose. Create components for web applications.
As the library has gained popularity here are some of the use cases commonly using the new
technology.

REACT is HIGHLY versatile because the RENDER is separate from REACT itself.

• Web apps: react-dom

• Mobile: react-native
• VR: react-vr

Server-side Rendering:
ReactDomServer.renderToString(): This is an example that renders a component to a string of HTML

REACT is a light-weight Library that makes it easy to update existing Apps (even server side render apps)

React - The Big Picture Page 2

etc...

Broad Browser Support:

Taking into consideration that REACT is used heavily by Facebook, we can trust that it will continue to be
supported across all popular web browsers.

2. Developer Experience
The RAPID feedback development experience + Small logical API, gives a development experience that's
very hard to beat. Few concepts to master, so REACT is a tool that developers don't need to check the
docs often.

With REACT, we will be writing basically functions that return what looks like HTML. We simply import
REACT using a standard JS import statement THEN we declare a component using a regular JS function
that takes in variables via an object called PROPs…

We can also write JS Classes, which involves a bit more typing, but offers slightly more power

React - The Big Picture Page 3

*** KEEP IN MIND: The return statements we are using in both cases look very much like HTML code
(without being closed by double quotes) but it is actually JSX.

The markup that should sit inside our elements can contains calls to other elements if we have nested
markup. We can 100% avoid JSX, but clearly the top example is simpler to read and nest (most
commonly used by REACT developers).

How does this compare to other tools?

The main thing to note with REACT is that, differently from other languages, REACT does not try to
change (or use fake HTML) to accomplish certain functionalities. Instead of trying to make HTML more
powerful, REACT just handles HTML with Javascript. You don't need to learn new framework specific
keywords, rules or syntax for conditional looping and so on. For example JS already has a function meant
for iterating on top of an array, so in react we just use that.

Summary: Traditional Libraries put fake Javascript in HTML vs REACT which puts fake HTML in Javascript

Quick ways to run a REACT app:

React - The Big Picture Page 4

Quick ways to run a REACT app:

1. Use: create-react-app
a. Single command: NPM start we can start a simple REACT app in our machine ready for
development
b. EACH COMPONENT IS ATOMIC: it stands alone
c. Every time we save, changes are immediately reflected in the browser
d. If we make a simple html mistake (like closing a tag) within JSX, we get a compile time msg
with the precise line where we made a mistake.
e. Debugging is also nicely handled:

i.

2. Codesandbox: online editor for quick experimenting with REACT

a. https://codesandbox.io/

3. Corporate Investment
Created and maintained by Facebook. But REACT is Open Source though. Because of Facebook DEEP
commitment to keeping REACT stable on production when breaking changes occur in REACT, Facebook
consistently provides a codemod that automates the change. Command line tool that will automate the
change in our code.

4. Community

React - The Big Picture Page 5

4. Community

5. Performance
When REACT was created, one of the main elements that distinguish it from the competition is how fast
and efficient it was. REACT developers were aware that JS was fast, but it's de DOM that makes it feel
slow. Updating the DOM is expensive… so they started the use of the Virtual DOM.

Without Virtual DOM: Blindly update DOM using new state.

With Virtual DOM: Update the DOM in the most efficient way. For example this allow us to use layout
thrash (When the DOM has to figure out the position of everything, once an element changes on the
page.

6. Testability

React - The Big Picture Page 6

For REACT the vast majority of our components can be plain pure functions. Which means a given
function always return the same value for a given input

React - The Big Picture Page 7

Tradeoffs
Monday, January 21, 2019 3:30 PM

1. Framework vs Library
Frameworks contains more opinions, so we will avoid spending time trying to choose between many options… which reduces fatigues and has less setup overhead. Not to mention more
consistency…

REACT on the other hand is significantly smaller than most frameworks. This allows us to sprinkle REACT components on existing applications without worrying about cluttering our
codebase. REACT allows you to only pull in the feature that you need to keep the app lean and fast to prioritize performance.

2. Concise vs Explicit
With REACT we control what should happen on EVERY event. This means we can TRANSFORM and VALIDATE inputs before updating STATE and perform PERFORAMNCE optimizations as
desired. We end up having to write more explicit code, but it helps with debugging.

Note that you can write single change handlers for an entire form. No need to write a handler PER input field!

React - The Big Picture Page 8

3. Template-centric vs JavaScript-centric
* Already mentioned earlier: Angular and Ember for example look to make HTML more powerful, but adding their own unique syntax to the HTML code. REACT instead utilizes the power
of JS to handle HTML. This is what makes REACT so elegant.

Conditionals:

Loops:

Events:

React - The Big Picture Page 9

Pros / Cons

4. Separate Template VS Single File for a component

Taking into consideration how patterns like the Model, View, Controller have grown in popularity across the industry, when REACT was originally introduced there was a A LOT of
skepticism. After all, REACT will make the developer have everything about a component, EVEN the JSX code within just one file. This approach, among many others, creates concern about
the standard separation of concerns design we have been so used too. In Web development separation of concerns looks more like having each tech in different files. HTML, CSS, JS. In
REACT, the developers decided that separation of concerns is still a thing when it comes to Components. They have their own logic to be used, their own use cases…. Technologies is not
that relevant and even sometimes gets things more confusing.

• Think of REACT components like Russian dolls

5. Standard vs Non-Standard
REACT is one of many non-standard component libraries out there.

What is a Web Component?

React - The Big Picture Page 10

Sadly, though having a standard across our code would be greatly beneficial… These web component standards have yet to be embraced by the development community. Why NOT?
Browser limitations

https://caniuse.com/

In Summary, Web Components uses nothing NEW compared to REACT today.

6. Community vs Corporate
React - The Big Picture Page 11
6. Community vs Corporate

React - The Big Picture Page 12

Why NOT REACT?
Monday, January 21, 2019 8:30 PM

1. JSX Differs from HTML

I already wrote about the uses of JSX vs HTML in the previous page of this NOTE.. BUT a valid concern is:
What happens with the lots of HTML that we have to convert?

2. Build Step Required

As mentioned before, we need to compile JSX code to plain Javascript calls so the browser can
understand it.

3. Version Conflicts
We CAN'T run 2 version of REACT at the same time on the same page. This means we have to keep
REACT components on the same version throughout.

4. Old Stuff Online

React - The Big Picture Page 13
4. Old Stuff Online
REACT has a huge community online and it has evolved since it was open sourced by Facebook.
Searching for REACT example on Google and we get million of results (no different from Angular really).

Many Resources is great no? well, some of that content is outdated. So when searching the web for
REACT topics we have to be careful not to run into patterns that are no longer popular today.

Features have been extracted from REACT Core

5. Decision Fatigue
REACT is a small non-opinionated library, so it is quite easy to do the same thing in multiple ways.

• Dev Environment
○ >100 boiler plates for starting REACT projects.
 Some of these are limited though. For instance the popular create-react-app does not
include tools like React Router (Routing) OR Redux (State Management)

• ES Class or Original Create Class syntax

• Types
○ PropTypes

React - The Big Picture Page 14

 

 With PropTypes Types are checked at run time and ONLY during development
○ TypeScript
 Super set of Javascript

○ Flow
 You add type annotations to plain JS and flows infers types throughout our codebase
 You annotate the files we want to be checked

• State Management
○ State: Our App's Data
○ Plain REACT, Flux, Redux and MobX

• Styling
○ Use whatever you know today. REACT works great with CSS, SCSS, etc…

React - The Big Picture Page 15

React - The Big Picture Page 16