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)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at react.dev after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Dev.to Articles for Your Portfolio

Integrate the articles of your Dev.to profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the Dev.to API: How to Fetch Your Dev.to Articles for Your Portfolio with React