Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building API Driven React Applications
Search
scottradcliff
March 16, 2018
Programming
0
140
Building API Driven React Applications
A look at some best practices for APIs in React apps
scottradcliff
March 16, 2018
Tweet
Share
More Decks by scottradcliff
See All by scottradcliff
Working Remote: What Works, What Doesn't, and Where to go From Here
scottradcliff
0
46
Teaching Programmers Through Empathy
scottradcliff
0
440
Other Decks in Programming
See All in Programming
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
640
Hanami and htmx
bkuhlmann
0
200
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
6
880
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
620
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Rethinking UI building strategies @ SFI 2024
letelete
0
270
Snowflakeで眠ったデータを起こそう!
estie
0
110
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
810
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Site Reliability Engineering for GMO
pyama86
7
1k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
The Cult of Friendly URLs
andyhume
74
5.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Fireside Chat
paigeccino
20
2.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
344
19k
Faster Mobile Websites
deanohume
298
30k
Web development in the modern age
philhawksworth
202
10k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Navigating Team Friction
lara
177
13k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Transcript
API Driven React Applications
Security Speed Change API Design
Tools
mkdir react-talk-app cd react-talk-app mkdir server mkdir client
react-talk-app |—client |—server
create-react-app create-react-app client
client/ |-.gitignore |- README.md |- node_modules/ |- package.json |- public/
|- src/ |- yarn.lock
Components
import React, { Component } from ‘react'; import axios from
'axios'; import Product from ‘./Product’; class App extends Component { constructor() { super(); this.state = { products: []}; } componentWillMount() { axios.get(‘/api/v1/products’, headers: { Authorization: api_token}) .then(response => { this.setState({ products: response.data.products, }); }) .catch(error => alert(error)) } render() { return ( <div> {this.state.products.map(product => { return <Product product={product} /> }) } </div> ); } } const compassModulesContainerElement = document.getElementById('compass-modules'); export default CompassModulesContainer; if (compassModulesContainerElement) { ReactDOM.render(<CompassModulesContainer />, compassModulesContainerElement); }
import React, { Component } from ‘react'; import axios from
'axios'; import Product from ‘./Product’; class App extends Component { constructor() { super(); this.state = { products: []}; } componentWillMount() { axios.get(‘/api/v1/products’) .then(response => { this.setState({ products: response.data.products, }); }) .catch(error => alert(error)) } render() { return ( <div> {this.state.products.map(product => { return <Product product={product} /> }) } </div> ); } } const compassModulesContainerElement = document.getElementById('compass-modules'); export default CompassModulesContainer; if (compassModulesContainerElement) { ReactDOM.render(<CompassModulesContainer />, compassModulesContainerElement); }
import React, { Component } from ‘react'; import axios from
'axios'; import Product from ‘./Product’;
import React, { Component } from ‘react'; import axios from
'axios'; import Product from ‘./Product’; class App extends Component { constructor() { super(); this.state = { products: []}; } componentWillMount() { axios.get(‘/api/v1/products’, headers: { Authorization: api_token }) .then(response => { this.setState({ products: response.data.products, }); }) .catch(error => alert(error)) } render() { return ( <div> {this.state.products.map(product => { return <Product product={product} /> }) } </div> ); } } const compassModulesContainerElement = document.getElementById('compass-modules'); export default CompassModulesContainer; if (compassModulesContainerElement) { ReactDOM.render(<CompassModulesContainer />, compassModulesContainerElement); }
class App extends Component { constructor() { super(); this.state =
{ products: []}; } componentWillMount() { axios.get(‘/api/v1/products’, headers: { Authorization: api_token }) .then(response => { this.setState({ products: response.data.products, }); }) .catch(error => alert(error)) }
import React, { Component } from ‘react'; import axios from
'axios'; import Product from ‘./Product’; class App extends Component { constructor() { super(); this.state = { products: []}; } componentWillMount() { axios.get(‘/api/v1/products’, headers: { Authorization: api_token }) .then(response => { this.setState({ products: response.data.products, }); }) .catch(error => alert(error)) } render() { return ( <div> {this.state.products.map(product => { return <Product product={product} /> }) } </div> ); } } const compassModulesContainerElement = document.getElementById('compass-modules'); export default CompassModulesContainer; if (compassModulesContainerElement) { ReactDOM.render(<CompassModulesContainer />, compassModulesContainerElement); }
render() { return ( <div> {this.state.products.map(product => { return <Product
product={product} /> }) } </div> ); } }
rails —api rails new server —api
server |- Gemfile |- Gemfile.lock |- README.md |- Rakefile |-
app/ |- bin/ |- config/ |- config.ru |- db …
Security
componentWillMount() { axios.get(‘/api/v1/products’, headers: { Authorization: api_token }) .then(response =>
{ this.setState({ products: response.data.products, }); }) .catch(error => alert(error)) }
class ApplicationController < ActionController::API def current_user Account.find_by(api_token: request.authorization) end end
module Api module V1 class ProductsController < ApplicationController def index
if current_user @products = Product.all render json: @products, status: 200 end end end end end
[ {id: 1, sku: “sku-1234”, price: 1200}, {id: 2, sku:
“sku-4321” price: 1300} ]
Active Model Serializers class ProductSerializer < ActiveModel::Serializer attributes :id, :name,
:sku, :price has_many :images end
Speed
module Api module V1 class ProductsController < ApplicationController def index
if current_user @products = Product.all render json: @products, include: :images, status: 200 end end end end end
[ {id: 1, sku: “sku-1234”, price: 1200, images: [ {id:1,
url: “someplace.jpg”}, {id: 2, url: “someotherplace.jpg”]}, {id: 2, sku: “sku-4321” price: 1300} ]
Change
Namespaces Rails.application.routes.draw do namespace :api do namespace :v1 do resources
:products end end end
Thanks! Scott Radcliff Freelance Software Developer scottradcliff.com @scottradcliff
[email protected]