Quick start with React on Lucky

This will be a quick start in to getting some simple React code with minimal setup in to a simple Lucky app also with minimal setup.

Step 1, setup lucky

Make sure you have lucky installed locally. You can check out the installation guide for getting that installed.

Once that's installed, we can generate our app!

$ lucky init
Project name? simple_react_on_lucky

Lucky can generate different types of projects

...

API only or full support for HTML and Webpack? (api/full): full

Lucky can be generated with email and password authentication

...

Generate authentication? (y/n): n

----------------------------

Done generating your Lucky project

  ▸ cd into simple_react_on_lucky
  ▸ check database settings in config/database.cr
  ▸ run bin/setup
  ▸ run lucky dev to start the server

Run those last few steps that lucky tells you to run, and then your app will be setup.

Step 2, add in react

Next we need to add react to our app.

yarn add react
yarn add react-dom

Step 3, make a page to use react

Now we need a page where we can write some code to mount our react app. We will just make a simple home page to override lucky's default home page.

Open up src/actions/home/index.cr

# change
render Lucky::WelcomePage
# to
render Home::IndexPage

Now create a new src/pages/home/index_page.cr file.

class Home::IndexPage < MainLayout
  def content
    div(id: "app")
  end
end

Step 4, write some react

Open up src/js/app.js and add in your react imports. You'll see some code in there already, you can just add this stuff below that. Worry about whether you need that existing code or not later.

import React from 'react';
import ReactDOM from 'react-dom';

const mountElement = document.getElementById('app');

class App extends React.Component {
  render() {
    return React.createElement('h1', null, 'WOOT!');
  }
}

ReactDOM.render(React.createElement(App), mountElement);

Now run lucky dev in your terminal, and provided we didn't screw anything up, you should see "WOOT!" on your home page now!

Obviously you'll want to add a lot more code for a real app, and using the React.createElement functions will get super messy. This should at least give you a jumping point on how you can start working React in to your Lucky applications.

You can also take a look at this post by @mikeeus on some more Lucky and React.