Submit Search
Upload
Building React CRUD app in minutes?
•
0 likes
•
3,464 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
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
VishalKumarJha10
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
panagenda
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTV
shikhaohhpro
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
Wave PLM
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
SolGuruz
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
kalichargn70th171
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
How to Choose the Right Laravel Development Partner in New York City_compress...
How to Choose the Right Laravel Development Partner in New York City_compress...
software pro Development
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
mohitmore19
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
ICS
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
OnePlan Solutions
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
Jhone kinadey
Software Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
Arshad QA
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Steffen Staab
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
OnePlan Solutions
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Alberto González Trastoy
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
Fatema Valibhai
10 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 2024
Mind IT Systems
Define the academic and professional writing..pdf
Define the academic and professional writing..pdf
PearlKirahMaeRagusta1
Recently uploaded
(20)
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTV
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
How to Choose the Right Laravel Development Partner in New York City_compress...
How to Choose the Right Laravel Development Partner in New York City_compress...
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
Software Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
10 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 2024
Define the academic and professional writing..pdf
Define the academic and professional writing..pdf
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