React and Preact are JavaScript libraries for building user interfaces. While React is the original, more popular library created by Facebook, Preact is a smaller, faster alternative that aims to be compatible with React's API. Preact offers similar features but with a much smaller file size (3KB vs React's ~40KB), making it great for projects where size matters.
Both Preact and React are virtual DOM libraries that provide efficient rendering and updating of UI components. However, React has a more comprehensive set of features, including a built-in context API, hooks, and a more extensive ecosystem of third-party libraries. Preact, on the other hand, is a lightweight alternative that focuses on performance and simplicity.
Both Preact and React have excellent TypeScript support, with official type definitions and extensive documentation.
Both libraries support modern browsers, including Chrome, Firefox, Safari, and Edge. However, React has better support for older browsers, including Internet Explorer.
Preact has no dependencies, while React depends on the react-dom package.
Preact is generally faster and more lightweight than React, thanks to its smaller bundle size and optimized rendering engine.
Both Preact and React are compatible with popular frameworks like Next.js, Gatsby, and Create React App.
React has a much larger and more active community, with more contributors, issues, and pull requests on GitHub.
Both libraries have high-quality documentation, with extensive guides, tutorials, and API references.
React is maintained by Facebook, while Preact is maintained by a smaller team of developers. However, both libraries are actively maintained and updated regularly.
1import { h, render } from 'preact';
2
3function App() {
4 return <h1>Hello, World!</h1>;
5}
6
7render(<App />, document.body);
This code creates a simple 'Hello World' application using Preact. We import the `h` function for creating virtual DOM elements and the `render` function for rendering the application to the DOM.
1import React from 'react';
2import ReactDOM from 'react-dom';
3
4function App() {
5 return <h1>Hello, World!</h1>;
6}
7
8ReactDOM.render(<App />, document.getElementById('root'));
This code creates a simple 'Hello World' application using React. We import the `React` library and the `ReactDOM` library for rendering the application to the DOM.
Both Preact and React are excellent choices for building fast and efficient UI components. However, Preact is a better choice for performance-critical applications, while React is a better choice for complex, enterprise-level applications.
Solid is a JavaScript framework that looks very similar to React but runs much faster. It uses the same JSX syntax that React developers already know, but works differently under the hood.
If you know React, Solid will feel very familiar. It's perfect for React developers who want better performance without learning totally new concepts. The code looks almost the same as React.
Frontend FrameworkVue is a progressive JavaScript framework for building user interfaces. It's designed to be easy to learn and use, with a gentle learning curve and excellent documentation.
Like React and Preact, Vue lets you build websites using components. It's often easier for beginners to learn than React, and it's very fast. Many developers find Vue's syntax more straightforward and less confusing.
Frontend FrameworkInferno is an extremely fast, React-like library for building user interfaces. It's designed to be super quick and small in file size, while keeping many React features that developers love.
Inferno is almost a drop-in replacement for React, especially good for projects that need to be really fast and small. It works with most React code with only small changes needed.
Frontend FrameworkSvelte is a modern framework that turns your components into highly optimized JavaScript at build time. Instead of using a virtual DOM like React, it updates the page directly when your data changes.
Svelte is great for developers who want React-like components but with better performance. It has less code to write and is becoming very popular because it's simple to understand.
Frontend FrameworkAll the power of Virtual DOM components, without the overhead:
You can find some awesome libraries in the awesome-preact list :sunglasses:
💁 Note: You don't need ES2015 to use Preact... but give it a try!
With Preact, you create user interfaces by assembling trees of components and elements. Components are functions or classes that return a description of what their tree should output. These descriptions are typically written in JSX (shown underneath), or HTM which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with "props" (similar to HTML attributes) and children.
To get started using Preact, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument. Future calls to render() will reuse the existing tree and update it in-place in the DOM. Internally, render() will calculate the difference from previous outputted structures in an attempt to perform as few DOM operations as possible.
import { h, render } from 'preact'; // Tells babel to use h for JSX. It's better to configure this globally. // See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage // In tsconfig you can specify this with the jsxFactory /** @jsx h */ // create our tree and append it to document.body: render( <main> <h1>Hello</h1> </main>, document.body ); // update the tree in-place: render( <main> <h1>Hello World!</h1> </main>, document.body ); // ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>
Hooray! render() has taken our structure and output a User Interface! This approach demonstrates a simple case, but would be difficult to use as an application grows in complexity. Each change would be forced to calculate the difference between the current and updated structure for the entire application. Components can help here – by dividing the User Interface into nested Components each can calculate their difference from their mounted point. Here's an example:
import { render, h } from 'preact'; import { useState } from 'preact/hooks'; /** @jsx h */ const App = () => { const [input, setInput] = useState(''); return ( <div> <p>Do you agree to the statement: "Preact is awesome"?</p> <input value={input} onInput={e => setInput(e.target.value)} /> </div> ); }; render(<App />, document.body);
Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]
<a href="https://opencollective.com/preact/sponsor/0/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/1/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/2/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/3/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/4/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/4/avatar.svg"></a> <a href="https://snyk.co/preact" target="_blank"><img src="https://res.cloudinary.com/snyk/image/upload/snyk-marketingui/brand-logos/wordmark-logo-color.svg" width="192" height="64"></a> <a href="https://opencollective.com/preact/sponsor/5/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/6/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/7/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/8/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/9/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/10/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/10/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/11/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/11/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/12/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/12/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/13/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/13/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/14/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/14/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/15/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/15/avatar.svg"></a> <a href="https://github.com/guardian" target="_blank"> <img src="https://github.com/guardian.png" width="64" height="64"> </a> <a href="https://opencollective.com/preact/sponsor/16/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/16/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/17/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/17/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/18/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/18/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/19/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/19/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/20/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/20/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/21/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/21/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/22/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/22/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/23/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/23/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/24/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/24/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/25/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/25/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/26/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/26/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/27/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/27/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/28/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/28/avatar.svg"></a> <a href="https://opencollective.com/preact/sponsor/29/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/29/avatar.svg"></a>
Support us with a monthly donation and help us continue our activities. [Become a backer]
<a href="https://opencollective.com/preact/backer/0/website" target="_blank"><img src="https://opencollective.com/preact/backer/0/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/1/website" target="_blank"><img src="https://opencollective.com/preact/backer/1/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/2/website" target="_blank"><img src="https://opencollective.com/preact/backer/2/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/3/website" target="_blank"><img src="https://opencollective.com/preact/backer/3/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/4/website" target="_blank"><img src="https://opencollective.com/preact/backer/4/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/5/website" target="_blank"><img src="https://opencollective.com/preact/backer/5/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/6/website" target="_blank"><img src="https://opencollective.com/preact/backer/6/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/7/website" target="_blank"><img src="https://opencollective.com/preact/backer/7/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/8/website" target="_blank"><img src="https://opencollective.com/preact/backer/8/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/9/website" target="_blank"><img src="https://opencollective.com/preact/backer/9/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/10/website" target="_blank"><img src="https://opencollective.com/preact/backer/10/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/11/website" target="_blank"><img src="https://opencollective.com/preact/backer/11/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/12/website" target="_blank"><img src="https://opencollective.com/preact/backer/12/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/13/website" target="_blank"><img src="https://opencollective.com/preact/backer/13/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/14/website" target="_blank"><img src="https://opencollective.com/preact/backer/14/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/15/website" target="_blank"><img src="https://opencollective.com/preact/backer/15/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/16/website" target="_blank"><img src="https://opencollective.com/preact/backer/16/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/17/website" target="_blank"><img src="https://opencollective.com/preact/backer/17/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/18/website" target="_blank"><img src="https://opencollective.com/preact/backer/18/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/19/website" target="_blank"><img src="https://opencollective.com/preact/backer/19/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/20/website" target="_blank"><img src="https://opencollective.com/preact/backer/20/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/21/website" target="_blank"><img src="https://opencollective.com/preact/backer/21/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/22/website" target="_blank"><img src="https://opencollective.com/preact/backer/22/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/23/website" target="_blank"><img src="https://opencollective.com/preact/backer/23/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/24/website" target="_blank"><img src="https://opencollective.com/preact/backer/24/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/25/website" target="_blank"><img src="https://opencollective.com/preact/backer/25/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/26/website" target="_blank"><img src="https://opencollective.com/preact/backer/26/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/27/website" target="_blank"><img src="https://opencollective.com/preact/backer/27/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/28/website" target="_blank"><img src="https://opencollective.com/preact/backer/28/avatar.svg"></a> <a href="https://opencollective.com/preact/backer/29/website" target="_blank"><img src="https://opencollective.com/preact/backer/29/avatar.svg"></a>
MIT
LUCI (go) (GitHub mirror)
Serve geographic data from R and consume with scalable front end.
✨ Utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles
Node/React/Redux blog. Dockerized, Isomorphic, has Auth. Will be decentralized.
Visual Studio Code SPARQL Notebook Extension