Not Just Another Framework- React
At Social Tables, we are always try to use cutting edge technology. As an engineering team, we each spend a certain portion of our time on research and development projects. Consequently, my teammates Rohit and Matthew decided to use React.js on their most recent project. They were impressed by React, and continuously talked about how cool React was. Therefore, we decided to use React on our new product, giving me the opportunity to explore this library for building user interfaces.
React is a front-end library, a joint collaboration between Facebook and Instagram. Many modern front-end frameworks use the MVVM architecture. If you use an MVVM architecture, React is only the V (view) part of the MVVM according to React documentation.
React creates a virtual DOM, and constructs an actual DOM from the virtual DOM. If there is a change on the virtual DOM, it inserts or removes the changes from the actual DOM. There are no templates, and everything is tied into the View. The View consists of one or more “Components”. I will explain some of the React concepts based on a very simple app.
Build simple app in 4 steps
Since we love SVG at Social Tables, lets create an example app using SVG. We will create a SVG canvas. When the canvas is clicked, a circle will be rendered where the click occurred. As a famous writer said once, one jsfiddle example is worth thousand words. So, I created a jsfiddle for each step.
Step 1: Create SvgCanvas .
This is the bare minimum needed to create a component in React. We defined a React component called <SvgCanvas /> and rendered a 300 by 300 SVG canvas. Every component has to have a render method. When renderComponent is called, a virtual DOM is created. React checks if there are any changes on virtual DOM and updates the actual DOM accordingly.
Now, let’s insert a static red circle inside our canvas.
We created a <Circle/> component which is basically a red circle at coordinates 100,100. Our circle component does not have any meaning unless we insert it into our SvgCanvas component. Our structure is very straightforward .
Step 2: Create a Circle Component inside SvgCanvas component.
React documentation suggests drawing the relationship between components to visualize the flow of data. In this diagram, the SvgCanvas component passes data to the Circle Component, and Circle component renders that data. The data always flows one way from top to bottom. The Circle component’s job is to render the data. Nothing else.
Our static example is very easy to create. Let’s create a dynamic version of our simple app. At this point, state plays a crucial role. State is basically the latest condition(value) of the data. In our app, the only data we want to update are the x and y coordinates of our circle, so we create states for x and y on the top level Component. In this case, the SvgCanvas component owns Circle Component. We will use the built in getInitialState method in SvgCanvas to initialize the x and y values.
Step 3 : Use state and props in static example.
The current values of x and y are equal to this.state.x and this.state.y.
We defined states on our SvgCanvas, and we “relay” states to the inner components by using props. In this point, the app is still static, but it is very close to being a dynamic app.
Now we want to change values of x and y of the circle . We want to get the values by clicking the canvas.
Since we are going to click on SvgCanvas, let’s define a function called handleClicking in the SvgCanvas component. handleClicking takes a mouse-event, extracts the x and y values at the point that we clicked on, and changes the current state of x and y by using the built-in setState method. When the setState method is called, child components which receive data from the state are re-rendered.
Of course, we need to capture the clicking on the SVG element, so we will use the built in onClick to capture the clicking. onClick pretty much works like the vanilla javascript’s onclick event attribute.
Step 4: The final app
At the beginning, understanding what it is going with React is not very easy, since the React concepts are not like any other existing framework’s concepts. However, once you grasp React’s concepts, working with React is very enjoyable.
Build your next project with React. The React team maintains very good documentation, and it will help you quickly learn React’s concepts.
