Submit Search
Upload
Building React CRUD app in minutes?
•
0 likes
•
3,461 views
Tomasz Bak
Follow
Whoever creates a great Redux CRUD example will score a ton of Open Source Credits
Read less
Read more
Software
Report
Share
Report
Share
1 of 15
Download now
Download to read offline
Recommended
Progressive Web Apps 101
Progressive Web Apps 101
Muhammad Samu
Building Offline Ready and Installable Web App
Building Offline Ready and Installable Web App
Muhammad Samu
The WordPress developer's toolkit
The WordPress developer's toolkit
Ivelina Dimova
Dev Basics: The ASP.NET Page Life Cycle
Dev Basics: The ASP.NET Page Life Cycle
Jay Harris
Asp.net life cycle in depth
Asp.net life cycle in depth
sonia merchant
M S Ajax Client Life Cycle Events
M S Ajax Client Life Cycle Events
51 lecture
Spring boot
Spring boot
jacob benny john
Wordpress multisite
Wordpress multisite
Plasterdog Web Design
Recommended
Progressive Web Apps 101
Progressive Web Apps 101
Muhammad Samu
Building Offline Ready and Installable Web App
Building Offline Ready and Installable Web App
Muhammad Samu
The WordPress developer's toolkit
The WordPress developer's toolkit
Ivelina Dimova
Dev Basics: The ASP.NET Page Life Cycle
Dev Basics: The ASP.NET Page Life Cycle
Jay Harris
Asp.net life cycle in depth
Asp.net life cycle in depth
sonia merchant
M S Ajax Client Life Cycle Events
M S Ajax Client Life Cycle Events
51 lecture
Spring boot
Spring boot
jacob benny john
Wordpress multisite
Wordpress multisite
Plasterdog Web Design
Spring Boot and REST API
Spring Boot and REST API
07.pallav
WordPress 2017 with VueJS and GraphQL
WordPress 2017 with VueJS and GraphQL
houzman
Introduction to VueJS & The WordPress REST API
Introduction to VueJS & The WordPress REST API
Caldera Labs
Red Hat and Oracle: Delivering on the Promise of Interoperability in Java EE 7
Red Hat and Oracle: Delivering on the Promise of Interoperability in Java EE 7
Max Andersen
ASP.NET Page Life Cycle
ASP.NET Page Life Cycle
Abhishek Sur
Service workers
Service workers
jungkees
Deploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App Engine
Alexander Zamkovyi
Xke spring boot
Xke spring boot
sourabh aggarwal
Sails.js Intro
Sails.js Intro
Nicholas Jansma
How to customize Spring Boot?
How to customize Spring Boot?
GilWon Oh
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
Chris Love
Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.
Eng Chrispinus Onyancha
Spring Boot Showcase
Spring Boot Showcase
Naphachara Rattanawilai
WSO2 Italia Open Break Session #2 - Microgateway
WSO2 Italia Open Break Session #2 - Microgateway
Profesia Srl, Lynx Group
Slim3 quick start
Slim3 quick start
Guangyao Cao
Spring boot introduction
Spring boot introduction
Rasheed Waraich
How to deploy and run mule in docker
How to deploy and run mule in docker
Ravi Prakash Singh
Maven: Mule esb plugin
Maven: Mule esb plugin
StrawhatLuffy11
Play Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity Stack
Marcin Stepien
Spring Boot
Spring Boot
Pei-Tang Huang
How to implement multiple layouts using React router V4.pptx
How to implement multiple layouts using React router V4.pptx
BOSC Tech Labs
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
Antônio Roberto Silva
More Related Content
What's hot
Spring Boot and REST API
Spring Boot and REST API
07.pallav
WordPress 2017 with VueJS and GraphQL
WordPress 2017 with VueJS and GraphQL
houzman
Introduction to VueJS & The WordPress REST API
Introduction to VueJS & The WordPress REST API
Caldera Labs
Red Hat and Oracle: Delivering on the Promise of Interoperability in Java EE 7
Red Hat and Oracle: Delivering on the Promise of Interoperability in Java EE 7
Max Andersen
ASP.NET Page Life Cycle
ASP.NET Page Life Cycle
Abhishek Sur
Service workers
Service workers
jungkees
Deploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App Engine
Alexander Zamkovyi
Xke spring boot
Xke spring boot
sourabh aggarwal
Sails.js Intro
Sails.js Intro
Nicholas Jansma
How to customize Spring Boot?
How to customize Spring Boot?
GilWon Oh
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
Chris Love
Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.
Eng Chrispinus Onyancha
Spring Boot Showcase
Spring Boot Showcase
Naphachara Rattanawilai
WSO2 Italia Open Break Session #2 - Microgateway
WSO2 Italia Open Break Session #2 - Microgateway
Profesia Srl, Lynx Group
Slim3 quick start
Slim3 quick start
Guangyao Cao
Spring boot introduction
Spring boot introduction
Rasheed Waraich
How to deploy and run mule in docker
How to deploy and run mule in docker
Ravi Prakash Singh
Maven: Mule esb plugin
Maven: Mule esb plugin
StrawhatLuffy11
Play Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity Stack
Marcin Stepien
Spring Boot
Spring Boot
Pei-Tang Huang
What's hot
(20)
Spring Boot and REST API
Spring Boot and REST API
WordPress 2017 with VueJS and GraphQL
WordPress 2017 with VueJS and GraphQL
Introduction to VueJS & The WordPress REST API
Introduction to VueJS & The WordPress REST API
Red Hat and Oracle: Delivering on the Promise of Interoperability in Java EE 7
Red Hat and Oracle: Delivering on the Promise of Interoperability in Java EE 7
ASP.NET Page Life Cycle
ASP.NET Page Life Cycle
Service workers
Service workers
Deploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App Engine
Xke spring boot
Xke spring boot
Sails.js Intro
Sails.js Intro
How to customize Spring Boot?
How to customize Spring Boot?
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.
Spring Boot Showcase
Spring Boot Showcase
WSO2 Italia Open Break Session #2 - Microgateway
WSO2 Italia Open Break Session #2 - Microgateway
Slim3 quick start
Slim3 quick start
Spring boot introduction
Spring boot introduction
How to deploy and run mule in docker
How to deploy and run mule in docker
Maven: Mule esb plugin
Maven: Mule esb plugin
Play Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity Stack
Spring Boot
Spring Boot
Similar to Building React CRUD app in minutes?
How to implement multiple layouts using React router V4.pptx
How to implement multiple layouts using React router V4.pptx
BOSC Tech Labs
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
Antônio Roberto Silva
Let's react - Meetup
Let's react - Meetup
RAJNISH KATHAROTIYA
Redux. From twitter hype to production
Redux. From twitter hype to production
Jenya Terpil
AWS Application Migration Service-Hands-On Guide
AWS Application Migration Service-Hands-On Guide
Manas Mondal
React js
React js
Rajesh Kolla
Introduction to React for Frontend Developers
Introduction to React for Frontend Developers
Sergio Nakamura
Redux. From twitter hype to production
Redux. From twitter hype to production
FDConf
Monitoring and Maintaining SharePoint 2013 Server
Monitoring and Maintaining SharePoint 2013 Server
Learning SharePoint
Zend Framework Foundations
Zend Framework Foundations
Chuck Reeves
The Query Rewrite Plugin Interface: Writing Your Own Plugin
The Query Rewrite Plugin Interface: Writing Your Own Plugin
MartinHanssonOracle
Progressive web apps
Progressive web apps
Fastly
WP REST API - Building a simple Web Application
WP REST API - Building a simple Web Application
Edmund Chan
Redux at scale
Redux at scale
inovia
10 tips for Redux at scale
10 tips for Redux at scale
inovia
Server side rendering with React and Symfony
Server side rendering with React and Symfony
Ignacio Martín
Pyramid deployment
Pyramid deployment
Carlos de la Guardia
Pyramid Deployment and Maintenance
Pyramid Deployment and Maintenance
Jazkarta, Inc.
Active Admin
Active Admin
Greg Bell
React Redux AntD and Umi js
React Redux AntD and Umi js
Isuru Samaraweera
Similar to Building React CRUD app in minutes?
(20)
How to implement multiple layouts using React router V4.pptx
How to implement multiple layouts using React router V4.pptx
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
Let's react - Meetup
Let's react - Meetup
Redux. From twitter hype to production
Redux. From twitter hype to production
AWS Application Migration Service-Hands-On Guide
AWS Application Migration Service-Hands-On Guide
React js
React js
Introduction to React for Frontend Developers
Introduction to React for Frontend Developers
Redux. From twitter hype to production
Redux. From twitter hype to production
Monitoring and Maintaining SharePoint 2013 Server
Monitoring and Maintaining SharePoint 2013 Server
Zend Framework Foundations
Zend Framework Foundations
The Query Rewrite Plugin Interface: Writing Your Own Plugin
The Query Rewrite Plugin Interface: Writing Your Own Plugin
Progressive web apps
Progressive web apps
WP REST API - Building a simple Web Application
WP REST API - Building a simple Web Application
Redux at scale
Redux at scale
10 tips for Redux at scale
10 tips for Redux at scale
Server side rendering with React and Symfony
Server side rendering with React and Symfony
Pyramid deployment
Pyramid deployment
Pyramid Deployment and Maintenance
Pyramid Deployment and Maintenance
Active Admin
Active Admin
React Redux AntD and Umi js
React Redux AntD and Umi js
More from Tomasz Bak
Design Patterns in React
Design Patterns in React
Tomasz Bak
How to migrate large project from Angular to React
How to migrate large project from Angular to React
Tomasz Bak
JAMstack
JAMstack
Tomasz Bak
e2e testing with cypress
e2e testing with cypress
Tomasz Bak
How to GraphQL: React Apollo
How to GraphQL: React Apollo
Tomasz Bak
How to GraphQL
How to GraphQL
Tomasz Bak
Working with npm packages
Working with npm packages
Tomasz Bak
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?
Tomasz Bak
Functional Reactive Angular 2
Functional Reactive Angular 2
Tomasz Bak
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?
Tomasz Bak
JavaScript Promises
JavaScript Promises
Tomasz Bak
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with Gulp
Tomasz Bak
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Tomasz Bak
Bardziej produktywny gmail
Bardziej produktywny gmail
Tomasz Bak
Kerberos
Kerberos
Tomasz Bak
Rails tobak2005
Rails tobak2005
Tomasz Bak
Ldap novell
Ldap novell
Tomasz Bak
Testowanie JavaScript
Testowanie JavaScript
Tomasz Bak
More from Tomasz Bak
(18)
Design Patterns in React
Design Patterns in React
How to migrate large project from Angular to React
How to migrate large project from Angular to React
JAMstack
JAMstack
e2e testing with cypress
e2e testing with cypress
How to GraphQL: React Apollo
How to GraphQL: React Apollo
How to GraphQL
How to GraphQL
Working with npm packages
Working with npm packages
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?
Functional Reactive Angular 2
Functional Reactive Angular 2
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?
JavaScript Promises
JavaScript Promises
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with Gulp
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Bardziej produktywny gmail
Bardziej produktywny gmail
Kerberos
Kerberos
Rails tobak2005
Rails tobak2005
Ldap novell
Ldap novell
Testowanie JavaScript
Testowanie JavaScript
Recently uploaded
software engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptx
nada99848
MYjobs Presentation Django-based project
MYjobs Presentation Django-based project
AnoyGreter
Professional Resume Template for Software Developers
Professional Resume Template for Software Developers
Vinodh Ram
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
Christina Lin
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
soniya singh
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdf
Power Karaoke
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
umasea
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
MyIntelliSource, Inc.
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
OPEN KNOWLEDGE GmbH
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
Tier1 app
Asset Management Software - Infographic
Asset Management Software - Infographic
Hr365.us smith
EY_Graph Database Powered Sustainability
EY_Graph Database Powered Sustainability
Neo4j
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
Dinusha Kumarasiri
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
Sujith Sukumaran
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
AxelRicardoTrocheRiq
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Ahmed Mohamed
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
Ortus Solutions, Corp
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
VICTOR MAESTRE RAMIREZ
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio, Inc.
Recently uploaded
(20)
software engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptx
MYjobs Presentation Django-based project
MYjobs Presentation Django-based project
Professional Resume Template for Software Developers
Professional Resume Template for Software Developers
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdf
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
Asset Management Software - Infographic
Asset Management Software - Infographic
EY_Graph Database Powered Sustainability
EY_Graph Database Powered Sustainability
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Building React CRUD app in minutes?
1.
Building React CRUD
App in minutes? @tomaszbak
2.
3.
CRUD in React Building
a Simple CRUD App with React + Redux Practical Redux (Redux-ORM based) marmelab/admin-on-rest
4.
Agenda ● What is
admin-on-rest? ● How it is build? ● Why is it interesting?
5.
What is admin-on-rest? ●
highly configurable React admin panel ● built on top popular libraries ● result of over 2 years of developing admin GUIs
6.
What is admin-on-rest? import
{ simpleRestClient, Admin, Resource } from 'admin-on-rest'; import { PostList, PostEdit, PostCreate } from './posts'; const App = () => ( <Admin restClient={simpleRestClient('http://localhost:3000')}> <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} /> </Admin> );
7.
Source: https://marmelab.com/blog/2016/09/02/admin-on-rest-react-admin-framework.html
8.
Source: https://github.com/marmelab/admin-on-rest-demo
9.
What libs does
it use? ● redux ● redux-form ● redux-saga ● recompose ● material-ui ● polyglot.js
10.
How it works? uses
the same reducer function for each resource export default (resources) => { const resourceReducers = {}; resources.forEach((resource) => { resourceReducers[resource.name] = resourceReducer(resource.name, resource.options); }); return combineReducers({ ...resourceReducers, loading, notification, // ... }); };
11.
How it works? redux
sagas call restClient and use action meta const crudFetch = (restClient) => { function* handleFetch(action) { const { type, payload, meta: { fetch: restType, ...meta } } = action; let response = yield call(restClient, restType, meta.resource, payload); yield put({ type: `${type}_SUCCESS`, payload: response, requestPayload: payload, meta: { ...meta, fetchResponse: restType, fetchStatus: FETCH_END }, }); } };
12.
How it works? restClient
allows to make custom API calls componentDidMount() { restClient(GET_LIST, 'reviews', { filter: { status: 'pending' }, sort: { field: 'date', order: 'DESC' }, pagination: { page: 1, perPage: 10 }, }) .then(response => this.setState({ reviews: response.data })); }
13.
How it works? UI const
DatagridCell = ({ field, record, basePath, resource }) => { return ( <TableRowColumn style={style}> {React.cloneElement(field, { record, basePath, resource })} </TableRowColumn> ); };
14.
Why is it
interesting? ● experience of developers behind admin-on-rest ● modular Redux store and components
15.
Thank you!
Download now