Learning React

Learning React - Introduction and Concept. React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

Learning React:

• PDF - Speakerdeck
• HTML

React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.

“We built React to solve one problem: building large applications with data that changes over time.”

React is simple: simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.

React is declarative: when the data changes, React conceptually hits the “refresh” button, and knows to only update the changed parts. You don’t need to care how those changes are made.

React is all about building reusable components i.e. with React the only thing you do is build components. Components are so encapsulated, thus making code reuse, testing, and separation of concerns easy.

How does It Work?

• Maintains a “Virtual DOM”
• On changes, it creates a diff
• Applies the changes in batches to the DOM

Virtual DOM

• Abstracts the DOM and give a simpler programming model and better performance
• Minimizes the repaints focusing only on what has changed

Data Flow

• One-way reactive data flow
• Much simpler then traditional data binding
• Declarative

Just the V in MVC

React does one thing very well, it manages updating the state of the view. Because you can just use this, it is Relatively easy to integrate into other frameworks. Basically, React doesn’t care about how your application is architectured.

Popularity

Support from some of the largest companies in the valley and a thriving open-source community. Support continues to grow for it every day.

Server-Side Rendering

Since react is able to represent the DOM virtually, it is able to render app state server side and be able to then take the current UI state and manage it as a SPA after the client has loaded. This allows for better SEO, performance and progressive enhancement.

Devs Productivity

Because of the large amount of tooling that supports react, and the focus on simplicity in build react components, it can make building large applications much easier for developers.

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, simpler to understand, 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.

Ref: facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces.

Adding React to an Existing Application

You don’t need to rewrite your app to start using React.

We recommend adding React to a small part of your application, such an individual widget, so you can see if it works well for your use case.

While React can be used without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of:

• A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
• A bundler, such as webpack or Browserify. It lets you write modular code and bundle it together into small packages to optimize load time.
• A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.

JSX

JSX is a syntax extension to JavaScript. We can use it with React to describe what the UI should look like. JSX may remind us of a template language, but it comes with the full power of JavaScript. JSX produces React “elements” (tree nodes).

JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.

Thinking in React

One of the many great parts of React is how it makes you think about apps as you build them.

In this part, we will walk you through the thought process of building a searchable product data table using React.

1. Start with a Mock
2. Break the UI into a Component Hierarchy
3. Build a Static Version in React
4. Identify the minimal representation of UI State
5. Identify where the state should live
6. Add inverse data flow

Notes

In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props.

However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.

React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument. In the previous code, the ref callback is used to store a reference to a DOM node.