Quick start guide

[alexreardon]

We should create a guide that walks people through creating a board setup. This will introduce people to the core ideas of the library and help them get up and running quickly.

[LuoweiC]

I am a beginner and there is no more detailed documentation to support my successful operation locally

[atav32]

@LuoweiC I am not a beginner and I still want a guide 😂

[jacobwicks]

I wrote a simple project that lets you move draggable objects between two droppable lists. Hope this is helpful to someone.

https://github.com/jacobwicks/rbdnd-2-list-example

[alexreardon]

I am really keen to write this. I was mostly through one, but I have stopped progress on it during our upgrade to React 16 #406 and adding our new website #343. Rationale:

• The API will change as a part of React 16
• How we author the docs will change due to the new website

So for now we are in a lame situation of no starter docs. However, this situation will change soon!

[atav32]

How about editing the README to make the Codepen example easier to find?

[alexreardon]

The codesandbox examples are already up the top of the docs
https://github.com/atlassian/react-beautiful-dnd#basic-usage-examples

[fihawkins]

Any news on the quick start guide? Want it so bad!!!!

[alexreardon]

Rough thinking (updated)

Getting started

This is what will go in our getting started tutorial

• High level overview of the project and the main pieces (DragDropContext, Droppable, Draggable, drag handles)
• Installation
• Build a single list that has no drag and drop
• Add react-beautiful-dnd to the single list that we created
• Persisting reordering changes to a single list (might be combined with previous) (DragDropContext > onDragEnd)

Advanced topics

(Extending getting started)

• Adding a second list to the side and configuring transitions between the lists
• Adding support to reorder the lists

(Stand alone topics)

• Conditional dropping
• Horizontal lists
• Understanding and working with ref's
• Monkey patching event handlers
• Custom screen reader
• Using a React.Portal
• Table reordering
• SSR
• Nested interactive elements
• Using flow types

[atav32]

A board would be a really cool advanced tutorial.

For the Quick Start guide, maybe it's easier as a video tutorial? I'm kinda imagining something like Dan Abramov's, https://egghead.io/courses/getting-started-with-redux. Only if it feels easier for you though.

I'm also wondering if it be useful to create a wrapper component with smart defaults and hides the ref props. I think that's the stuff that makes the codesandbox examples daunting for beginners.

[Sayvai]

@alexreardon you could also add Multi Drag under Advanced topics. 😃

[alexreardon]

I have been actively working on a screencast series to help people get started quickly with the project 🤘🎉🤩

More details coming soon

[alexreardon]

This should be landing soon 💃

[samundrak]

This is 3rd time i am trying to work with this library, but i always fail to understand from start, please do some videos/article sooner 👍

[jamiebuilds]

@samundrak I understand you're frustrated, but that was not the right way to engage with an open source project.

It's like: If you were going out of your way to do a favor for a stranger, you wouldn't appreciate them yelling at you to do it faster. It's inappropriate.

[alexreardon]

@samundrak, I totally understand the frustration. It is a gap in the project.

I have actually spent over 50 hours to create a course to help people get started. The course will be going up for free on egghead.io in a bit over a month, due to their course release schedule.

While the recording part is finished, the people at egghead are doing extra work in creating full transcripts for every lesson, creating cover art, and converting the code I wrote for the course into an example which is broken into independently runnable lessons.

So while it might seem not much is going on, I can assure you that this is getting a lot of attention from a lot of people.

[samundrak]

Hey, first of all, I am very sorry, I didn't mean to be bad,
I was just excited about this library and your video, please forgive me,

[cheshireoctopus]

Looking forward to the screencasts, @alexreardon - thank you 👍

Possible to include a portion on writing basic testing? Enjoying using the library but having trouble testing it effectively.

[annie-elequin]

super excited for the quick start guide! The name is fitting - it really is a beautiful library. I look forward to understanding it in more depth.

[alexreardon]

So am @annie-mathis! We are just waiting in the egghead.io course release queue 👍

@cheshireoctopus we have an issue to add some testing docs #623

[alexreardon]

The course is available!

Course: Beautiful and accessible drag and drop with react-beautiful-dnd

[alexreardon]

/cc @annie-mathis, @atav32, @LuoweiC, @fihawkins, @cheshireoctopus ^

[icehongssii]

@alexreardon May God bless this guy with lots of force

[nchathu2014]

I am trying to drag an isolated button it did not work for me. Any thoughts?

[atav32]

Wooow, this is waaay beyond my expectations! @alexreardon how can I buy you a beer? 🍺