React: Start Here


First post: Installing React
Next section: The Basics

Start Here

So You Want To Learn React?

Maybe you want to create a web app, and you’ve heard that React is a good place to start. Maybe you’ve taken over a project in work and been told “Yeah, we don’t really know what the last person was doing, but hopefully you can fix it”. Maybe you feel bad that you never got round to learning anything useful during lockdown, and you’re trying to make up for it now. Whatever your reason for being here… welcome.

In this tutorial, we'll take a very quick look at what React is and why you should use it, and then we'll see how to install it and build an app.

A Bit of Background

I started this site because I began learning React a few years ago, and found it hard to find tutorials that
1) covered what I needed to know,
2) I could make sense of, and
3) talked about React in the way it’s actually used.

Point number 3 was probably the biggie, because there are kind of 2 versions of React. Not officially, but in practice. There are people who write React in class components, and there are people who write React in functional components (we’ll talk about what these two things are later). Either is fine (in fact it’s perfectly acceptable to use a mixture of both), but since class components were the original way of doing things, most of the documentation seems to still use them; on the other hand, most developers I’ve come across use functional components and Hooks and things, so I was being handed half-finished React projects and comparing them to stuff I found online and being a bit freaked out because they looked completely different.

The General Idea

Before we start coding, let’s take a quick look at why React is so powerful. React allows you to create ‘Components’, which are little blocks of code which make up an element on the page (like a button, or a line of text, or an image). Each Component specifies what the resulting element is going to look like, and what will happen when things are clicked on, dragged about, hovered over etc.

So we can create a ton of Components, and then join them all together to make a web app. And then if we want to create another app, we can use some/any/all of the Components in there too, plus some new ones. Handy. It’s like Lego, but it doesn’t hurt if you stand on it.

Plus, when something changes on the screen, React will only update what it has to, because each component is self-contained. This makes it super fast, because it's not redrawing the entire screen each time.

For instance, on a very basic level, we might want to display some photos in a gallery.  Thinking about it, we decide that for each photo we're going to need a src (which tells us where to find the image) and a caption. Apart from that, everything else about each photo is identical - we want them all to be shown with the image on top and the caption underneath; we also want all the images to be the same height.

So, we create a PhotoItem component (we can call it whatever we like, as long as it starts with a capital letter) which takes a src and a caption and returns us a piece of HTML which shows a photo and caption as described above.  Let's not worry about the details of this component right now; let's just assume we've made it already.

Code-wise, for each photo we just do something like this:

    <PhotoItem src="https://link-to-my-image" caption="A work of art" />

and the photo is rendered on our screen with a caption, all aligned nicely. (Don't worry about the finer details here; we'll come to those).

Then we can use lots of PhotoItem components with different src and caption values to make a PhotoGallery component. Assuming we have an array called photoList which contains photo objects (each photo object has a unique ID, a src and a caption), we can just do this: 

    photoList.map(photo) => {
        <PhotoItem key={photo.id} src={photo.src} caption={photo.caption} />
    }

We might add a bit of styling and BOOM! we have a photo gallery.

You may not have come across the map function before, but trust me, you will (we’ll look at it more in another tutorial) - it's basically similar to 'for... each'. Also don't worry about the 'key' for now.

The really handy thing is that the gallery will update automatically every time photoList changes. No more messing about with jQuery selectors every time you want to remove a photo - you just delete it from photoList and it vanishes. And adding a new photo? - just slot it into the array wherever you want, and it appears.

Even better, as we said above, React will only update when it needs to - so, if you update the caption on a single photo, for instance, React will just redraw that caption, rather than the entire page.  This makes it extremely fast and efficient.

You can write each component yourself, or use one from a React library (there are loads of libraries, such as Material UI and React Toolbox, which allow you to pick from a list of ready-made components which includes buttons, form inputs, calendars etc - we'll cover this in another post). Often the library components will have loads of options for customising your component size, colour, font style, what-happens-when-you-click etc, and you can specify as many or as few of these as you need to.

Where To Begin

So the first step is to install React, and build an app, all of which is very simple. We'll cover this in the next post.

Comments

Post a Comment