What is React?
- A front-end framework
- JavaScript library for building user interfaces
- Developed at Facebook
- Based on reusable ‘view components’
- Components encapsulate logic, HTML and CSS
- Make is easier to build modular applications
- Takes the ‘separation of concerns’’ goal and flips it.
Why Use React?
- Powerful and popular - won’t go anywhere soon
- Makes it faster and easier to build applications
- ‘Lightweight’
- Increases app performance
- uses virtual DOM - React selectively renders subtree of DOM based on state changes.
- React handles updating the actual DOM
- Figuring out which changes need to be made to keep everything updated is called reconciliation.
Multi Page Web Design vs Single Page Design
Traditional web design can be referred to as multi page web design because with each request for information, each click on a new url, a whole new page is fetched from the server. If an event causes a change in the page, the browser renders a whole new page.
React, and other modern web frameworks, follows a single page design where complex UI's are represented as reusable components. Updates are made by only re-rendering the changed components. If a price for one item on the page changes, only the price component is updated. This is accomplished because React maintains a virtual DOM in memory. React handles DOM manipulation. Only the affected component is updated on changes, improving performance as updates are optimized, only the targeted component is modified - not the entire page. The user enjoys a more seamless user experience.
Read this article for a great explanation on the differences, pros and cons, and use cases for Single Page Apps vs Multi Page Apps
Who Uses React?
- Airbnb
- Netflix
- Discord
- Dropbox
- Twitch
- Codecademy
- GitHub