React: A JavaScript Library
Overview
React is a declarative JavaScript library developed by Facebook to help developers build user interfaces.
"React is a JavaScript library that lets you build user interfaces out of individual pieces called components, like thumbnails, buttons, sliders, and video controls. React lets you put components together to form entire screens, pages, and applications. React does not prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like Next.js" – react.dev
Prepare
React is maintained by Facebook and has a very strong community of support and resources.
React is used for building user interfaces (UI) and UI components. React is a component-based library which divides the UI into little reusable pieces, making it desirable because of the ease of maintenance. It is used for developing complex and interactive web and mobile UI. Even though React is a library, it is often referred to as a framework because of its behavior and capabilities.
Common Use Cases
- Mobile Applications: Mobile application development leverages the same codebase as the full web application.
- Large-scale Applications: Complex UIs can be developed and combined to create full scale applications.
- Single-page Applications: SPAs produce more responsive user experiences as content is loaded dynamically without requiring the refreshing of the entire page.
- Interactive UIs: React is often used for building interactive UIs with features like real-time updates, animations, and transitions. This can be particularly useful for applications like social media platforms or online marketplaces.
Airbnb, Facebook, Instagram, Netflix, PayPal, Pinterest, Reddit, Salesforce, Uber, Walmart, WhatsApp, and many more use React in production.
Options to React
Here are some options versus React. Each of these have their own strengths and methodologies in building user interfaces.
- Angular – A front-end web application framework.
- Vue – An approachable, performant and versatile
framework for
building web user interfaces.
"Vue is a framework and ecosystem that covers most of the common features needed in frontend development. But the web is extremely diverse – the things you build on the web may vary drastically in form and scale. With that in mind, Vue is designed to be flexible and incrementally adoptable." – vuejs.org
- Svelte – A developer loved web framework
that
compiles your code to tiny, framework-less vanilla JS.
"Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes." - svelte.dev
- Ember – A productive, battle-tested JavaScript
framework
for building modern web applications. It includes everything you need to build rich UIs that work on any device.
"With the plethora of libraries readily available for front-end development, sometimes it can be a little confusing to work with a front-end framework like Ember.js, where everything you need to build an application is already included" – emberjs.com
Activity Instructions
- Using this website Wappalyzer, research the top JavaScript frameworks and libraries.
Wappalyzer provides insights on the technology stack used on websites. It detects content management systems, ecommerce platforms, web frameworks, server software, analytics tools and many more.
- According to Wappalyzer data, which JavaScript framework/library has the most market share?
- Name a company that uses the React framework and one that uses the Svelte framework.
- Post your findings to the general channel of MS Teams.
Submission
- Your post(s) on the course's MS Teams channel is the submission for this activity.