Full-stack Apps with React & Frappe Framework Training : Day 1

Описание: In this training, we'll learn how to build high quality apps with Frappe Framework and React using shadcn, RadixUI and Frappe React SDK.

Specifically, we'll try to build a Project Management tool by extending the in-built Project Management module available in ERPNext by giving it a better user interface using React.

Who is this for?
If you're a React developer (or team) who's looking to build apps with great tailored UI/UX with Frappe framework - this training is for you. We'll cover the basics like setting up a React app with Frappe, fetching and updating data with React hooks, real-time updates with SocketIO and advanced topics like caching and optimistic updates. Knowledge of ERPNext is not required.

Prerequisites
Working knowledge of Frappe Framework and React.

Since this is an intermediate level training where we'll jump straight on, it is recommended to have some knowledge of both React and Frappe framework. We'll use TypeScript with React - but it's not required for this course. We'll also use other libraries like RadixUI, React Hook Form and TailwindCSS - but it's not necessary to be familiar with it.

Content
Setting up a React app

We will set a Frappe app with a React frontend on a local bench using Doppio. This will also include an in-depth explanation of how a React frontend can be bundled up with a Frappe app and then served on a Frappe site.

Authentication

We'll create a simple login page for our app and cover username and password login. We'll also walkthrough Raven's login and signup pages to give you more idea about how you can implement login via OAuth, Magic link and 2FA on your custom React apps.

Create, Read, Update, Delete

The basics - how do you perform operations on documents in Frappe via simple React hooks available in Frappe React SDK. Along the way, we'll build the UI for our project management app - working with the DocTypes already available in ERPNext.

Custom API calls

We'll use a few hooks to make calls to custom endpoints using GET/POST requests.

Realtime Updates & Optimistic Data

Frappe React SDK supports real-time updates out of the box - we'll use those to make our app more collaborative and user friendly. We'll also try performing updates to our documents "optimistically", i.e. updating the state of the app as soon as the user performs an action without waiting for a response from the server.

Refactor the whole thing (yes)

Once we're done with the above, we'll use some new hooks in Frappe React SDK to share state globally and reduce the amount of data we send as props. No more prop-drilling. We'll also cover ways to magically update data across the entire app without writing much code since the heavy lifting is done by Frappe React SDK. This part will feel magical, really.

By the end of it, you should be pretty comfortable in building amazing frontends with React for your Frappe apps!



Tools/Libraries we will be using:

Frappe React SDK
RadixUI
Shadcn
Doppio
TailwindCSS
SWR
React Hook Form
CMDK