Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/biglovisa/creact
crud in Rails and React | Tutorial
https://github.com/biglovisa/creact
rails react react-rails tutorial
Last synced: about 2 months ago
JSON representation
crud in Rails and React | Tutorial
- Host: GitHub
- URL: https://github.com/biglovisa/creact
- Owner: biglovisa
- Created: 2015-12-01T18:56:55.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-02T22:32:41.000Z (over 7 years ago)
- Last Synced: 2024-06-12T18:09:05.381Z (7 months ago)
- Topics: rails, react, react-rails, tutorial
- Language: Ruby
- Homepage:
- Size: 158 KB
- Stars: 124
- Watchers: 6
- Forks: 42
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Creact
## Crud + React
In this tutorial we are going to clone down a repo with a Rails API and build out a React front end using the [react-rails](https://github.com/reactjs/react-rails) gem. We won't cover the Rails API in detail and it is assumed that you are familiar with the general structure of a Rails project and JavaScript syntax.
### Sections
* [0. Up and running](https://github.com/applegrain/creact/blob/master/README.md#0-up-and-running)
* [1. What's already here?](https://github.com/applegrain/creact/blob/master/README.md#1-whats-already-here)
* [2. Adding React to your Rails project](https://github.com/applegrain/creact/blob/master/README.md#2-adding-react-to-your-rails-project)
* [3. Component Hierarchy](https://github.com/applegrain/creact/blob/master/README.md#3-component-hierarchy)
* [4. Our first React component](https://github.com/applegrain/creact/blob/master/README.md#4-our-first-react-component)
* [5. Hello, Creact!](https://github.com/applegrain/creact/blob/master/README.md#5-hello-creact)
* [6. Rendering all skills](https://github.com/applegrain/creact/blob/master/README.md#6-rendering-all-skills)
* [7. Add a new skill](https://github.com/applegrain/creact/blob/master/README.md#7-add-a-new-skill)
* [8. Delete a skill](https://github.com/applegrain/creact/blob/master/README.md#8-delete-a-skill)
* [9. Edit a skill](https://github.com/applegrain/creact/blob/master/README.md#9-edit-a-skill)
* [10. Updating the level of a skill](https://github.com/applegrain/creact/blob/master/README.md#10-updating-the-level-of-a-skill)
* [11. Refactor](https://github.com/applegrain/creact/blob/master/README.md#11-refactor)
* [12. Filter Skills by Level](https://github.com/applegrain/creact/blob/master/README.md#12-filter-skills-by-level-1)
* [13. You are awesome](https://github.com/applegrain/creact/blob/master/README.md#13-you-are-awesome)
### 0. Up and running
---
In your terminal, clone the project:
```
$ git clone [email protected]:applegrain/creact-starter.git; cd creact-starter
$ bundle install
$ rake db:setup
```
If you were instead to run `$ rake db:{create,migrate,seed}` you might have trouble and get something like `NoMethodError for details=`. This is because when we manually run the `migrate` command, Rails doesn't know that it needs to reset column information on what was just migrated to account for potentially new columns, so it hiccups trying to call methods on those columns. Conversely, the `setup` command includes a step for resetting columns, so we're in the clear to then call methods.
run tests with:
```
$ bundle exec rspec
```
and start the server with:
```
$ bundle exec rails s
```
### 1. What's already here?
---
If you start the server and go to `http://localhost:3000` you'll see an `h1` tag and many skills - each with a name, details and a level set as [enum](http://guides.rubyonrails.org/4_1_release_notes.html#active-record-enums). The seed data doesn't really reflect the fact that it is a skill. Feel free to change the [Faker](https://github.com/stympy/faker) options in `db/seeds.rb`.
In `config/routes.rb` there is already a root path set up. This will be the only route we are going to use. We also have a `app/controllers/site_controller.rb` with an index action that passes the instance variable `@skills` to the view. In the view, `app/views/site/index.html.erb`, we are iterating over `@skills` to render all the skills on the DOM. Later we are going to delete the instance variable in the action and have an almost empty view.
In `config/routes.rb` there is also routes for `Api::V1::Skills`. The json API is already built out with the necessary actions. In `app/controllers/api/v1/skills_controller.rb` we are serving json from four endpoints.
Further resources on building a json API
- [build a json API (code-along)](https://vimeo.com/134915023).
### 2. Adding React to your Rails project
---
[React.js](https://facebook.github.io/react/) is a "JavaScript library for building user interfaces". It's a tiny framework used to build your view layer. React can be used in combination with almost any back end, and can be combined with other front end frameworks as well. React, can be sprinkled in
anywhere in your Rails application. React could be used for a search bar, be part of the nav bar or be used for the whole page.
React is a JavaScript library but fortunately we can use the [react-rails](https://github.com/reactjs/react-rails) gem that enables us to use React and JSX in our Rails application. You'll get more familiar with JSX a bit further down but it's basically the equivalent to erb. It's how we mix JavaScript with HTML - the same way we can mix Ruby with HTML when we use erb.
Add `gem 'react-rails'` to your Gemfile.
```
$ bundle
$ rails g react:install
```
The last command generated a file, created a directory and inserted three lines to our code.
```
$ rails g react:install
create app/assets/javascripts/components
create app/assets/javascripts/components/.gitkeep
insert app/assets/javascripts/application.js
insert app/assets/javascripts/application.js
insert app/assets/javascripts/application.js
create app/assets/javascripts/components.js
```
If you open up `app/assets/javascripts/application.js` you'll see the three lines React inserted.
```
//= require react
//= require react_ujs
//= require components
```
Just like jQuery, we require `react`, `react_ujs` and `components` to the asset pipeline. In `app/assets/javascripts/components.js` we require the directory `components`. It's in this directory where all our React components will live. Think of a component as a type of class, it represents a "unit" of code. We build many small components that we combine to build bigger features.
### 3. Component Hierarchy
---
The notation for rendering React components is: .
Components have parent-child relationships, if component "Cat" renders component "Kitten", "Cat" is the parent of "Kitten". As an example, let's build the component hierarchy for a site with a header, a side bar and tweets:
The main component, ``, will render the `` and `