PHPackages                             alexk/craft-react - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. alexk/craft-react

ActiveCraft-plugin[Templating & Views](/categories/templating)

alexk/craft-react
=================

Client and Server-side React rendering for CraftCMS

1.2.2(7y ago)444.5k9[1 issues](https://github.com/AlexandreKilian/craft-react/issues)1MITPHP

Since May 26Pushed 7y ago4 watchersCompare

[ Source](https://github.com/AlexandreKilian/craft-react)[ Packagist](https://packagist.org/packages/alexk/craft-react)[ RSS](/packages/alexk-craft-react/feed)WikiDiscussions master Synced 3d ago

READMEChangelogDependencies (2)Versions (7)Used By (1)

Craft React
===========

[](#craft-react)

Craft CMS React Renderer lets you implement React.js client and server-side rendering in your Craft CMS projects.

It is an implementation of [ReactBundle](https://github.com/Limenius/ReactRenderer) for CraftCMS. For a complete documentation of the core functionality and client examples, as well as problems related to the Renderer itself, please check out [ReactBundle](https://github.com/Limenius/ReactRenderer) or [Symfony React Sandbox](https://github.com/Limenius/symfony-react-sandbox).

Why Server-Side rendering?
--------------------------

[](#why-server-side-rendering)

By rendering your react components on the server, you not only increase performance and search engine readability for SEO but also enable users with slower connections to be able to access your information before your client bundle has completely loaded.

How it works
------------

[](#how-it-works)

Please checkout the [Walkthrough](https://github.com/Limenius/symfony-react-sandbox#walkthrough) for a step by step explanation of the client and twig-side of this plugin. For a JSON-API, we recommend [Elements API for Craft CMS](https://github.com/craftcms/element-api).

Installation
------------

[](#installation)

To install the plugin, follow these instructions:

1. Open your terminal and go to your Craft project:

    ```
     cd /path/to/project

    ```
2. Then tell Composer to load the plugin:

    ```
     composer require alexk/craft-react

    ```

In the Control Panel, go to Settings → Plugins and click the “Install” button for Craft React.

Setup
-----

[](#setup)

In the plugin settings, add the following entries:

`Environment: "client_side", "server_side" or "both"`

`Server Bundle: "PATH_TO_SERVER_BUNDLE"`

or override the settings globally in `config/react.php`

```