React Flashcards
WHAT IS REACT JS?
Tip: OK, BASIC sounding question, but that’s the thing: it’s so basic you might not have a succinct definition handy. And that’s exactly why interviewers ask this simple but telling question. Here are a few quick points to cover:
React JS is a front end JavaScript library for building web and mobile user interfaces (TK)
It was developed by Facebook in 2011
React allows developers to build reusable UI components
It has the support of a large, open source community
WHAT ARE REACT COMPONENTS? WHY ARE COMPONENTS SO IMPORTANT TO REACT?
Tip: This question should be easy to answer if you’ve spent any time with React.
When it comes to using React, everything boils down to components.
Components are the building materials React uses to create website and application UI’s.
Components break a UI down into reusable parts (one of React’s core competencies). React then renders each UI component as needed (separately from the others), which is a big part of React’s fast performance speeds.
WHAT’S THE MAIN DIFFERENCE BETWEEN PROPS AND STATE?
Tip: When it comes to granular technical questions you’re likely to get about React, this is a mainstay. You’re familiar with React, so you’ve got this, but remember:
“State” describes a default data value in a React component that can change over time (usually based on user actions that call for changes in a UI).
“Props” (or properties) describe the way a React component is configured. Props do not change.
In summary: state is mutable (changeable based on user actions) while props are not
CHOOSE ONE COMPONENT LIFECYCLE METHOD THAT YOU’VE USED ON A PROJECT. HOW DID YOU USE IT?
Tip: If you’ve worked with React, you know that a react component’s lifecycle includes its birth (the component is created and mounted on the project’s DOM), its growth (the component is updated over time), and its death (the component is unmounted from the project’s DOM).
Meanwhile, component lifecycle methods are functions that a component can execute during specific lifestyle phases. The best way to answer this question is to think back to a specific example from a project you’ve worked on, whether for a job or a student project.
Example: “When building a chat application, we used the componentDidMount lifecycle method to fetch data from a server.” Then fill in specifics and details as needed.
Simple as that!
WHEN WOULD YOU USE A CLASS COMPONENT OVER A FUNCTIONAL COMPONENT?
Tip: React uses two kinds of components—class components and functional components.
Functional components are the most basic kind of React component, defined by the components (unchanging) props. Class components are more complicated React components that allow developers to execute component lifecycle methods and manage a component’s state. This means class components are used over functional components when you need to manage state or use component lifecycle methods
WHAT ARE REACT EVENTS?
Tip: Know what an “event” is in React, but wondering what the best way is to explain it? Try this:
Events are reactions (the library IS called React, right?) that are triggered by specific user actions like clicking on a UI button, hovering a mouse over a UI object, using keyboard commands with the UI, etc.
WHAT IS JSX?
Tip: JSX is a key feature of React, so you need to be able to give a thumbnail explanation. Use these points as your guide:
JSX is an HTML-like syntax that let’s developers write HTML style code in JavaScript, in case you prefer the readability of HTML to raw JavaScript
Developers do NOT need to use JSX to build websites or applications with React, but it can be a helpful tool for reducing overall code complexity (and Facebook encourages using it in their official React documentation)
If you have experience using JSX to build a website or app, mention some of the specific pros or cons you’ve encountered related to the process
WHAT ARE VIRTUAL DOMS AND HOW DO THEY WORK?
Tip: React’s Virtual DOM function is one of the platform’s key functions, so you need to be able to explain it clearly.
When web browsers render HTML documents and turn them into a website or application on a screen, they create a representational tree of how the site or app is arranged called a Document Object Model (DOM).
Without React, your website or app will use HTML to update its DOM in order to make things “change” on screen without users needing to manually refresh a page. React JS takes a different approach by creating a Virtual DOM—a copy of the site’s “actual” DOM.
React uses this copy to determine what parts of the actual DOM need to change based on a user’s action. React then takes the change date from the Virtual DOM and selectively updates the actual DOM (versus reloading the entire thing). Over time, this leads to significant performance improvements for the website or application.
HOW WOULD YOU DEBUG AN ISSUE IN REACT CODE? WHAT DEBUGGING TOOLS HAVE YOU USED?
Tip: Debugging as a crucial part of the development process. Before you start your next React JS job interview, make sure you have experience with the following industry standard debugging tools (and can explain how you’d use them):
Linters (eslint, jslint)
Debuggers (React Developer Tools)
REACT JS VS REACT NATIVE—WHAT’S THE DIFFERENCE?
Tip: If you’re applying for a job that focuses on using React JS, you already know what React is. But what about React Native? Employers will want to know you can make a clear distinction between these two platforms. So what IS the difference?
Again, React JS is a front end, open source JavaScript library used for building UIs.
React Native, on the other hand, is an open source, MOBILE framework that allows developers to use React on platforms like Android and iOS. “Native” is a reference to the fact that React Native integrates React components with the native capabilities of these mobile-specific platforms.
WHAT ARE SOME OF THE MAJOR ADVANTAGES TO USING REACT WHEN BUILDING UIS?
Tip: Employers want to know that—while you know how to use React—you also know WHY React is such a useful tool in the development process. Some of the major advantages of using React include:
Increased application performance via the Virtual DOM model
Improved coding efficiency with JSX
The ability to reuse components across multiple projects
Flexibility and extensibility through add-on tools provided by React’s open source community
WHAT ARE SOME OF REACT’S LIMITATIONS?
Tip: Realism goes a long way in a job interview. Yes, React is a tremendous tool, but it’s got to have some limitations, right? Knowing what React ISN’T as good at shows you’ll have good judgement and context when you’re using it on projects. Some of React’s limitations include:
React JS is a JavaScript library and not a full-blown framework, meaning it might not be full service enough for some project
React’s library is extremely large and can take additional time and experience (past the initial learning phase) to really understand
JSX adds a new coding dimension for developers who haven’t used before (though it does have a gentle learning curve due to its similarity to HTML)
WHAT IS REDUX?
Tip: Redux is a library that’s compatible with and complementary to React, so it’s important to have enough understanding to be conversant about it in a React job interview. Key points include:
Redux helps developers build web applications that perform consistently and are easy to test. It also includes live code editing and debugging tools.
Redux can be used with React or any other UI library.
React helps developers divide UIs into multiple components, but doesn’t have a specific way to keep track of state data. Redux is a library that compliments React by providing a stable way to track this data.
WHAT ARE THE ADVANTAGES OF REDUX?
Tip: The answer to this one goes hand-in-hand with Redux’s definition, but to add to the list, try the following:
Redux adds a solid structure to React code, making your code easier to maintain, and your intended coding results more predictable.
Redux includes developer tools that allow you to track your web application’s performance in real time – From actions to state changes, developers can track everything going on in the application in real time.
Like React, Redux has strong community support and robust ecosystem.
WHY DID YOU CHOOSE TO WORK WITH REACT?
Tip: This kind of question is less about rattling off facts related to JSX, Virtual DOMs, props, or state, and more about explaining to an employer why you have a professional interest in working with React JS. One of the main reasons this question (and your answer) is of interest to an interviewer is because it gives a sense of how you might explain the importance of using React to a non-technical client or stakeholder.
To answer, simply think of what drew you to React JS. It can be something as basic as the fact that React is easy to learn and start with, but allows plenty of room for growth over time (showing your willingness to learn new things and expand your knowledge as you go), or something as practical as the fact that there are so many job opportunities for React developers (showing you keep on top of the industry and are able to adapt as needed).
