I created a step-by-step tutorial demonstrating how to integrate React with Ruby on Rails

by

- [Live Demo](https://rails-react-example.herokuapp.com/)
- [Tutorial](https://stevepolito.design/blog/rails-react-tutorial/)

I really wanted to learn React and API development, so I went head first into building a simple application, and documented my experience. I think what sets this apart from other Rails and React tutorials is that I cover...

- API authorization
- API versioning
- Setting HTTP status codes
- Form validation on the front-end
- Handling errors
- Debouncing requests
- CSRF Countermeasures

8 thoughts on “I created a step-by-step tutorial demonstrating how to integrate React with Ruby on Rails”

  4. Wow! Definitely on of the best step-by-step guides I’ve worked myself through.

    I totally liked the way how you build up things and refactor them later with new functions. Its not the typical “I throw all my code into one example”.

    Another thing I really like is how you give advices to provoke errors. It felt pretty much like working on a thing I could seriously put to production.

    **Thank you very much!**

    On thing I noticed is that one Code example highlighted the wrong lines of code for a new addition. The export line is highlighted instead of the propTypes definition.

    ​

    };
    export default ErrorMessage;

    ErrorMessage.propTypes = {
    errorMessage: PropTypes.object.isRequired
    };

    **—**

    I am really interested now how to organise a react project, there is a lot of state in TodoApp which feels fine for your example but I cant image that this is typical when your applications grows. Maybe someone can share some opinions about that or maybe guide me to a post about growing React apps 🙂

    Reply

  8. great stuff, next level tutorial.

    consider adding additional formats to it. for example keep the original version, but also consider breaking it up into a multi-part tutorial. the various formats could help reach a larger audience.

    ping me if you’d like to brainstorm on other ideas.

    Reply

Leave a Comment