Being a Hedgehog - Part Two


This is part of my "Blogging my Homework" blog post series, the introductory post can be found here.

Caveat emptor: any errors or misunderstanding around concepts will almost certainly be my own rather than my employee (Made Tech). This is after all my own study and mistakes do occur during learning.

Update 22nd of September: I passed my Hedgehog assessment!

Welcome back to part two of my study guide for Web Application Development! In the previous post, we covered the practical side of the assessment, this time we cover the theoretical side.

Understanding

There are nine areas where you will be assessed (in the form of Q & A) on your knowledge of React, we’ll cover each one as a separate section.

As part of your study material for this core skill, the documentation for React is cited as a good source of information especially the Main Concepts section. And whilst not part of the assessment you are expected to understand JSX and Elements.

If like me you haven’t touched JavaScript in a while, the React documentation provides excellent references to reacquaint yourself and to understand some of the new syntax:

References

Useful React knowledge

Whilst these are not part of the assessment, you’re expected to have an understanding of them.

JSX

Is short for Javascript Syntax eXtensions, it produces React “elements”.

Important: JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of the one used for HTML attribute. e.g. tabindex becomes tabIndex

Useful properties of JSX:

References

Elements

React elements are:

References

Situations in which using React would be a benefit

The Learn Tech resources provide a good starting point for understanding when we should use React or in fact any type of framework behind just HTML and CSS:

The last point I feel relates to the modern framework’s build tools that are optimising pages for faster load times rather than an attribute specific to React.

Now take a moment and think about your own idea for an application, if you answered, “Yes” to most of these questions then perhaps React is the best tool.

It’s also useful to think about when it would be inappropriate to React, here are some examples I could think of:

The last two I paraphrased from CSS-Tricks’ excellent When Does a Project Need React? article.

References

What a React component is

Components allow you to split UI into independent, reusable pieces that can be worked on in isolation.

If you’ve ever done Forms or Windows application development, you can think of the controls toolbox as being analogue to components.

The React page also provides a simple analogy for components they are like JavaScript functions.

Convention: Component names always start with a capital letter, this is because React trees components that start with a lowercase letter as DOM tags.

Components can refer to other components for their output. The convention is to create an App component that calls other components. This is important to know for refactoring.

References

What are props within a component

If we continue the analogue of controls for an application, then we can think of props (short for properties) as exactly the same thing. You define the properties of a control.

An alternative view again provided by the React page is that “props” are inputs and they return a React element describing what should appear on the screen.

Important: Props are read-only if your component modifies it’s own props it is considered “impure”. You cannot break this rule in React.

References

What is state within a component

States are similar to props but are private and fully controllable by the component. Recall in the last section that props are immutable that is they are read-only.

Local states are only available to JavaScript classes, they will not work for JavaScript functions.

States are private and fully controlled by the component.

References

What props.children refers to

All the children of a component, children can be:

React says children are an opaque data structure (Reach.children)

References

How React allows you to respond to user events

They act like event handling on DOM elements, there are syntactic differences:

References

One approach to styling react components

References

The component lifecycle

Lifecycle hooks are used to free up resources components when they are destroyed.

Lifecycle methods ensure that valuable resources are freed up when a component is destroyed. By defining componentDidMount (allocates) and componentWillUnmount (frees) methods. This is probably analogue to programming languages that have a garbage collector.

References

An approach to managing Application state

References

Further Reading



Tweet