My Simple React Tutorial.

React is one of the most powerful Javascript frameworks around right now, this tutorial will introduce you to React, and tell you why you need to start using it right now.

Let’s face it, if you’ve got barely any experience working with complex JavaScript frameworks like React, then learning it might be tough. Thats why I made this tutorial to teach you the very basics. This is not a tutorial to lean how to create a React application, if you want that theres a million and a half other tutorials out there for you — this will be more of a way for me to explain to you the basic aspects of React design.

If you haven’t yet, you should open up the React.js docs in a new window so you can reference it if you need to. As well, you’re going to want to have a decent understanding of JavaScript and web development before we begin.

Lets get started.


The first thing you should know is that React.js is used for creating Single Page Applications (SPAs) that can ‘React’ dynamically to the data they’re provided. That means, the webpage dynamically changes shape to fit your data as you program it to do. In doing so, we recursively break each element of a website into respective ‘Components’, then piece them back together to create our application.

Componentizing you app is a great idea. By componentizing you can delegate specific tasks of your application to an individual component. For example, you may want to design an app with two columns, one displaying one set of data, and another displaying something completely different, and each having their own different functionality. Since the two naturally have no relation to each other, neither should their code, and as such you can break them into two separate components.

When I first started thinking in React, I noticed that many of the design principles followed those of Object-oriented design. In this case your ‘objects’ are your react components, each having their own sets functions, data and children. Of course, React doesn’t follow all object-oriented principles, but i’m sure you’ll be able to draw comparisons by the time you finish this tutorial.


Lets take a look at an example of a very simple React component.

Pretty simple, right? This React component represents a simple <div> Hello Universe. </div> that is rendered to the webpage. Let me explain the gist of the code that makes up this component.

For now lets ignore the constructor(props) function, we’ll get to it later.

As for the render() function, to start, there should only ever be one render() function in a React component, and in this case, it’s place is simply to return the <div> Hello Universe. </div> element — which if you’re wondering, isn’t HTML, but rather JSX.

The two functions constructor(props) and render() are wrapped up nicely inside the Example class, which extends React.Component.

And there you have it, a functioning React component. Of course theres a few more things I need to explain before we can do anything more advanced than a produce a glorified div element. To do so, lets take a look at another example.


Remember that the point of React is that you can combine components together to create your overall application. In doing so, you’re going to be rendering other components you’ve created inside others.

Component-ception

Lets have a look at another example, where I use React to render two components inside another component. Woah.

which will produce …

<div><div>Hello</div><div>Universe.</div></div>

Cool, right?

As you can see, inside the render() function you can place not only normal HTML elements, but also the other react components you’ve already made.


So by now you should understand two key things:

  1. React components can be created using the general outline I provided in the first example.
  2. Read components can be combined together to create your overall application as we saw in the second example.

So now we can get to the cool stuff – explaining how react creates Reactive components that ‘React’ to the data they’re provided.


So, whats State and Props all about, and why are they so dang cool?

State and Props are the key elements that make React something special. As you hopefully remember, I briefly mentioned them earlier in this tutorial. They are both similar yet different, as I will explain now.

State:

You can think of state like a sort of mini database that resides internally within your component. All it is is a single JavaScript object that you use to store the current data relevant to your component. So you’re probably wondering – what kind of data should we store in our component state? Let’s explore a few examples:

Say you’re creating a react component that represents a clock on a webpage. There’s a few important prices of data that make up a clock, the current time for one, the time zone, any alarms present and other settings. You can store all this data inside a the state object. In this case, a state object might look like:

state = {currentTime {hour: 0, minute: 0, second: 0}, alarms: [], timeZone: 'PST'}

Say again that you’re creating a component which represents a list of items stored in a table. In this case you’re going to want to store the items in the list, maybe the size of the list, and also the label the list has all inside that components state. In this case they object might look like:

state = {items: [{name: 'item1'}, {name: 'item2'}], size: 2, label: 'List of items.'}

Now some developers will say that i’m storing too much inside my state object, but personally I like to keep all of the relevant data to my component inside that components state. But to each their own.

Right, so you now understand the general purpose of state. Lets explore our example of the list of items component and see what it might look like:

As you can see, the state is where all of our data is stored inside our component. You can see that I access the state on when I go this.state.items inside the render() and proceed to iterate through the array of items using a map function.

You can also see that you can update the state of a component as I do inside the addItem function. The setState function is how you should always go about setting the state of your react component. When addItem is called and it performs the setState function on the component, the components state will change, and thus trigger the component to re-render according to the new state object, thus including the new item in the list.


Ok, great, thats cool, State handles the data inside your react component. Now lets talk about props.

Props

Props aka Properties are the data that you pass into a React component before its mounted. The idea is that you can pass into a react component and have it form itself according to that data.

Lets consider a react component that represents a webpage navigation bar. Inside that header there will be a title, and a list of items. When you go to create that component you would go <Header title='My title' items={[item1, item2]} /> . Quite simple really.

Lets look back at our previous ListOfItems example and consider now that when we create the ListOfItems component, that we pass it a title, label, and list of items as props. That will look like <ListOfItems title='A list of items' label='My List' items={[{name: 'item1'}, {name: 'item2}]} /> .

Accessing those props inside your component is also quite easy. Heres an example where we render our ListOfItems component and pass it some props:

Awesome, now the component Example has complete control of the output of the ListOfItems component as it’s the one setting its props, and thus its data.

Hopefully you should be able to point out some key differences and similarities now in your mind between state and props in react. The similarities are that both are deterministic, represent native JavaScript objects, and when either change they will trigger a re-render of the React component. The differences include that state resides internally within its React component, and props are the setting that are inputted when you create a React component.

Together state and props create the links for data to travel through and between react components to create truly ‘Reactive’ applications. If you’re looking to expand your knowledge of React further I highly recommend you read through the React documentation if you haven’t done so yet. Facebook did an amazing job at explaining the framework and it’s worth a read.

You should also check out Redux, a framework for controlling your apps state. I may do a tutorial on that in the near future, so stay tuned!


Awesome, now you know enough to start creating with React. If theres anything you think I missed in this tutorial, let me know!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.