You've probably heard about ToDoMVC project. It's same ToDo application made with different frameworks. It's interesting how the same problem is solved by different programmers following different concepts. This article is about making the ToDoMVC application with AbsurdJS.
While I was open sourcing react-place I noticed that there is some complexity around preparing the component for releasing. I decided to document the process here so I have a solid resource next time. You may be surprised but writing the working
jsx file doesn’t mean that the component is ready for publishing and is usable for other developers.
Long time I was searching for a good front-end framework. Framework that will help me write scalable and easy to maintain UI. Even though React is just a library for rendering it comes with so many benefits that I can easily say “I found it”. And like every thing that I use a lot I started seeing some patterns. Techniques that are applied over and over again and I see in the code of other developers. It’s time that I start documenting, discussing and sharing these patterns.
When we start using React we very soon also start asking questions. Where I’m suppose to put my data, how to communicate changes or how to manage state? The answers of this questions are very often matter of context and sometimes just practice and experience with the library. However, there is a pattern which is used widely and helps organizing React based applications - splitting the components into presentational and containers.
(This article is part of React in patterns series.)
React is highly composable. And the API that enables that is
props.children. It gives us the power to create a placeholder that is later filled with content from the outside.
There are lots of things which I like in React. Mostly the fact that it teaches interesting patterns. One of my favorites ones is higher-order component. In this article we’ll do a couple of experiments and will see how powerful this approach could be.
If you are writing React applications you probably know about higher order components or render props (which by the way I think is kind of a form of higher order component pattern). In both cases we have a component that encapsulates logic and passes props down to children. Recently at work we came to the idea that we may push this further and represent some functionalities which are out of React in the same fashion - with a single tag in our components tree.
I had an interesting bug in my React application. It happened that the problem was in the fact that I was using
forEach instead of
The bug that I was encounter was
Recently I stumbled upon on an interesting bug which reminded me what is actually happening with my components when React is rendering them.
This weekend I decided to play with the new kid on the block - Facebook's Recoil library for managing state. I did the trivial counter example to see how it works. It's pretty simple idea so I wondered how much it takes to replicate its features. I found the exact answer - 70 lines of code. Obviously, my implementation didn't cover everything but it was fun so I decided to share my findings.
(A side note: I did not look at the code of Recoil. I didn't want to be bias on how to write my version.)