Notes on React

I’m currently teaching myself React.js. Though I built an app using React Native as my final project at Makers, the jump from never having even used React and starting with React Native was huge, not to mention the time pressure of having less than 2 weeks to complete the project. So I’ve gone back to basics to consolidate my understanding of the integral features of React. Hopefully this will set me in good stead for future React projects.

I’m writing this article as part of that consolidation process and so I have a reference point if I need one on React syntax. By explaining to myself in my own words how things work this should I plan to update it as I go along and when I’ve had more practice using React in my own projects. Hopefully it should also be a great marker of how much I’ve learnt.

Components and Props

Components are used to breakdown a website into individual reusable pieces of code. As they can be reused, this is great for adhering to the DRY principle (Do Not Repeat yourself). They are like a Javascript function and what is returned is rendered as part of the UI. In order for components to be truly useful and reusable, props can be used to customise them.

A simple example of using props (taken from this course). The Card component uses props to take a customised name, image and contact details.

A couple of useful things I learnt from this tutorial were defaultProps and PropTypes.

DefaultProps, is pretty self explanatory, it allows you to set a default prop if no prop is given, it is a component property. An example of defaultProps syntax using the Card component above:

PropTypes is a library which will help make your code more robust and will help catch errors. You can use it to set what type your prop will be, for example if if will be a string, an integer or a boolean etc. Though the component will still render, the console will show an error if the incorrect prop type is given. An example of PropTypes syntax:

Hooks — useState

The useState hook enables you to have interactivity in your app, a web application is able to dynamically update. Rather than re-rendering the whole page, when you use the useState hook, only the part of the page that needs to be updated is. The useState hook must be used inside a function component, not a class component.

The useState function outputs an array with a value, the value is the initial state, and a function, the function is used what is used to update the value. for example if you had something like this-

The console log would show an array with two values, the first being the number 2, the initial state we have set, the second value of the array would be a function, in this example it would be nameless as we haven’t set it yet.

Below is a full example of useState. Inside the useState parenthesis is the starting state, in this example it is set to the constant now, which is the current time. time is the state that gets updated, and as it is updated it is displayed in the h1. When the button ‘Get Time’ is clicked, the updateTime function in run. Within the updateTime function, the setTime function is run and the state is set to the newTime constant, which the new updated time. The h1 will therefore update to show the new, current time.

That’s all for now, I’m going to build myself a CV/portfolio website using React, so I’m sure I’ll have some more notes to add to this shortly. I’m also going to take a look at Jest so I can learn how to test React, plus I want to refresh my Javascript too. Always so much to learn!