React
React is an open-source javascript library for building user interfaces. It is not a framework. It is a library. React is a project created and maintained by Facebook. React has more than 100 thousand stars on GitHub and a huge community behind it. React has become increasingly popular among developers and is also one of the most sought out skill-sets by companies right now. React has a component-based architecture. This lets you break down your application into small encapsulated parts which can then be composed to make more complex UI. React is declarative. React will make it painless for you to create complex UIs by abstracting away the difficult parts. React will handle efficiently updating and rendering just the right components in your application when your data changes. DOM updates which is one of the more expensive operations is handled gracefully in React.
Component-Based Architecture
React is component-based. architecture. This lets you break down your application into small encapsulated parts which can then be composed to make more complex UIs.For example, a traditional website can be broken down into Header, Nav, Main, Content, Footer, and finally one component to contain every other component the containing component is the root component and is usually named as an app component.
React Component Approaches
- Four Ways to Create React Components
- ES5 Create Class Component
- ES6 Class Component
- ES5 Stateless Component
- ES6 Stateless Component
- When Should I Use Each Style?
- Other Ways to Create Components
Is switching to React easy?
Understanding how it works will take time and will slow you down at first (but once you and your team get it, things will start happening much faster)
Props
- Passed down to component from parent component and represents data for the component
- accessed via this.props
State
- Represents internal state of the component
- Accessed via this.state
- When a component’s state data changes, the rendered markup will be updated by re-invoking render() method
JSX
- Arguably, one of the coolest things in React
- XML-like syntax for generating component’s HTML
- Easier to read and understand large DOM trees
- Translates to plain JavaScript using react-tools
Virtual DOM
- The virtual DOM is used for efficient re-rendering of the DOM
- React aims to re-render the virtual tree only when the state changes
- Uses 2 virtual trees (new and previous) to find differences and batch update real DOM
- Observes data changes (setState) and does dirty-checking to know when to re-render component
- Whenever possible, does not update entire component in real DOM — only computes a patch operation that updates part of the DOM
Hooks
Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which “hook into” React state and lifecycle features from function components.
Get Sourav Das Shovon’s stories in your inbox
Join Medium for free to get updates from this writer.
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.
