Mark Sta AnaPhoto by Liudmyla Denysiuk on Unsplash
This is part of my "Blogging my Homework" blog post series, the introductory post can be found here.
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
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
- https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c
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:
- Prevents injection attacks by escaping any values embedded before rendering
- Represents objects
References
Elements
React elements are:
- Are plain objects and cheap to create, unlike browser DOM elements.
- Are not components (more on this later)
- Immutable, that is once created, you can’t change its children or attributes.
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:
- Does your application require a lot of client-side business logic?
- Do you need simple and reusable components?
- Could your application benefit from selective reloading? I.e. does anything on the page need to react?
- Is an existing customer development team already using React or Node?
- Does your application require a lot of DOM manipulation?
- Would the customer benefit significantly from having fast page load times?
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:
- Does the application remain static after it has been built i.e. a static site generator like Jekyll?
- Does the application not require any interaction beyond page navigation?
- We want to use the latest and greatest technology!
- Javascript is everywhere, so why not just go with the flow!
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.
- Do not modify states directly, always use
setState() - State updates maybe asynchronous, this is because React may batch multiple
setState()calls into a single update for performance. Use the second form ofsetState()and pass it a function rather than an object. - State updates are merged
References
What props.children refers to
All the children of a component, children can be:
- Everything, don’t have to be other components
- Text
- JavaScript functions
React says children are an opaque data structure (Reach.children)
References
- A quick intro to React’s props.children – codeburst
- React This Props Children - Learn.co
- A deep dive into children in React - Max Stoibers Blog
How React allows you to respond to user events
They act like event handling on DOM elements, there are syntactic differences:
- React events are named using camelCase rather than lower case.
- JSX you pass a function as an event handler rather than a string
- You must call
preventDefaultexplicitly rather than returnfalse.
References
One approach to styling react components
- Inline styling
- Radium
- External stylesheets
- CSS module
References
The component lifecycle
Lifecycle hooks are used to free up resources components when they are destroyed.
- Set up (React parlance: mounting) using the
componentDidMountmethod - Teardown (React parlance: unmounting) using the
componentWillUnmountmethod
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
- Redux
- Context API (React)
- Component state (very basic)
- JS module singleton pattern
- Unstated
- MobX
References
- The state of the state: React state management in 2018 - DEV Community 👩💻👨💻
- The 5 Types Of React Application State - James K Nelson
- Application State Management – kentcdodds
- Managing React Application State with Mobx — Full stack tutorial (Part 1)
Further Reading
- Learning/Intro
- Integrations w/ Web Platform
- VS Code
- Misc
