How to Build a CRUD App with ReactJS?

introduction in this tutorial, you'll build a comprehensive crud (create, read, update, and delete) application using reactjs this guide is designed to perform the basic operations of a software application by demonstrating how to build crud apps that effectively manage and update data you'll start by creating and configuring a back4app project named basic crud app reactjs , which acts as a robust backend system for your web application next, you'll design a scalable database schema by defining detailed collections and fields—either manually or with the help of the back4app ai agent then, you'll leverage the back4app admin app—a user friendly management tool with a drag and drop interface—to easily data manage your collections this admin interface improves user experience and simplifies the user interface, enabling users to quickly perform crud operations finally, you'll deploy your reactjs frontend and integrate it with back4app using rest/graphql (or the parse sdk, where available), all while securing your backend with advanced access controls by the end of this guide, you'll have built a production ready web application that not only supports basic crud operations but also includes user authentication and robust data update capabilities key takeaways learn how to build crud applications that efficiently manage data using a reliable database management system gain practical insights into designing a scalable backend and integrating it with a reactjs frontend to enhance user experience discover how to use a drag and drop management tool (the back4app admin app) to simplify create, read, update, and delete operations understand deployment techniques, including docker containerization, to quickly launch your web application prerequisites before you begin, ensure you have the following a back4app account and a new project set up if you need help, refer to getting started with back4app https //www back4app com/docs/get started/new parse app a reactjs development environment use create react app https //create react app dev/docs/getting started/ or a similar tool make sure node js (version 14 or above) is installed basic understanding of javascript, reactjs, and rest apis review the reactjs documentation https //reactjs org/docs/getting started html if necessary step 1 – project setup creating a new back4app project log in to your back4app account click the “new app” button in your dashboard enter the project name basic crud app reactjs and follow the prompts to create your project create new project once created, your new project will appear on your back4app dashboard, providing a solid foundation for your backend configuration and project management step 2 – database schema design designing your data model for the basic crud app, you will create several collections below are some examples of the collections you will need, outlining the necessary fields and data types to help you set up your database schema effectively these collections are designed to perform the fundamental crud operations that enable users to create, read, update, and delete data 1\ items collection this collection stores information about each item field data type description id objectid automatically generated primary key title string the title of the item description string a brief description of the item created at date timestamp when the item was created updated at date timestamp when the item was last updated 2\ users collection this collection stores user information and authentication details field data type description id objectid automatically generated primary key username string unique username for the user email string unique email address password hash string hashed password for authentication created at date timestamp when the user account was created updated at date timestamp when the user account was updated you can set up these collections manually in the back4app dashboard by creating a new class for each collection and adding columns to define the fields create new class you can easily create fields for your database by selecting a data type, naming the field, setting a default value, and defining whether it's required create column using the back4app ai agent for schema generation the back4app ai agent is a powerful tool available directly from your back4app dashboard it allows you to automatically generate your database schema based on a prompt that describes your desired collections and fields this functionality is a significant time saver for project management and helps ensure that your database management system is set up to perform the basic operations required by your web application how to use the ai agent open the ai agent log in to your back4app dashboard and locate the ai agent in the menu or within your project settings describe your data model in the ai agent interface, paste a detailed prompt that outlines the collections and fields you need review and apply once submitted, the ai agent will generate the collections and field definitions review these suggestions and apply them to your project example prompt create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) using the ai agent in this way saves time and ensures that your schema is consistent and optimized for your application's needs step 3 – enabling the admin app & crud operations overview of the admin app the back4app admin app is a powerful, no code interface that allows you to manage your backend data this management tool provides a drag and drop user interface that enables users to easily perform crud operations such as create, read, update, and delete records enabling the admin app navigate to the “more” menu in your back4app dashboard click on “admin app” and then on “enable admin app ” configure your admin credentials by creating your first admin user this process also sets up roles (e g , b4aadminuser ) and system collections enable admin app after enabling, log in to the admin app to manage your data admin app dashboard using the admin app for crud operations within the admin app you can create records click the “add record” button within a collection (e g , items) to create new entries read/update records select any record to view its details or edit fields, ensuring smooth data update delete records use the delete option to remove records that are no longer needed this easy to use management tool improves the overall user experience by providing a simple drag and drop interface for crud functions step 4 – integrating reactjs with back4app now that your backend is set up and managed via the admin app, it’s time to connect your reactjs frontend to back4app option a using the parse sdk install the parse sdk npm install parse initialize parse in your react app create a file (e g , src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; use parse in a react component for example, create a component to fetch and display items // src/components/itemslist js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; option b using rest or graphql if your environment does not support the parse sdk, you can perform crud operations using rest or graphql for example, to fetch items using rest // example rest call to fetch items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integrate these api calls into your react components as needed step 5 – securing your backend access control lists (acls) secure your data by assigning acls to objects for example, to create a private item async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl only the owner can read and write const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } class level permissions (clps) in the back4app dashboard, configure clps for each collection to set default access rules this ensures that only authenticated or authorized users can access sensitive data step 6 – user authentication setting up user accounts back4app leverages parse’s user class for authentication in your react app, handle user registration and login as follows // src/components/auth js import react, { usestate } from 'react'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user signed up successfully!'); } catch (error) { alert('error signing up ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; a similar approach can be used for login and session management additional features such as social logins, email verification, and password resets can be configured in the back4app dashboard step 7 – deploying your reactjs frontend with web deployment back4app’s web deployment feature allows you to host your reactjs frontend seamlessly by deploying your code from a github repository in this section, you’ll learn how to prepare your production build, commit your source code to github, integrate your repository with web deployment, and deploy your site 7 1 prepare your production build open your project folder in a terminal run the build command npm run build this command creates a build folder containing all the optimized static files (including index html , javascript, css, and images) verify the build ensure that the build folder contains an index html file along with necessary asset subdirectories 7 2 organize and upload your source code your repository should include the full source code for your reactjs frontend a typical file structure might look like this basic crud app reactjs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md sample source code files src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; \#### commit your code to github 1\ initialize a git repository in your project folder (if you haven’t already) ```bash git init add your source files git add commit your changes git commit m "initial commit of reactjs frontend source code" create a github repository for example, create a repository named basic crud app reactjs frontend on github push your code to github git remote add origin https //github com/your username/basic crud app reactjs frontend git git push u origin main 7 3 integrate your github repository with web deployment access web deployment log in to your back4app dashboard, navigate to your project (basic crud app reactjs), and click on the web deployment feature connect to github if you haven’t already, integrate your github account by following the on screen prompts this connection allows back4app to access your repository select your repository and branch choose the repository you created (e g , basic crud app reactjs frontend ) and select the branch (e g , main ) that contains your reactjs code 7 4 configure your deployment provide additional configuration details build command if your repository does not include a pre built build folder, specify the build command (e g , npm run build ) back4app will run this command during deployment output directory set the output directory to build so that back4app knows which folder contains your static site files environment variables if your application depends on any environment variables (e g , api keys), add them in the configuration settings 7 5 dockerize your reactjs application project if you prefer using docker for deployment, you can containerize your reactjs application include a dockerfile in your repository with content similar to the following \# use an official node runtime as a parent image from node 16 alpine as build \# set the working directory workdir /app \# copy package json and package lock json copy package json / \# install dependencies run npm install \# copy the rest of the application copy \# build the react app run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] include this dockerfile in your repository then, in your web deployment configuration, select the docker deployment option to build and deploy your containerized application 7 6 deploy your application click the deploy button once you have configured the deployment settings, click the deploy button monitor the build process back4app will pull your code from github, execute the build command (if configured), and deploy your app within a container obtain your url after the deployment completes, back4app will provide a url where your reactjs application is hosted 7 7 verify your deployment visit the provided url open the url in your web browser to view your deployed site test the application verify that your application loads correctly, all routes work as expected, and all assets (css, javascript, images) are properly served troubleshoot if needed use your browser’s developer tools to check for any errors if issues arise, review the deployment logs in back4app and verify your github integration and build settings step 8 – conclusion and next steps congratulations! you have built a complete basic crud app using reactjs and back4app you configured a project named basic crud app reactjs , designed detailed database collections for items and users, and managed your data via the powerful admin app you also integrated your reactjs frontend with your backend and secured your data with robust access controls next steps enhance your frontend extend your reactjs app with features such as detailed item views, search functionality, and real time notifications integrate additional features consider adding more advanced backend logic (e g , cloud functions), third party api integrations, or role based access controls explore further resources review the back4app documentation https //www back4app com/docs and additional tutorials for deeper dives into performance optimization and custom integrations by following this tutorial, you now have the skills to create a robust, scalable crud backend for your reactjs application using back4app happy coding!