├── .gitignore ├── dist ├── bundle.junior.js ├── bundle.senior.js └── main.css ├── package-lock.json ├── package.json ├── readme.md ├── server.js ├── src ├── index.js ├── public │ └── js │ │ ├── junior.js │ │ └── senior.js └── views │ ├── junior.html │ └── senior.html └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /dist/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: steelblue; 3 | color: white; 4 | font-family: Arial, Helvetica, sans-serif; 5 | } 6 | 7 | .modal { 8 | padding: 12px; 9 | background: slateblue; 10 | width: 320px; 11 | text-align: center; 12 | } 13 | 14 | .click-catcher, .click-catcher--open { 15 | position: fixed; 16 | display: none; 17 | justify-content: center; 18 | align-items: center; 19 | top: 0; 20 | left: 0; 21 | width: 100vw; 22 | height: 100vh; 23 | } 24 | 25 | .click-catcher--open { 26 | display: flex; 27 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-job-interview-questions", 3 | "version": "1.0.0", 4 | "description": "## What we will cover", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.js" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "body-parser": "^1.18.2", 14 | "express": "^4.16.3", 15 | "react": "^16.3.0", 16 | "react-dom": "^16.3.0" 17 | }, 18 | "devDependencies": { 19 | "babel": "^6.23.0", 20 | "babel-core": "^6.26.0", 21 | "babel-loader": "^7.1.4", 22 | "babel-preset-react": "^6.24.1", 23 | "webpack": "^4.4.1", 24 | "webpack-cli": "^2.0.13" 25 | } 26 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # React job interview questions 2 | 3 | ## What we will cover 4 | 5 | * Questions that I would ask a frontend developer about React 6 | * A few examples of answers and my thoughts on these answers 7 | * A Junior code test 8 | * A Senior code test 9 | 10 | ## Notes 11 | 12 | This is a subscriber request video where I try to show you some brief snippets 13 | of how I would interview a frontend developer for a company that is looking 14 | for React developers. 15 | 16 | The goal is not to try to figure out how "good" the candidate is with code 17 | but rather how likely they are to be able to get productive in a short amount 18 | of time, what we are looking for is a gut feeling as it is almost impossible 19 | for an employer to figure out how "good" someone is in a hiring process. 20 | 21 | There are simply too many factors that affect someones performance in a 22 | job interview and at the end of the day most companies go with their gut. 23 | 24 | ## Questions 25 | 26 | * Why does React need a root element? 27 | * What is the difference between state and props? 28 | * What is context? 29 | * What are prop types and what are the benefits and drawbacks of them? 30 | * Which life cycle event is the most common from your perspective? 31 | * When do you use a pure component and when do you use a class? 32 | * Explain how the React rendering works in your own terms. 33 | * What is Redux? 34 | * Explain how Redux works in your own terms. 35 | * When do you use Redux? 36 | * What is a container component? 37 | * What is a view component? 38 | * What components make for a good container candidate? 39 | 40 | ## Why does React need a root element? 41 | 42 | Bad answer: 43 | "I don't know" 44 | 45 | Decent answer: 46 | "React needs a DOM element to hook in to" 47 | 48 | Good answer: 49 | "Since React is all Javascript it needs an element where it can 50 | render out it's own DOM tree" 51 | 52 | ## What is the difference between state and props? 53 | 54 | Bad answer: 55 | "I don't know" 56 | 57 | Decent answer: 58 | "State is where you store stuff that is internal" 59 | "Props is where you store stuff that is going to the next component" 60 | 61 | Good answer: 62 | "State is a way for a component to store an internal state and it is perfect 63 | for when you need to store a field value or perhaps toggle a modal" 64 | 65 | "Props is what is being passed to the component from the parent element, 66 | this is how you most commonly work with data in React" 67 | 68 | ## What is context? 69 | 70 | Bad answer: 71 | "I don't know" 72 | 73 | Decent answer: 74 | "Context is like a global prop" 75 | 76 | Good answer: 77 | "Context is a globally available prop that should only be used on occations 78 | when you need something that is going to be everywhere in the applications, 79 | perhaps for translating text or something like that." 80 | 81 | ## What are prop types and what are the benefits and drawbacks of them? 82 | 83 | Bad answer: 84 | "I don't know" 85 | 86 | Decent answer: 87 | "Prop types is a way for you to know what types a component is expecting." 88 | "They are great for when you want to know what a component needs to work!" 89 | "I don't know when they are a problem tbh." 90 | 91 | Good answer: 92 | "Prop types is a way for you to know what types a component is expecting." 93 | "They are great for when you want to know what a component needs to work!" 94 | 95 | "They often become legacy documentation and people forget to keep them 96 | updated or they put `.required` on the wrong things and often I see 97 | people use `.object` instead of `.shapeOf`" 98 | 99 | ## Which life cycle event is the most common from your perspective? 100 | 101 | Bad answer: 102 | "I don't know" 103 | "I never use them" 104 | 105 | Decent answer: 106 | "`componentWillMount` and `componentDidMount`" 107 | 108 | Good answer: 109 | "`componentWillMount` and `componentDidMount`" 110 | "`componentWillReceiveProps` it is often that I find that I need to do something 111 | when my component is getting a new state" 112 | 113 | ## When do you use a pure component and when do you use a class? 114 | 115 | Bad answer: 116 | "I don't know" 117 | "I only use pure components/classes" 118 | 119 | Decent answer: 120 | "I use pure components when I want to optimise for performance." 121 | 122 | Good answer: 123 | "I favour using pure components because there is often no reason to use a class 124 | if I am not storing a state or using a life cycle event" 125 | 126 | ## Explain how the React rendering works in your own terms. 127 | 128 | Bad answer: 129 | "I don't know" 130 | 131 | Decent answer: 132 | "React listens for DOM updates and rerenders the DOM tree on every change" 133 | 134 | Good answer: 135 | "React listens for DOM updates and rerenders the DOM tree on every change but 136 | it can do this very quickly because it uses component diffing which means that 137 | React checks if there has been a change to the component and only rerenders 138 | it if there is one" 139 | 140 | ## What is Redux? 141 | 142 | Bad answer: 143 | "I don't know" 144 | 145 | Decent answer: 146 | "Redux is a popular tool for storing state in React" 147 | 148 | Good answer: 149 | "Redux is a popular tool for storing state in React" 150 | "It is built on the pub/sub pattern or Flux and the idea is that 151 | you store your state in a big object and use actions to change 152 | that state" 153 | 154 | ## Explain how Redux works in your own terms. 155 | 156 | Bad answer: 157 | "I don't know" 158 | 159 | Good answer: 160 | "You declare a reducer that takes in an action and a state, 161 | when you disptach an action the state gets updated and React 162 | rerenders the DOM with the state change" 163 | 164 | ## When do you use Redux? 165 | 166 | Bad answer: 167 | "I don't know" 168 | 169 | Decent answer: 170 | "Most projects as it is very common that you need some global state 171 | that is shared among different components" 172 | 173 | Good answer: 174 | "Most projects as it is very common that you need some global state 175 | that is shared among different components but I only wire up components 176 | that need access to the global state" 177 | 178 | "Only in applications that need to share the global state, I mean it doesn't 179 | make sense to use Redux in your app if you don't share the state" 180 | 181 | ## What is a container component? 182 | 183 | Bad answer: 184 | "I don't know" 185 | 186 | Decent answer: 187 | "A container component is a popular way to separate the jsx from the logic 188 | of a component" 189 | 190 | Good answer: 191 | "A container component is a popular way to separate the jsx from the logic 192 | of a component but I only use it when my component is doing more than 193 | showing some information or passing things through to the view." 194 | 195 | ## What is a view component? 196 | 197 | Bad answer: 198 | "I don't know" 199 | 200 | Decent answer: 201 | "The view component is the dumb part of a component where you simply put 202 | the passed in props in to jsx" 203 | 204 | Good answer: 205 | "The view component is the dumb part of a component where you simply put 206 | the passed in props in to jsx, the view is now separated from the logic 207 | and some people will argue that this makes it reusable but that is very 208 | rarely true." 209 | 210 | ## What components make for a good container candidate? 211 | 212 | Bad answer: 213 | "I don't know" 214 | 215 | Decent answer: 216 | "Almost all components except perhaps for components that have no logic" 217 | 218 | Good answer: 219 | "I try to only use containers on components that are a bit more complex because 220 | the container itself makes the component more complex and if I am only making 221 | a small component without any extra complexity the cost of the container is 222 | greater than simply not using a container. 223 | 224 | ## Conclusions 225 | 226 | When interviewing someone for a React job it is vital that you have someone 227 | who knows React that does it, trust me, no recruiter or recruitment company 228 | will know half of what is needed to figure out if someone "knows" React. 229 | 230 | The questions you have seen are questions from someone who has worked with React 231 | for several years, they are questions that every React developer will face on 232 | a daily basis and those are the sort of questions you want your candidate to 233 | have answers to. 234 | 235 | Anyone can learn React just as anyone could learn jquery back in the day, 236 | the question is if you want someone who is good at React or someone who 237 | can do the job and deal with the fallout later. 238 | 239 | There are benefits to both approaches. 240 | 241 | ## Challanges 242 | 243 | Present the candidate with a skeleton project and explain that they are 244 | not allowed to use any other libraries than the ones in the `package.json`. 245 | 246 | Junior: 247 | 248 | The junior will have to create a Todo application using Node and 249 | the goal is to have a Todo list that allows the user to add todos 250 | 251 | Senior: 252 | 253 | The senior will have the junior test and when a todo is clicked 254 | there should be a React modal that shows the todo 255 | 256 | Note: 257 | 258 | In this video I will show you an extreme case for a senior, 259 | if the candidate solves this in a nice way they are extremely good, 260 | the goal with the test is to see how much "real" experience they have working 261 | with a common frontend issue that the `React mindset`* will beat 262 | out of them if they only work in React. 263 | 264 | `React mindset`: Everything is a tree, stay in that tree, stay inside React. 265 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const app = require("./src"); 2 | 3 | app.listen(3000); 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const app = express(); 3 | const path = require("path"); 4 | const bodyParser = require("body-parser"); 5 | 6 | app.use(express.static(path.resolve(__dirname, "..", "dist"))); 7 | app.use(bodyParser.json()); 8 | 9 | const makeFile = name => { 10 | return path.resolve(__dirname, "views", name); 11 | }; 12 | 13 | app.get("/", (req, res) => { 14 | res.sendFile(makeFile("junior.html")); 15 | }); 16 | 17 | app.get("/senior", (req, res) => { 18 | res.sendFile(makeFile("senior.html")); 19 | }); 20 | 21 | const todos = ["foo", "bar", "baz"]; 22 | 23 | app.get("/todos", (req, res) => { 24 | return res.json(todos); 25 | }); 26 | 27 | app.post("/todos", (req, res) => { 28 | todos.push(req.body.todo); 29 | return res.json(todos); 30 | }); 31 | 32 | module.exports = app; 33 | -------------------------------------------------------------------------------- /src/public/js/junior.js: -------------------------------------------------------------------------------- 1 | const React = require("react"); 2 | const ReactDOM = require("react-dom"); 3 | 4 | // knows about es6 5 | class App extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { todos: [] }; // knows about state 9 | this.saveTodo = this.saveTodo.bind(this); // knows about "this" 10 | this.inputRef = React.createRef(); // knows about refs 11 | } 12 | 13 | // knows about async/await 14 | async componentDidMount() { 15 | // knows about fetch and json 16 | const res = await fetch("http://localhost:3000/todos"); 17 | const json = await res.json(); 18 | this.setState({ todos: json }); 19 | } 20 | 21 | async saveTodo(e) { 22 | e.preventDefault(); // knows about form submissions 23 | const options = { 24 | method: "post", 25 | headers: { 26 | Accept: "application/json", 27 | "Content-Type": "application/json" 28 | }, 29 | body: JSON.stringify({ todo: this.inputRef.current.value }) 30 | }; 31 | const res = await fetch("http://localhost:3000/todos", options); 32 | const json = await res.json(); 33 | this.setState({ todos: json }); 34 | this.inputRef.current.value = null; 35 | return false; 36 | } 37 | 38 | render() { 39 | return ( 40 |
41 | 42 | 43 |
44 | ); 45 | } 46 | } 47 | 48 | ReactDOM.render(, document.getElementById("root")); 49 | -------------------------------------------------------------------------------- /src/public/js/senior.js: -------------------------------------------------------------------------------- 1 | const React = require("react"); 2 | const ReactDOM = require("react-dom"); 3 | 4 | // knows about es6 5 | class App extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { todos: [], open: false }; // knows about state 9 | this.onOpen = this.onOpen.bind(this); 10 | this.onClose = this.onClose.bind(this); 11 | this.saveTodo = this.saveTodo.bind(this); // knows about "this" 12 | this.inputRef = React.createRef(); // knows about refs 13 | } 14 | 15 | // knows about async/await 16 | async componentDidMount() { 17 | // knows about fetch and json 18 | const res = await fetch("http://localhost:3000/todos"); 19 | const json = await res.json(); 20 | this.setState({ todos: json }); 21 | } 22 | 23 | async saveTodo(e) { 24 | e.preventDefault(); // knows about form submissions 25 | const options = { 26 | method: "post", 27 | headers: { 28 | Accept: "application/json", 29 | "Content-Type": "application/json" 30 | }, 31 | body: JSON.stringify({ todo: this.inputRef.current.value }) 32 | }; 33 | const res = await fetch("http://localhost:3000/todos", options); 34 | const json = await res.json(); 35 | this.setState({ todos: json }); 36 | this.inputRef.current.value = null; 37 | return false; 38 | } 39 | 40 | onOpen(item) { 41 | this.setState( 42 | Object.assign({}, this.state, { open: true, clickedItem: item }) 43 | ); 44 | } 45 | 46 | onClose() { 47 | this.setState(Object.assign({}, this.state, { open: false })); 48 | } 49 | 50 | render() { 51 | return ( 52 |
53 | 60 | 61 | 66 | 67 | ); 68 | } 69 | } 70 | 71 | // knows that we can put things outside the class 72 | let node = null; 73 | 74 | class Modal extends React.Component { 75 | constructor(props) { 76 | super(props); 77 | this.state = {}; 78 | } 79 | 80 | // knows about static methods 81 | static getDerivedStateFromProps(next, prev) { 82 | // render since we are outside of our React tree 83 | node && ReactDOM.render(, node); 84 | return next; 85 | } 86 | 87 | componentDidMount() { 88 | node = document.createElement("div"); // knows when to use native js 89 | document.body.appendChild(node); 90 | // render since we are outside of our React tree 91 | ReactDOM.render(, node); 92 | } 93 | 94 | // knows about DOM cleanup 95 | componentWillUnmount() { 96 | ReactDOM.unmountComponentAtNode(node); 97 | node.parentNode && node.parentNode.removeChild(node); 98 | } 99 | 100 | render() { 101 | return 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/views/senior.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | entry: { 5 | junior: path.join(__dirname, "src", "public", "js", "junior.js"), 6 | senior: path.join(__dirname, "src", "public", "js", "senior.js") 7 | }, 8 | output: { 9 | path: path.join(__dirname, "dist"), 10 | filename: "bundle.[name].js" 11 | }, 12 | mode: "development", 13 | module: { 14 | rules: [ 15 | { 16 | test: /.+\.js/, 17 | exclude: /node_modules/, 18 | loader: "babel-loader", 19 | query: { 20 | presets: ["babel-preset-react"] 21 | } 22 | } 23 | ] 24 | } 25 | }; 26 | --------------------------------------------------------------------------------