|The Programmers Guide To React|
|Written by Ian Elliot|
|Monday, 05 June 2017|
Page 1 of 3
React seems to be taking over the web frontend, but it is remarkably hard to discover what it actually brings to the party. What is the problem that React seems to solve? The only way to find out is to strip it bare of its tools, UI declarative language and ES6 and take it right back to basics.
React is something of a star at the moment and while its documentation is good, it always approaches using it via the most advanced route - ES8, JSX and Babel at a minimum. Even if it abandons one of these technologies to demonstrate how things work it keeps the others. This makes it very difficult to see what it is you are buying into.
After all there is the core idea of React and then there are the tools and elaborations that surround it.
React Without npm or Anything Else
The first problem we have in getting started is that the React documentation only really explains how to get started with node.js and npm and many other tools. If you are coming from a clientside background you may well not have any idea what all this is about and so spend time learning new technologies that really don't have anything much to do with React. This can be off putting and it confuses the action of adopting React with adopting a set of tools.
To load the two libraries you need add:
to the header of the web page. These are full unminified version for production code you should use:
You can also download a zip containing react.js and react-dom.js from download starter kit or you can simply download the files from the CDN.
Once you have the libraries loaded the next thing to do is write a "hello world".
To create an element you simply use:
The type parameter can be a HTML tag name as a String, e.g. "div", or it can be a "class" that represents a React element. More about elements as classes later.
The props parameter is an object with properties that customise the element. If you include a valid HTML element attribute in props then it will be used to set the attribute on the element.
The final parameter, children, can be repeated as often as you like and each parameter specifies a child element of the element.
creates an element that is a div with no props and one child, the text node containing "Hello World". We don't usually think of text nodes as children but they are.
Now we need to render the element. To do this we need a tag to act as a container in the HTML. The element will be rendered as a child of the container.
In this case all we need is some minimal HTML:
The id makes it easy to retrieve the DOM element that corresponds to it.
The render function is:
The callback is optional and there can only be one element specified. The contents of the container are erased and replaced with the element as DOM objects. If you do provide a callback then it is called every time the contents of the container change.
This changes the effective HTML to:
If you know about the DOM and perhaps jQuery it is difficult to get excited about this because manipulating the DOM is fairly easy. For example using jQuery:
you can build up more complex elements by including multiple children:
In this case we have a button element, a break element and a div and a textnode, break and button are the child elements within the div. The resulting DOM is equivalent to:
You can tell that this isn't going to be a fun way to work and React does have better ways of doing the same job. Note that in jQuery the same task is just as easy if not easier:
If you want to give the Button an id then you can use the props:
This creates a Button with id "Button1". Any props that aren't recognized as HTML element attributes are ignored. However they are of use when you create a component.
React elements are the lowest level UI atom. In most cases you want to make use of a component which has a lot more functionality.
There are two component functional and class.
A functional component is just a function that returns a react element.
which simply creates the element used in the example earlier - the Hello World text and a Button.
What is the advantage of using a functional component?
The first is that you can use the function to group together multiple createElement calls to put together a component that involves more than one element and then return the component as if it was just one thing. However you don't call the function as part of a render you first use createElement to create an instance of the component and then you render it.
For example you could render the hello component using:
You can also use props to customize the component beyond setting HTML attributes.
Notice that now we are using props.buttonmessage and props.hellomessage to supply the text. You can use any props properties you care to invent but when you use createElement you have to make sure to provide them. For example, to create an instance of the component and render it we have to use:
|Last Updated ( Tuesday, 20 June 2017 )|