“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
- Abstracts the DOM and give a simpler programming model and better performance
- Minimizes the repaints focusing only on what has changed
- One-way reactive data flow
- Much simpler then traditional data binding
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.
Support from some of the largest companies in the valley and a thriving open-source community. Support continues to grow for it every day.
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.
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.
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.
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.
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.
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.
- Start with a Mock
- Break the UI into a Component Hierarchy
- Build a Static Version in React
- Identify the minimal representation of UI State
- Identify where the state should live
- Add inverse data flow
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.