SlideShare a Scribd company logo

Building React CRUD app in minutes?

Whoever creates a great Redux CRUD example will score a ton of Open Source Credits

1 of 15
Download to read offline
Building React CRUD App
in minutes?
@tomaszbak
Building React CRUD app in minutes?
CRUD in React
Building a Simple CRUD App with React + Redux
Practical Redux (Redux-ORM based)
marmelab/admin-on-rest
Agenda
● What is admin-on-rest?
● How it is build?
● Why is it interesting?
What is admin-on-rest?
● highly configurable React admin panel
● built on top popular libraries
● result of over 2 years of developing admin GUIs
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>
);

Recommended

Progressive Web Apps 101
Progressive Web Apps 101Progressive Web Apps 101
Progressive Web Apps 101Muhammad Samu
 
Building Offline Ready and Installable Web App
Building Offline Ready and Installable Web AppBuilding Offline Ready and Installable Web App
Building Offline Ready and Installable Web AppMuhammad Samu
 
The WordPress developer's toolkit
The WordPress developer's toolkit 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 CycleDev Basics: The ASP.NET Page Life Cycle
Dev Basics: The ASP.NET Page Life CycleJay Harris
 
Asp.net life cycle in depth
Asp.net life cycle in depthAsp.net life cycle in depth
Asp.net life cycle in depthsonia merchant
 
M S Ajax Client Life Cycle Events
M S  Ajax  Client  Life  Cycle  EventsM S  Ajax  Client  Life  Cycle  Events
M S Ajax Client Life Cycle Events51 lecture
 

More Related Content

What's hot

Spring Boot and REST API
Spring Boot and REST APISpring Boot and REST API
Spring Boot and REST API07.pallav
 
WordPress 2017 with VueJS and GraphQL
WordPress 2017 with VueJS and GraphQLWordPress 2017 with VueJS and GraphQL
WordPress 2017 with VueJS and GraphQLhouzman
 
Introduction to VueJS & The WordPress REST API
Introduction to VueJS & The WordPress REST APIIntroduction to VueJS & The WordPress REST API
Introduction to VueJS & The WordPress REST APICaldera 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 7Red 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 7Max Andersen
 
ASP.NET Page Life Cycle
ASP.NET Page Life CycleASP.NET Page Life Cycle
ASP.NET Page Life CycleAbhishek Sur
 
Service workers
Service workersService workers
Service workersjungkees
 
Deploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App EngineDeploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App EngineAlexander Zamkovyi
 
How to customize Spring Boot?
How to customize Spring Boot?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 CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingChris Love
 
Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.Eng Chrispinus Onyancha
 
WSO2 Italia Open Break Session #2 - Microgateway
WSO2 Italia Open Break Session #2 - MicrogatewayWSO2 Italia Open Break Session #2 - Microgateway
WSO2 Italia Open Break Session #2 - MicrogatewayProfesia Srl, Lynx Group
 
Spring boot introduction
Spring boot introductionSpring boot introduction
Spring boot introductionRasheed Waraich
 
How to deploy and run mule in docker
How to deploy and run mule in dockerHow to deploy and run mule in docker
How to deploy and run mule in dockerRavi Prakash Singh
 
Play Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity StackPlay Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity StackMarcin Stepien
 

What's hot (20)

Spring Boot and REST API
Spring Boot and REST APISpring Boot and REST API
Spring Boot and REST API
 
WordPress 2017 with VueJS and GraphQL
WordPress 2017 with VueJS and GraphQLWordPress 2017 with VueJS and GraphQL
WordPress 2017 with VueJS and GraphQL
 
Introduction to VueJS & The WordPress REST API
Introduction to VueJS & The WordPress REST APIIntroduction 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 7Red 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 CycleASP.NET Page Life Cycle
ASP.NET Page Life Cycle
 
Service workers
Service workersService workers
Service workers
 
Deploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App EngineDeploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App Engine
 
Xke spring boot
Xke spring bootXke spring boot
Xke spring boot
 
Sails.js Intro
Sails.js IntroSails.js Intro
Sails.js Intro
 
How to customize Spring Boot?
How to customize Spring Boot?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 CachingReal 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.Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.
 
Spring Boot Showcase
Spring Boot ShowcaseSpring Boot Showcase
Spring Boot Showcase
 
WSO2 Italia Open Break Session #2 - Microgateway
WSO2 Italia Open Break Session #2 - MicrogatewayWSO2 Italia Open Break Session #2 - Microgateway
WSO2 Italia Open Break Session #2 - Microgateway
 
Slim3 quick start
Slim3 quick startSlim3 quick start
Slim3 quick start
 
Spring boot introduction
Spring boot introductionSpring boot introduction
Spring boot introduction
 
How to deploy and run mule in docker
How to deploy and run mule in dockerHow to deploy and run mule in docker
How to deploy and run mule in docker
 
Maven: Mule esb plugin
Maven: Mule esb pluginMaven: Mule esb plugin
Maven: Mule esb plugin
 
Play Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity StackPlay Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity Stack
 
Spring Boot
Spring BootSpring Boot
Spring Boot
 

Similar to Building React CRUD app in minutes?

using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'sAntônio Roberto Silva
 
Redux. From twitter hype to production
Redux. From twitter hype to productionRedux. From twitter hype to production
Redux. From twitter hype to productionJenya Terpil
 
AWS Application Migration Service-Hands-On Guide
AWS Application Migration Service-Hands-On GuideAWS Application Migration Service-Hands-On Guide
AWS Application Migration Service-Hands-On GuideManas Mondal
 
Introduction to React for Frontend Developers
Introduction to React for Frontend DevelopersIntroduction to React for Frontend Developers
Introduction to React for Frontend DevelopersSergio Nakamura
 
Redux. From twitter hype to production
Redux. From twitter hype to productionRedux. From twitter hype to production
Redux. From twitter hype to productionFDConf
 
Monitoring and Maintaining SharePoint 2013 Server
Monitoring and Maintaining SharePoint 2013 ServerMonitoring and Maintaining SharePoint 2013 Server
Monitoring and Maintaining SharePoint 2013 ServerLearning SharePoint
 
Zend Framework Foundations
Zend Framework FoundationsZend Framework Foundations
Zend Framework FoundationsChuck Reeves
 
The Query Rewrite Plugin Interface: Writing Your Own Plugin
The Query Rewrite Plugin Interface: Writing Your Own PluginThe Query Rewrite Plugin Interface: Writing Your Own Plugin
The Query Rewrite Plugin Interface: Writing Your Own PluginMartinHanssonOracle
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web appsFastly
 
WP REST API - Building a simple Web Application
WP REST API - Building a simple Web ApplicationWP REST API - Building a simple Web Application
WP REST API - Building a simple Web ApplicationEdmund Chan
 
Redux at scale
Redux at scaleRedux at scale
Redux at scaleinovia
 
10 tips for Redux at scale
10 tips for Redux at scale10 tips for Redux at scale
10 tips for Redux at scaleinovia
 
Server side rendering with React and Symfony
Server side rendering with React and SymfonyServer side rendering with React and Symfony
Server side rendering with React and SymfonyIgnacio Martín
 
Pyramid Deployment and Maintenance
Pyramid Deployment and MaintenancePyramid Deployment and Maintenance
Pyramid Deployment and MaintenanceJazkarta, Inc.
 
Active Admin
Active AdminActive Admin
Active AdminGreg Bell
 
Web deploy
Web deployWeb deploy
Web deploySky S
 

Similar to Building React CRUD app in minutes? (20)

using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing 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 - MeetupLet's react - Meetup
Let's react - Meetup
 
Redux. From twitter hype to production
Redux. From twitter hype to productionRedux. From twitter hype to production
Redux. From twitter hype to production
 
AWS Application Migration Service-Hands-On Guide
AWS Application Migration Service-Hands-On GuideAWS Application Migration Service-Hands-On Guide
AWS Application Migration Service-Hands-On Guide
 
React js
React jsReact js
React js
 
Introduction to React for Frontend Developers
Introduction to React for Frontend DevelopersIntroduction to React for Frontend Developers
Introduction to React for Frontend Developers
 
Redux. From twitter hype to production
Redux. From twitter hype to productionRedux. From twitter hype to production
Redux. From twitter hype to production
 
Monitoring and Maintaining SharePoint 2013 Server
Monitoring and Maintaining SharePoint 2013 ServerMonitoring and Maintaining SharePoint 2013 Server
Monitoring and Maintaining SharePoint 2013 Server
 
Zend Framework Foundations
Zend Framework FoundationsZend Framework Foundations
Zend Framework Foundations
 
The Query Rewrite Plugin Interface: Writing Your Own Plugin
The Query Rewrite Plugin Interface: Writing Your Own PluginThe Query Rewrite Plugin Interface: Writing Your Own Plugin
The Query Rewrite Plugin Interface: Writing Your Own Plugin
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
WP REST API - Building a simple Web Application
WP REST API - Building a simple Web ApplicationWP REST API - Building a simple Web Application
WP REST API - Building a simple Web Application
 
Redux at scale
Redux at scaleRedux at scale
Redux at scale
 
10 tips for Redux at scale
10 tips for Redux at scale10 tips for Redux at scale
10 tips for Redux at scale
 
Server side rendering with React and Symfony
Server side rendering with React and SymfonyServer side rendering with React and Symfony
Server side rendering with React and Symfony
 
Pyramid deployment
Pyramid deploymentPyramid deployment
Pyramid deployment
 
Pyramid Deployment and Maintenance
Pyramid Deployment and MaintenancePyramid Deployment and Maintenance
Pyramid Deployment and Maintenance
 
Active Admin
Active AdminActive Admin
Active Admin
 
React Redux AntD and Umi js
React Redux AntD and Umi jsReact Redux AntD and Umi js
React Redux AntD and Umi js
 
Web deploy
Web deployWeb deploy
Web deploy
 

More from Tomasz Bak

Design Patterns in React
Design Patterns in ReactDesign Patterns in React
Design Patterns in ReactTomasz Bak
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to ReactTomasz Bak
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypressTomasz Bak
 
How to GraphQL: React Apollo
How to GraphQL: React ApolloHow to GraphQL: React Apollo
How to GraphQL: React ApolloTomasz Bak
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQLTomasz Bak
 
Working with npm packages
Working with npm packagesWorking with npm packages
Working with npm packagesTomasz Bak
 
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?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 Functional Reactive Angular 2
Functional Reactive Angular 2 Tomasz Bak
 
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Tomasz Bak
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript PromisesTomasz Bak
 
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpReplacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpTomasz Bak
 
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSUlepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSTomasz Bak
 
Bardziej produktywny gmail
Bardziej produktywny gmailBardziej produktywny gmail
Bardziej produktywny gmailTomasz Bak
 
Rails tobak2005
Rails tobak2005Rails tobak2005
Rails tobak2005Tomasz Bak
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScriptTomasz Bak
 

More from Tomasz Bak (18)

Design Patterns in React
Design Patterns in ReactDesign Patterns in React
Design Patterns in React
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to React
 
JAMstack
JAMstackJAMstack
JAMstack
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypress
 
How to GraphQL: React Apollo
How to GraphQL: React ApolloHow to GraphQL: React Apollo
How to GraphQL: React Apollo
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQL
 
Working with npm packages
Working with npm packagesWorking with npm packages
Working with npm packages
 
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?
 
Functional Reactive Angular 2
Functional Reactive Angular 2 Functional Reactive Angular 2
Functional Reactive Angular 2
 
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpReplacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with Gulp
 
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSUlepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
 
Bardziej produktywny gmail
Bardziej produktywny gmailBardziej produktywny gmail
Bardziej produktywny gmail
 
Kerberos
KerberosKerberos
Kerberos
 
Rails tobak2005
Rails tobak2005Rails tobak2005
Rails tobak2005
 
Ldap novell
Ldap novellLdap novell
Ldap novell
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScript
 

Recently uploaded

The Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThe Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThousandEyes
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfssuser82c38d
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleAmir Moghimi
 
killing camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfkilling camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfssuser82c38d
 
Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227Fermin Galan
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureHironori Washizaki
 
What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?NYGGS Automation Suite
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Dmitry Zinoviev
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!Anthony Dahanne
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCIOWomenMagazine
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowNaoki (Neo) SATO
 
Passbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentPassbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentThierry Gayet
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfssuser82c38d
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsSprings
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이ssuser82c38d
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019VICTOR MAESTRE RAMIREZ
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash CourseRohan Chandane
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio, Inc.
 
Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxMindInventory
 
OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20Shane Coughlan
 

Recently uploaded (20)

The Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThe Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and Takeaways
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdf
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scale
 
killing camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfkilling camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdf
 
Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about Architecture
 
What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdf
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flow
 
Passbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentPassbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managment
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdf
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and Cons
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash Course
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
 
Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptx
 
OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20
 

Building React CRUD app in minutes?

  • 1. Building React CRUD App in minutes? @tomaszbak
  • 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> );
  • 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