DEV Community 👩‍💻👨‍💻

Jeremy Woertink
Jeremy Woertink

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

class Home::IndexPage < MainLayout
  def content
    div(id: "app")
  end
end
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Join us at DEV
Yes, this is technically an “ad”, but really we just want to ask if you want to join DEV. We have 900k+ developers reading, posting, and enjoying community, and would love to have you.   Create an account and continue your coding journey.