This React Library Blew My Mind - React Flow Course in 30 minutes
ฝัง
- เผยแพร่เมื่อ 24 ก.ค. 2024
- Hi all, in this course we will discuss one of the best React Workflow and Flowchart library, React flow. In this tutorial I will make a React flow project and will cover the following concepts while making it:
1) React Flow Concepts
2) Nodes, Edges, Handles in React Flow
3) Add/Delete Nodes, Edges in React Flow
4) Custom Nodes, Edges, Handles in React Flow
Join my discord: / discord
You can follow me on: / usmanabdurrehman97
Code: github.com/usmanabdurrehman/r...
00:00 Intro
00:06 Project Intro
00:50 React Flow Concepts
01:21 React Flow Component
01:53 Adding Nodes in React Flow
03:20 Adding Edges in React Flow
04:33 fitView prop
04:56 React Flow Plugins
06:05 Using State in React Flow
07:41 onConnect prop
08:59 Reviewing the project
09:25 Adding Custom Node Component
12:46 Adding Handle in Custom Node Component
13:40 Adding Payment Country Custom Node
17:18 Adding Payment Provider Custom Node
19:43 Deleting a Node
20:43 Adding Payment Provider Select Custom Node
22:12 Adding a Node
24:20 Adding Custom Edge
25:28 Delete an Edge
28:21 Adding Custom Handle
30:00 Outro
![[доклад] Подробно о React Reconciliation, или Как React добился 60 fps](http://i.ytimg.com/vi/NPXJnKytER4/mqdefault.jpg)
Bro gave 2 hours of code in just 30 mints 🫡🗿
Is this a compliment or a roast because I am not quite sure :3
@@usmanabdurehman97 nah bro, I'm just appreciating how well you coded in just 30 mints but where you learnt this much because it's hard to go so much deep just by reading docs. 🫡
oh cool. Thanks. I took inspiration about the project from the demos page they have. A lot of people have built very complex stuff using react-flow.
Thank you for the tut! Just what I was looking for.
Thanks :)
Good job bro, That was very helpful
Thanks man. Means a lot :)
Dude this is amazing work so much better than what eve seen other YT done, thank you
Thanks man. Your comments are what keep me going 😭
thank you for sharing!
Thanks for leaving this comment :)
This video has been really helpful
Thanks a lot :)
just awesome 👌👌👌👌 thank you very much
Thanks man :)
It would be great to see how you would go about serializing the graph and loading it again later.
For example for saving and sharing workflows with your team mates
I will sore sure include it in the next course. Thanks for the recommendation.
Awesome!! Thanks for this. Is there a way to have arrow heads at the end of your edges pointing to a target?
Glad you liked it :). Yes there is. Since you have the ability to add a custom handle, you can use css clip path to make whatever kind of shape you want for the handle. Also, you can use some image as background for the handle etc.
Great video, show the drag and drop and how csn we save them, also i was bit confused with you were importing components, like how do we know what it is used for?
.
Great video by the way,thanks!
Thanks for the comment. You can just save the json state in the db or local storage depending on if you app has a backend or not and then load it whenever the app opens.
Regarding the workflow, I had a dummy idea for a workflow where we would enter a payment(initialize) with some amount like 300$, then select any particular country(currency) and then select a particular payment provider by connecting different edges with each other. You can then use the state to add whatever logic you want.
This is insane. Very nice & simple explanation.
Would be interested to know how much time did it take you to learn this in such an amazing manner.
Thanks :'D. Took around 2 weeks for learning library + project + script for the video etc.
@@usmanabdurehman97 That's amazing!! Thanks for the video.
Please make more react flow tutorials
For sure. This is an amazing library, and I would love to make more project-based tutorials using it. Be on the lookout for more in 1-2 months.
Thank you for your job. Can you guide about create node for automation browsers?
Thanks for the appreciation. Can you elaborate it a bit on what you mean? I didn't get it.
@@usmanabdurehman97 i mean that create node about browser such as "click", "typetext", "openur", "newtab"...
This is great, can you show them the real world working demo, how things work in the background, when connected, what's the logic behind that
This is a dummy workflow so there is not real logic behind it.
@@usmanabdurehman97 yes, i can see that, but can you make or refer videos about using this in real-projects for.eg, a simple payment app like your dummy example but actual working, like what how and what happens in background when we connect these nodes and then initiate a payment. and save the workflow retrieve them, then use it. liek that
I am planning a video regarding its usage in a real project based on its implementations I have seen. It would be out within 1,2 weeks.
How can positions be generated? Is it done manually or is there an automated process for generating them?
For this particular example, I have a working area of 500*500. So, I am using Math.random() * 500 to generate x,y coordinates for the nodes I am adding so that they land inside this working area.
But one thing i dont get how to pass data from Node 1 to Node 2? I dont see this done thru Edges, so when onConnect is done do i need to loop over Node 1 to get its props and then Loop over Node2 to pass there?
You can use any way. You can do what you told where you in the onConnect function mutate the state for the node to pass custom data to it which can be the data of some node as well. You can also use some state management library like zustand and keep a global state tree where the key of the state is the id of the node and the value is the respective data. Then you can use that state in any custom node component. Do anything which makes more sense to you based on your needs.
@@usmanabdurehman97 using zustand works greats its just the looping part over and over i dont really like i was hoping that this lib has some magic function that stores values nicely that they can be referenced by id easally without loop but i guess i can always build this myself
yeah, looping is not great. Use Zustand then and keep a global object for node data
Please Bro Can you make a tutorial video for a custom group node with child node and give it that in side bar to drag and drop the group node along with its childnode in reactflow
I will make a complex React flow course within a month so will incorporate in that.
Any free library works same ??? I have to make one for my react proj. Data is huge tho.
This is a free library.
sir if we add 2+ handles then its not working
please help me regarding that
It should work. In the payment country component, I have got two handles. One source and one destination. Check if you are getting any errors in the console. Also
cross-check your implementation with mine
@@usmanabdurehman97 yes sir i do that but the issue is when I add one target and two sources then target and one source is working and second source is not working can you please guide me regarding that or we can connect on google meet if possible
Really nice DEMO. Can you cover an example to save and load from JSON? Its a request
cool. Will add this in the advanced course I will make. Thanks for the comment
I am building a project demo, if you like we can collaborate, I can provide a real-world use case, that we are open to make open-source.
This will chnage on each refresh how can we save this
You will have to save the json object of the nodes/edges in a database/localStorage and load them on next page load or something depending on your application. I will include this in the next react flow course I make
@@usmanabdurehman97 thanks , i was able to do that actually , it was for test of a job . could not complete at time 😓.
dicovered ur channel though , waiting for react flow course👍👍