PReact – An alternative to REACT

Reading Time: 2 minutes

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.
PREACT Benchmarks 1.0.0

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

Knoldus Footer

Written by 

Rudar Daman Singla is the Trainee Software Consultant at Knoldus Software LLP. He has done B.Tech. from Jaypee University of Information technology, Waknaghat(Solan). He has good knowledge of languages C, C++, Java, Scala, HTML, CSS, PHP, Node and Angular. He is also interested in VFX. As a fresher, he always tries to explore the different type of software and tools.

Leave a Reply