Mark Sta AnaPhoto by Jean Blackmer on Unsplash
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 1: 26th of September: I passed by Fox assessment!
Update 2: 26th of September: First time to embed codepens, if anyone knows how to show the source code rather than the result. Drop me a note!
Web App Dev Core Skills Level 2 aka Fox
This is the next level after Hedgehog, the introductory post for this core skill can be found on my previous post called Web App Development Core Skill: Hedgehog - Part One. The specific of Fox can be found on learn.madetech.com
Unlike the previous level, this assessment mostly deals with purely the practical side of React development. I say mostly because there is a question around the uses of the key prop.
Assumptions
In this assessment, you will be expected to continue working on your application that was started in Hedgehog.
Storybook
As part of my actual assessment, I decided to use Storybook to demonstrate my components whilst also showing the code in my editor. For the blog post, I made a decision to instead use codepen.io, because I felt it was more example to show code examples rather than demonstrate Storybook.
But fear, not I will be writing a separate blog post extolling the virtues of Storybook. It's really quite amazing!
Getting crafty with React
This assessment sees you creating components in your application and you will be assessed on the following:
- Contains a component without any props or state
- Contains a use of the
keyprop - Contains a component which makes use of a function passed in as a prop
- Contains a component which renders differently based on state changes
- Contains a component which changes state in response to an onClick event
- Contains a component which has been styled without global styles
- Contains a component which renders differently based on the following prop types being passed in:
- A boolean
- A string
- The
childrenprop
There was a small theoretic piece added the assessment around what the key prop Is used for. We’ll address this when we demo “Contains a use of the key prop”.
Now let’s tackle each part of the assessment as a separate subsection!
A word about the example code
All the example code that follows assumes the HTML has a div with the id of root:
<div id="root"></div>
The example code snippets you'll see is just the JSX part that creates the component. A full working demo can be found in the codepen snippet.
Contains a component without any props or state
const element = <h1>Hello, World!</h1>;
ReactDOM.render(element, document.getElementById('root'));
Contains a use of the key prop
The reason why the key prop is so important, is that it prevents React from trying to mutate all children components when you are trying to merge two sets of children together. If you have the React dev tool, you'll be warned if your children don't have a key prop.
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>{number}</li>
);
return (<ul>{listItems}</ul>);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById("root")
);
References
Contains a component which makes use of a function passed in as a prop
See the example in the next section.
Contains a component which renders differently based on the following prop types being passed in
- A boolean
- A string
- The children prop
class Printer extends React.Component {
constructor(props) {
super(props);
}
render() {
let childCount = React.Children.count(this.props.children);
let message;
if (childCount < 1) {
message = (
<span>js type: {typeof(this.props.value)}</span>
);
} else {
message = (<span>not a js type: {this.props.children}</span>);
}
return (<h1>{message}</h1>);
}
}
function Func() {
return 1;
}
function Child() {
return 'I am a child component!';
}
function App() {
return (
<div>
<Printer value="i am a string" /><br />
<Printer value={true} /><br />
<Printer value={Func} /><br />
<Printer><Child/></Printer>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
Contains a component which renders differently based on state changes
This was shamelessly stolen from the official React docs!
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState( {
date: new Date()
});
}
render() {
return (
<div>
<h1>{this.state.date.toLocaleTimeString()}</h1>
<h2>This component is changing based on it's state</h2>
</div>
);
}
}
Contains a component which changes state in response to an onClick event
class App extends React.Component {
constructor(props) {
super(props);
this.state = { playing: false };
}
playPause = () => {
if (this.state.playing) {
this.setState({ playing: false });
} else {
this.setState({ playing: true });
}
};
render() {
const { playing } = this.state;
return (
<div className="app">
<button onClick={this.playPause}>{playing ? "Pause" : "Play"}</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
References:
Contains a component which has been styled without global styles
const divStyle = {
color: 'blue'
};
function App() {
return <h1 style={divStyle}>Inner Style Example</h1>;
}
ReactDOM.render(<App />, document.getElementById('root'));
References:
