Reactjs

In this tutorial we are going to get up to speed with some basics of React.js which will help us understand how to work with state.

State is stored information at a given point in time and it’s common to manipulate state when working with data in an application. React itself is a Javascript library which helps you create your UI(User Interface) as a group of components. Components are autonomous and therefore maintain their own state. Components can however be created within other components enabling you write modular code.

Explore React Courses

The React site provides a handy Starter Kit to get you quickly started. This isn’t typically how you would use React in production but it’s a good way to get your hands dirty.

The starter kit contains a build folder which contains all the required js files.

A React Component

Below is how your HTML file for testing should look like. React’s core concept is of course the component and a simple one is demonstrated here

In our <head>  tag we have the react library and the react-dom library for working with the DOM.

We also include Babel a transpiler which enables us use the latest features of Javascript

When we create a component, we have to render it somewhere. So we create an empty div and we give it an id of area which we will reference when we are rendering our component to the DOM.

We use the createClass function to create a component class. The component implements a render method which renders the DOM of the component. In the render method we can return any HTML elements. Here we return an  h1  element. From our react-dom library we have a  ReactDOM  class which has a render function for rendering our component to a webpage. This should not be confused with the render method in the createClass createClass  function. This function takes two parameters, the component and the DOM container node or simply the place where we are going to render the component on our web page. Here we use the method getElementById from the Document interface to access the div we are going to use to render our component. This is standard Javascript for accessing the DOM and is not part of React.  In the render function we are also using what is referred to as JSX for creating our HTML element which in this case is our component. JSX is a Javascript  syntax extension which looks like XML. Babel which we mentioned earlier converts its to Javascript.

Explore React Courses

So actually  <HelloWorld /> becomes React.createElement(HelloWorld) . You can of course use any of the two but JSX just makes things easier and is highly recommended.

Properties

Before we talk about state we have to understand what properties or props in React are.

We can add properties to a component and pass information to these properties in our component. Properties are a very important part of how you use React but if this is still a mouthful, let’s look at the syntax of how props are built.

Here we add a prop called  name  to our component. Here name  is just a variable representing our property. Properties are created when we are rendering or initializing our component. This will be an important difference when we discuss state. From our example above,we also assign the property a string  “James” and in our component we just have to call the property using  this.props ,   this  refers to our current context which is the component. If you reload this in your browser   Hello world  from our previous example  should become  Hello James .  An important thing to note is that anything that is between curly braces is pure Javascript.

Another thing we can do is add a default property to a component.

Inside our component before our render function, we create another function called getDefaultProps which React calls first before our Component is rendered.

Now when we reload our browser we will still get   Hello James  but if we remove the property like this.

We will get  Hello Clark , “Clark” being the string we assigned to our default property which we defined with getDefaultProps .

It’s a good idea to define your props and what their types are in your component such that its’ self documenting. Additionally, when you are using an incorrect prop type and you pass it into your component you will see an error.  

This how you would do it.

Now  propTypes is really an Object of Objects with the objects having the keys as the property names and the values as the Property types.

You can check the various prop types here .
Now you have a good idea about what properties are.

React State

State also affects how components behave and render. There’s however no way to define what state should be passed to a component like how we were doing with properties. As we mentioned earlier, properties are created when we are initializing our component. It is not the same however for State. State only exists within a component when you are defining it.

We are going to learn how set the state of a component, retrieve that state and modify it. We are also going to be introduced to an important  method that is triggered every time your component is rendered. Lets introduce State in our component.

Like getDefaultProps and other objects we can define when creating our components. We have getInitialState  object which takes as its value a function that will return the initial value of this.state . Notice how similar this is to   this.props  we discussed earlier

Explore React Courses

If we run this we will now also be able to see the value 1. The div in the return statement of our render function  is not there by accident. Your components have to have wrapper around them or else it won’t work. Initially it worked because the h1 tag was the wrapper.

If we wanted to get the current state, modify it and re-render it to the screen. We will need to use a new method called componentDidMount which will run after the component has mounted.

Remember when we said that  getInitialState sets the initial value of  this.state . It will be 1 in this case

Here in our method we call the setState method which we use to increment the initial state by 3. The  setState  method is used to manipulate state and this refers to our current context which is our component.  

When we were dealing with properties, it was possible to define their types and enforce them. Such a thing doesn’t exist in State. It’s up to you to know whether you are using the right type or not.

State downfalls

When you use state, you risk introducing errors in rendering and behavior of your components because of some of the differences with properties mentioned above. Also using properties to define state is a bad idea because if the property changes your State will now be stale because it is based off wrong data. Therefore you should limit your use of state.

Comments