How to use a custom template in Keystone.js using React?

Question

Tried spending some time researching this but the docs on keystone.js are a little light on this. Googling leads me to some github discussions on implementing React in core Keystone and creating an option in the generator but that work doesn't seem ready yet.

So I think the only option is to manually set a Keystone project as React but I don't have enough info to start down that path. How would I go about using a custom template in Keystone using React?

Perishing

looks like there's a yeoman generator for using react in keystone, does that help? github.com/keystonejs/generator-keystone-react (as far as custom templates go, everything in app/templates is editable) – Cohune

I saw that but it doesn't seem to be what I was expecting. It doesn't have the same generator as the regular application so it doesn't create the modules I wanted to test out like the dashboard features, blog, etc. Basically this loads a hello world and what's more, the template files are still written in jade. I guess I don't understand what this generator is doing. – Perishing

If you're still looking, I've just started migrating from a handlebars generated project to react using github.com/laurenskling/keystone-with-react-engine it's based on the latest yo keystone generator so may make your life easier. I'm finding it relatively straightforward to move my existing .hbs files to .jsx. – Fortissimo

if you are still looking for a solution,here is a series of tutorials on this. https://itnext.io/building-a-node-cms-with-keystonejs-mongo-db-react-and-redux-part-i-ae5958496df2 This tutorials has steps to setup your keystone cms from scratch using keystonejs, react and redux. – Winwaloe

Answer 1

1. To create a new Keystone application with React, run the following commands on your terminal:

   • npm init keystone-app my-app
   • Go to the folder and run npm install underscore --save

2. Then create your queries and mutation in grapgQL.

3. Fetch the data in react with apollo-client or axios

There is a three part tutorial about this:

part1

part2

part3

Carlow