React JS: History and
Future
"A JavaScript library for building user interfaces.
Developed and maintained by Facebook (Meta).
Focuses on creating reusable UI components.
Roboto Slab
Focuses on creating reusable UI components.
Employs a component-based architecture.
Uses a virtual DOM for efficient updates."
Introduction
Option A
Uses a virtual DOM for efficient updates."
"Born from challenges in maintaining Facebook's
newsfeed.
History of React JS
Initially called FaxJS, created by Jordan Walke in 2011.
Inspired by XHP, a PHP framework.
First deployed on Facebook's newsfeed in 2011.
Key Features and Benefits
Option A
First deployed on Facebook's newsfeed in 2011.
Open-sourced in May 2013."
"2013: React.js open-sourced.
The React Ecosystem
"2013: React.js open-sourced.
2014: React Conf – First React conference.
2015: React Native released.
Future Trends and
Roadmap
2015: React Native released.
2017: React Fiber architecture introduced.
2018: Hooks proposal.
Conclusion
2018: Hooks proposal.
2019: React Hooks released in v16.8.
2022: React 18 released with concurrent features."
React JS: A Journey
Through Time and
Innovation
Option A
2022: React 18 released with concurrent features."
"React creates an in-memory representation of the
DOM.
What is React JS?
Changes are made to the virtual DOM first.
React then calculates the most efficient way to update the
real DOM.
Leads to improved performance and faster rendering.
The Genesis: From FaxJS to
React
Option A
Leads to improved performance and faster rendering.
Minimizes direct manipulation of the real DOM."
"UI is broken down into reusable components.
Key Milestones
"UI is broken down into reusable components.
Each component manages its own state.
Components can be easily composed to create complex UIs.
Virtual DOM
Components can be easily composed to create complex UIs.
Promotes code reusability and maintainability.
Simplifies testing and debugging."
Component-Based
Architecture
Simplifies testing and debugging."
"A syntax extension to JavaScript.
Allows you to write HTML-like structures within JavaScript
JSX: JavaScript XML
Option A
Allows you to write HTML-like structures within JavaScript
code.
Makes component code more readable and maintainable.
Transpiled into standard JavaScript by tools like Babel.
React Native: Mobile
Development
Transpiled into standard JavaScript by tools like Babel.
Not required but highly recommended for React
development."
"Framework for building native mobile apps using
Popular Libraries and Tools
Option A
"Framework for building native mobile apps using
JavaScript and React.
Write once, deploy to both iOS and Android.
Uses native UI components for a native look and feel.
Server-Side Rendering
(SSR) with Next.js
Uses native UI components for a native look and feel.
Enables code sharing between web and mobile apps.
Offers excellent performance and a large community."
React 18 and Concurrent
Features
Offers excellent performance and a large community."
"Redux: State management library.
React Router: Navigation and routing.
Server Components
React Router: Navigation and routing.
Material-UI/Ant Design: UI component libraries.
Axios/Fetch API: Data fetching.
The Future of React Native
Option A
Axios/Fetch API: Data fetching.
Jest/Enzyme: Testing frameworks."
"Next.js is a framework for building React applications
Evolving Best Practices
"Next.js is a framework for building React applications
with SSR.
Improves SEO and initial page load time.
Provides features like automatic code splitting and routing.
React JS: A Bright Future
Ahead
Option A
Provides features like automatic code splitting and routing.
Simplifies building production-ready React applications.
Supports static site generation (SSG) as well."
Key Takeaways
Supports static site generation (SSG) as well."
"Concurrent Rendering: Allows React to interrupt,
pause, resume, or abandon rendering tasks.
Transitions: New API to mark certain state updates as non-
React Popularity
Transitions: New API to mark certain state updates as non-
urgent.
Automatic Batching: React batches multiple state updates
into a single render for better performance.
New Suspense features"
JavaScript Framework
Popularity (2024)
New Suspense features"
"Render React components on the server during the
build process.
React vs Other
Frameworks
Option A
Improve initial page load and SEO.
Allow direct access to backend resources without API
endpoints.
Components don't need to be shipped to the client.
Resources for Learning
More
Components don't need to be shipped to the client.
Simplify data fetching and reduce client-side JavaScript."
"Improved performance with Fabric architecture.
Thank You!
"Improved performance with Fabric architecture.
Enhanced debugging and tooling.
Closer integration with native platforms.
