React shortlist for a Junior dev
Some people don't even start to learn React because they assume it is too hard and they don't know how deep the water is. What if there was a shortlist of things to know? I would like to share such a list with a bit of explanation about it.
Here is also a visual representation of contents (the bigger the slice is visually the harder it is for understanding in my opinion):
1. Installation
- How can I set up my first React app? → You should use create-react-app. Or even simpler, just run the codesandbox (online text editor) with create-react-app installed.
All of the examples in the post will be using this second method (codesandbox).
2. App structure of create-react-app
- What the app consists of? → There are 3 main files that developer should know about:
1. public/index.html → static template with a <div id="root"></div> for React app mounting. Its content can be as simple as just:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
</html>
It can also include some other things like any other regular HTML file: meta tags, links etc, but the developer rarely needs to check this file at all.
See it in codesandbox.
2. src/index.js → source code of the app. It is also auto-generated by create-react-app and could look as follows:
import React from "react";
import ReactDOM from "react-dom";
const App = () => <div>Hello world!</div>
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
import statements and ReactDOM things are a standard create-react-app boilerplate here. The actual code of the application is inside the App variable. It is also called React Component. In all of the examples below, I will omit boilerplate and focus on the App contents only.
See it in codesandbox.
3. package.json → stores app dependencies (packages, that should be installed for the app to work). Could be something like this:
{
"name": "react",
"version": "1.0.0",
"description": "React example starter project",
"keywords": ["react", "starter"],
"main": "src/index.js",
"dependencies": {
"react": "16.12.0",
"react-dom": "16.12.0",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
}
The developer mostly uses the "dependencies" field to add any libs to the project.
See it in codesandbox.
2. Markup
- How do I render HTML? → HTML markup in React is almost the same as regular HTML and can be copy-pasted from any HTML page. In case something is different/wrong, React will add a warning to the console with a hint about how to fix it. Here is an example of HTML markup in React that is also called JSX or JavaScript XML where XML is Extensible Markup Language:
const App = () => {
return (
<div>
<div>Awesome content!</div>
</div>
)
}
See it in codesandbox.
- How do I render HTML conditionally? → curly braces can be added to HTML markup in React for variables
const isVisible = true;
const App = () => {
return (
<div>
{isVisible ? <div>Awesome content!</div> : null}
</div>
)
}
See it in codesandbox.
- How do I render a list of items? → rendering of a list is possible using the .map() method of an array.
const list = ["first text", "second text"];
const App = () => {
return (
<div>
{list.map((text) => (
<div key={text}>{text}</div>
))}
</div>
);
};
See it in codesandbox.
3. Event handling
- What if the user clicks on a button? → React has event handlers that can be added directly to tags like follows:
const App = () => {
return (
<div>
<button onClick={() => console.log("the button was clicked!")}>
Click me!
</button>
</div>
);
};
See it in codesandbox.
4. State
- What if I want some variable to be changed, how do I update the app after the change? → React has a special variable that triggers the render of the app being changed. It is called state. It is special because any other variables changed don't affect the render. To use state in the app, a special function should be imported alongside with React: useState
import React, { useState } from "react";
const App = () => {
const [
isVisible, // current value is stored in this variable. The name for it is not reserved and can by anything, for example, isOn or isDisplayed etc
setVisibility // the function to update the value of the variable. The name for it is not reserved also and can be anything. For example, setOn or setDisplayed etc
] = useState(false); // initial value that is assigned to a variable on app start
return (
<div>
<button onClick={() => setVisibility(!isVisible)}>Click me!</button>
{isVisible ? <div>Awesome content!</div> : null}
</div>
)
}
See it in codesandbox.
5. Fetching the data from the server
- How do I get data from server to display it in React? → To get the data from server you should use the fetch method. Here is an example of fetching and rendering the list of Github users:
import React, { useState } from "react";
const App = () => {
const [list, setList] = useState([]);
return (
<>
<button
onClick={() => {
fetch("https://api.github.com/users")
.then((response) => response.json())
.then((data) => setList(data));
}}
>
fetch
</button>
<ul>
{list.map((user) => (
<li key={user.login}>{user.login}</li>
))}
</ul>
</>
);
};
See it in codesandbox.
Summary
If you know this shortlist of React then you are able to do about 80% of the work that is required for a Junior React Developer position. The other 20% comes with practice and includes different variations of the above and can be usually mastered in a good team with the help of more senior devs.
Please post any questions in the comments below !