/react-recipe

A React recipe for the Amber Framework.

Primary LanguageJavaScriptMIT LicenseMIT

reactive-amber

The Speed and Performance of Amber with the power of React


Reactive Amber

The goal of the Reactive Amber recipe is to quickly provide a full stack solution that takes full advantages of the best parts of development using a frontend framework (in the way it was designed to be used), with a powerful backend API.

The intention is to break away from the traditional Rails-y MVC model, without requiring developers to write completely separate frontend/backend codebases.


Creating a Project

To create your project with the Reactive Amber recipe, you will need to run the following command:

amber new <your app name> -r progressive-amber/react-recipe

You may also want to specify your database (default is Postgres) by adding the -d tag:

amber new <your app name> -r progressive-amber/react-recipe -d <pg | mysql | sqlite>

Once your app has been created, you will want to run

cd <your app name>
amber w

Your application will be running on localhost:9090.


File Structure

With this recipe, we have modularized the file structure to isolate your React frontend from your Amber API.

|- bin
|- config
|- db
|- frontend-react   // React file tree structure.
    |- src
        |- assets
        |- components
            |- HelloAmber
                |- index.css
                |- index.js
            |- HelloReact
                |- index.css
                |- index.js
        |- App.css
        |- App.js
    |- index.css
    |- index.js   // WebPack entry point

|- lib
|- public
|- spec
|- src
    |- controllers
        |- application_controller.cr   // Rendering method for root in application_controller.cr

    |- locales
    |- models
    |- views
        |- layouts
        |- application
            |- application.slang   // Location of the #root <div> React will render to.

CLI

This section needs an update. In the meantime, see CLI docs.


Documentation

For any questions specific to the React or Amber frameworks, please feel free to refer to their excellent documentation below:


DevTools

When developing React applications, it is highly recommended to use the React devtools. Currently only FireFox and Chrome have support for the devtools extension. Their links are provided below:

You can also use the standalone react-devtools for any enviornment:


License

This project is licensed under the MIT License - see the LICENSE file for details