Merge branch 'master' of https://github.com/johncorderox/Rails-API-React-Tutorial

Author: johncorderox

README.md

@@ -9,11 +9,11 @@ and Rails 5 in a Virtual Box, React JS via create-react-app and connecting the f
 
 ## Table of Contents
 
-- Downloading Virtual Box
-- Downloading create-react-app
-- Creating a Rails API
-- Create a react frontend
-- Connect the API with React
+- [Downloading Virtual Box](#downloading-virtual-box)
+- [Downloading create-react-app](#downloading-create-react-app)
+- [Creating a Rails API](#rails-api)
+- [Create a react frontend](#create-a-react-frontend)
+- [Connect the API with React](#downloading-react-into-our-project)
 
 ## Downloading Virtual Box
 
@@ -248,7 +248,7 @@ which allows us to call the json data from `localhost:3000/api/v1/movies`
 
 6.  Let's seed our sqlite database with some classic movies so we can practice getting data with GET requests to the API.
 
-Copy and paste the following data to your `config/seeds.rb` file.
+Copy and paste the following data to your `db/seeds.rb` file.
 
 ```ruby
 Movie.create(name: "The Nightmare Before Christmas", rating: 5)
@@ -450,8 +450,81 @@ class Button extends Component {
 export default Button;
 ```
 
+7. Finally, let's open our ```App.js``` file in the /src directory to add our new Button Component to the App itself. Check below to see the example. Don't forget that we need to enclose the ```<Button />``` in two ```<div></div>``` tags!
+```javascript
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+import Button from './components/Button';
+
+class App extends Component {
+  render() {
+    return (
+      <div>
+      <Button />
+      </div>
+    );
+  }
+}
+
+export default App;
+```
+
 This should be everything we need to setup the API. Simply click our test api call button and see the magic work!
 
-<a href="http://tinypic.com?ref=ere5n5" target="_blank"><img src="http://i68.tinypic.com/ere5n5.png" height="300" width="310" border="0" alt="Image and video hosting by TinyPic"></a>
+Congratulations! Our Rails API and React Client is done!
+
+
+## Rails Serializers
+
+What are Serializers? Well Rails API's returns JSON data in full, so serializers allows us to cherry pick the exact data we want in a much organized fashion. Instead of getting every column from the returned data, we can grab which ever we allow to pass through.
+
+| Normal Model        | Serializer Model    | 
+| ------------- |:-------------:|
+| id, name, rating, director, score, actors_id, created_at, updated_at| id, name, rating|
+
+We are able to tell the Rails API what to fetch rather than the frontend; making it much more simple and faster to scaffold your next project.
+
+1. Installation
+
+Open your ```gemfile``` and add the serializer gem into your project. Don't forget to ```bundle install``` !
+```ruby
+# Serializer
+gem 'active_model_serializers'
+``` 
+
+We want to create a clone of any current model we have so when we make requests in the backend, the request will read the serializer file <strong>first</strong>, then it will find the rails model/controller to finisht the request. We have a model called Movie so we'll duplicate that by running:
+
+```
+rails g serializer movie
+```
+You can see that a new directory was made in the ```app/``` directory and we now have ```app/serializers/movie_serializer``` file in our project. 
+
+Let's open that file and see what we have: 
+```ruby
+class MovieSerializer < ActiveModel::Serializer
+  attributes :id
+end
+
+```
+
+We have our Movie Class inheriting from the serializer class on the first line, and the returned attribute on the second. So far the default returned attribute is just an ID. Let's test this now!
+
+1a. Turn on your rails server and go to the url ``` localhost:3000/api/v1/movies ```
+
+You should see that only the ```id``` attribute is being returned from the database. 
+```json
+{
+id: 1
+},
+{
+id: 2
+},
+{
+id: 3
+}
+```
+
+You can add any attribute to your liking to the serializer file for your next big project. But that's the end of the serializer section! 
 
-### Congratulations! Our Rails API and React Client is done!

TODO.md

@@ -0,0 +1,4 @@
+# TO DO 
+
+1. JWT
+2. Rack::Attack