Up until recently I haven’t had the need to use drag and drop in my React projects. Then I did have the need. My need was simple, a list that could be reordered. I went searching for an example and everything I found just felt too complicated. I wasn’t worried about making it work. I was worried about having way too much boilerplate to reorder a list.
I decided on using react-beautiful-dnd. It already is really simple, but I feel that it can easily be extended to be even simpler. Especially for simple use cases.
Simple Draggable and Simple Droppable
Let’s look at an example that shows how simple and flexible we can make react-beautiful-dnd.
Continue reading “Simple React Drag and Drop”
This is a talk I gave for a local Meetup about React. It is called ‘Why I like React’. I cover the basics of building React components. Then I spend some time talking about functional programming. Finally I wrap it all together to show how React is functional in nature. The final demo shows how to ‘think in React’.
Continue reading “My talk on React”
Removing User Interface Complexity, or Why React is Awesome
This is a great post about React written by James Long. It explains why I love React better than I could myself. React makes thinking about your user interface incredibly simple. Data flows in and is rendered.
Blog Post Series
I want to spend a little time going into React and I felt that this would make the previous a little too long and meandering (almost like this sentence). In this post we will cover what React is, how it is different, what it excels at, how to implement it into a current application, and how to test React views. There is a lot of ground to cover so let’s get started.
What is React
<insert your favorite framework that I am not mentioning here>. It also means it does not care how you route, where you get your data, or any application plumbing. It will render HTML.
Why use React?
Why use React if all it does is render HTML? Continue reading “Node.js, Socket.io, and Redis: Intermediate Tutorial – React”
Blog Post Series
We will begin by managing our dependencies. Let’s get started.
Bower is a package manager like npm. In much the same way as npm, Bower needs Node.js and runs on top of it. While npm focuses on packages for Node.js, Bower usually targets front-end libraries like jQuery and React. Managing front-end libraries is much better than the old way of just downloading a version and sticking it in our project. We now have full version control.
Bower uses a configuration file named bower.json. Here is that file for our project. Continue reading “Node.js, Socket.io, and Redis: Intermediate Tutorial – Client side”