On my last post, I’ve talked one of design patterns, which is Template Method. Now I want to talk about other design pattern which is Publish-Subscribe. I used this pattern to make a communication between React components which are not directly related.
In this time, I will explain about one of design pattern that you can apply when developing a software. Yep, the pattern is called by Template Method. I also applied Template Method pattern when developing our project. In a simple explanation, Template Method is a pattern where there’s an abstract class that contains template(s) to execute its methods then its subclasses can override the method implementation as what’s needed.
In our project, we use React for handling frontend business. Our project is a web-based application, in which interactivity is required, views that are dynamically transformed are something common in the project.
In this post, I will write why we choose to use React. Continue reading “Why use React”
In this post, I will guide you how to create a React Component step-by-step
Step 1: Create the Component
On my last post, I’ve talked about shallow rendering to test React components. This post is the sequel of that post since I’ll also talk about testing React components. The shallow rendering that I’ve done on the last post is using the help from
createRenderer function from React Addons Test Utils. Unfortunately, (until now) there are no function for traversing React element trees neatly just by using the help from React Addons Test Utils. If you want to check an element somewhere deep in the component tree, you will end up in a long chaining of
props.children.props.children… which it also happened to me and I think it’s not elegant.
There are several approaches to test React components. The first approach that I tried was render the real DOM on the virtual environment. I used TestUtils.renderIntoDocument to render component into a real DOM. For the first time, I didn’t get any problem until I used Chart.js using this React wrapper for displaying chart. I faced a new problem!
My team use React for creating frontend component, so this time I’ll explain about creating dropdown using React by creating the test first using Jest.