Building a simple component in React.js – Part 3 – Displaying Results

In the last post we carried on building some React.js components for searching for a company name and displaying matching names. In this post, we are going to finish this off by displaying the results.

The first thing we need to do is to complete the implementation of the handleSearch function in the Search component.

  • Line 2 initialises some state that we use for the matching customers
  • Line 46 calls a new getCustomers function, which loops through the customers array, checking for matches, builds up an array of matching customers, before returning the built up array
  • Line 47 sets some state to the matching customers
  • Line 53 passes that state into the Results component. When state changes, the Results component will automatically be re-rendered

Lastly, we need to change the Results component.

  • Line 3 interates over the data property we passed into the component (our matching customers) and builds up a list of customer names
  • Line 13 returns the list markup
  • Notice on line 13 you need to pass in the inline style attribute as an object or React.js complains

That completes our components. The full markup can be found here

Connect with me:RSSGitHubTwitterLinkedIn

Building a simple component in React.js – Part 2 – Search Event

In the last post we started building some React.js components for searching for a company name and displaying matching names. In this post, we are going to handle the search request before displaying the results in the final post.

The first thing we need to do is change the Criteria component to handle a click event on the button.

  • Line 13 creates a click event on the “Go” button that is handled by a handleClick function
  • In the handleClick function, line 5 gets the search criteria from the search box
  • Line 6 sets a “onSearch” property to the criteria that the parent component can pick up on

The next thing to do is to wire up the onSearch property in the Search component and react to it.

  • Line 9 wires the onSearch property in the instance of the Criteria component to the handleSearch function
  • For now, the implementation of the handleSearch function is to simply output the search critieria to the console. We will expand on this in our next post

Here’s the code for all our components and the consuming page at this point:

Connect with me:RSSGitHubTwitterLinkedIn

Building a simple component in React.js – Part 1 – Intro and Basic UI

In the next 3 posts, we’re going to build search and results components using React.js. The components will allow you to search for a company name and the matching names will be displayed beneath the search box.

The components will look like below. There will be 3 components:

  1. Criteria. The search textbox and “go” button
  2. Results. The list of results
  3. Search. The overall component – the parent of Criteria and Results

Consuming page

The html of the consuming page is listed below.

  • Line 10 is a placeholder for where the components will be injected
  • Line 12 is a reference to React.js
  • Line 13 is a reference to the React library that will transform the JSX in our components into valid HTML / JS
  • Line 15 is a placeholder for where we are going to write our React components

Creating our 3 basic components

You create a component in React.js by calling React.createClass(). The key function within a React component, that you must implement, is render() which should return the JSX for the component – JSX is a lot like HTML.

In the code below, we create our 3 component classes, returning the basic JSX we need.

  • Line 24 defines the outer component referencing the sub components, Criteria and Results
  • Line 2 defines the Criteria component
  • Line 13 defines the Results component with some hardcoded results at this point
  • Line 35 is where we tell React to inject the outer component, Search, into the DOM node with id “app”

In subsequent parts we will build on these component implementations …

Connect with me:RSSGitHubTwitterLinkedIn

4 reasons to use React.js

I’ve been getting into React.js recently. It’s a JavaScript library for building front-end views. The goals of React.js are to be simple, declarative and composable. Here’s what attracted me …

1. Fast

React.js utilises a virtual DOM. So, when the UI changes, React.js compares the old state to the new state in memory and updates the DOM in the least expensive way. This way, React.js avoids costly DOM operations and makes updates in a very efficient manner.

2. Composable

React.js gives you the ability to create your own components that you can later reuse and combine. The ability to encapsulate UI pieces is a great productivity boost.

A syntax called JSX is used to create components which mixes HTML and JavaScript which at first sounds bad but I’ve actually found beneficial. Since there is no strongly typed interface between HTML and JavaScript I think it makes component more maintainable by having the HTML and JavaScript together.

3. Isomorphic friendly

React can support rendering on the server as well as the client. This makes it SEO friendly if you are building a public facing web site.

Another advantage of server side rendering is a faster start up time for single page apps. The start up time for a SPA tends to be slow because lots of resources need to be downloaded before the first screen renders. Rendering the first screen on the server allows the user to see some useful content whilst all the resources are being downloaded.

4. Battle proven

React.js was created by a collaboration between Facebook and Instagram and was released in 2013. As well as these 2 companies using it, it is also used by many other big companies like Adobe, PayPal and Dropbox. So, React.js has had a lot of heavy use.

Connect with me:RSSGitHubTwitterLinkedIn

8 Visual Studio Code Tips

In a previous post, I detailed some reasons I have started to use VS code. Following on from this, here are some tips for using VS code:

  1. Shortcut key for the command pallet is SHIFT + CTRL + P
  2. You can open up a 2nd window in VS code using CTRL + 2 and you can set focus to the 1st / 2nd window using CTRL + 1 or CTRL + 2
  3. Switch auto saving on by checking File > Auto Save
  4. Show / hide the side bar using CTRL + B
  5. Whilst in the command line, code . will open VS code in the current directory
  6. To open a file quickly, type CTRL + P and start typing the name of the file
  7. To open an intellisence list, type CTRL + SPACE
  8. Increase the font by going to user settings (File > Preferences > User Settings) and paste “editor.fontSize”: 16, into the json
Connect with me:RSSGitHubTwitterLinkedIn

Why NodeJS?

I’ve been getting into NodeJS recently. Here’s what’s attracted me …

  • Simple. It’s quick to install and really easy to start creating a node app
  • Modules. NPM is a great package manager and it seems like there is a module for most things you want to do
  • Scaleable. Node uses asynchronous execution. This means the CPU can focus on many tasks at once. Node is also single threaded, so, there are no deadlocks
  • Javascript. I’ve really enjoyed programming in Javascript in recent years. It’s great to be able to write backend code in JavaScript as well as frontend code
  • Hosting. There are great hosting options – Azure, AWS and Heroku all support Node
Connect with me:RSSGitHubTwitterLinkedIn

5 Reasons to use VS Code

I’ve recently started to use VS code as my code editor. Here’s why …

Built in node debugger

I still prefer to debug client side code in the browser but it’s great to debug server side code in a code editor. My previous post describes how to do this using VS code. VS code debugging gives you the key stuff that an IDE gives – breakpoints, stepping, watches, call stack, …

Built in Git support

It’s great to have git support inside the code editor. VS code automatically picks up that you are using Git. You can commit, pull and push changes to Git right from within the VS Code editor.

VS Code git

Built in emmet support

Emmet allows you to write html super fast and it’s great that it’s built right into VS code. Just type some emmet syntax, hit the tab key and boom!

VS Code emmet

Built in task runner

VS code can leverage existing task runners like gulp and grunt to run things like babel compilation or maybe some JSHint checks. You can also add watcher tasks so that this stuff can be run automatically as you save code changes.

VS Code task


Last, it’s very fast – much faster than the full blown Visual Studio IDE.

Connect with me:RSSGitHubTwitterLinkedIn

Blog List 2015

I thought I’d share the list of blogs I currently read. For me, blogs are a great way of staying in touch with what’s happening in the software development world.