PReact is a lightweight version of React. It is a fast 3kB alternative to React with the same ES6 API. It is the best alternative when performance, speed, and size are a priority, for example in the case of mobile web apps or progressive web apps.
PReact itself is not intended to be a re-implementation of React. A lot of differences are there which are trivial and preact/compat removes them completely. PReact/compat is a thin layer over it that attempts to achieve 100% compatibility with React.
React vs PReact
- Size: Minified and zipped versions of React application is around 80kB, but for PReact it weighs a mere 3kB. This difference alone is huge.
- Features and API: PReact includes only a subset of the React API and not all available features in React.
- Performance: PReact is definitely faster as compared to react.
Features of PReact
- All the power of Virtual DOM components, without the overhead.
- Familiar React API & Patterns: ES6 Class and Functional Components.
- Extensive compatibility via a simple preact/compat alias.
- Support for CSS Modules, LESS, Sass, Stylus; with Autoprefixer.
- A highly optimized diff algorithm and seamless Server-Side Rendering
- In just 4.5kb you get a productive environment (with preact, preact-router & 1.5kb of conditionally-loaded polyfills for fetch & Promise).
Installation
The easiest way to get started with PReact is to install PReact CLI. This simple command-line tool wraps up the best possible Webpack and Babel set-up for you and even keeps you up-to-date as anything changes.
npm install -g preact-cli
Create a new project
Create a project to quick start development.
preact create <template-name> <project-name>
Use any of the official templates to get started with PReact:
- Default: Default templates with all features.
- Simple: Simple template with “Hello World” application.
- Material: Template comes pre-configured with preact-material-components with a small example.
- Netlify CMS: Blog template with a simple and elegant PReact-powered blog that you can edit using Netlify CMS.
- Typescript: Default template implementation in TypeScript.
- Widget: Template comes with a widget to be embedded on another website.
Production Build
npm run build
For more details visit PReact Docs
