React.js Q&A

Here are Q&As for foundational React concepts. I hope you find it helpful :)

Q. What is React.js?

• React.js is a front-end, open-source JavaScript library
• Used to build user interfaces

Q. When should you use React.js?

• Use React if you’re developing a highly dynamic user interface
• Dynamic user interface = Single Page Application (SPA) that has a lot of updates to state constantly

Q. What is JSX?

JSX (JavaScript XML)= React’s language — it resembles HTML and defines tree structures with attributes

• Babel = JavaScript transpiler — library that transpiles JSX into JavaScript for React apps

Why is Babel necessary? Browsers do not understand JSX code so it must be converted into JS so browsers know how to run it

Q. What do the React boilerplate files each do?

a) public/index.html: The content we tell React to render will end up inside the empty div with the id=”root”

• Empty boilerplate file that we insert content into using JS
• Markup will be done in JS using JSX

NOTE: This file is not edited — leave it as is

public/index.html: <div -d=”root”></div>

b) src/index.js: Tells React what to render within index.html

• Line 4: Loads another JS file/module called App
• Line 7: ReactDOM.render() has 2 parameters: <App /> component and rootElement → tells React to render <App /> within that empty root div in public/index.html

c) App.js: houses the content that is displayed on the website

Q. How does a React app work?

1. Transpile: Babel converts source code (JSX) into executable code (JS) so the browser knows how to run it
2. In package.json, the main: src.index.js informs the tooling which JS file is the starting point for dependencies, module loading and code execution

3. Tooling (Webpack) merges all JS modules/files into 1 single file → that 1 file is then loaded and executed by index.html

Q. What is the Virtual DOM and the diff?

Virtual DOM = in-memory representation of the DOM/copy of the DOM

diff = shows the differences between 2 copies of the virtual DOM/copies of DOM

DOM = Document Object Model → JS object that represents the HTML of a webpage

• When state changes, React ONLY updates that component and all its child components automatically (NOTE updating the entire page)

1. React first creates a copy of the DOM (virtual DOM) to ensure re-renders are fast and make sure we’re ONLY updating components that have their state changed
2. When state changes and an update is needed, React will make a 2nd copy of the DOM based on the state changes
3. React then compares the 2 copies of the DOM to see what the differences are → A diff is created and React will only update the things that have changed

Purpose of virtual DOM: enables React to detect what the changes are and ONLY update these changes in the actual/real DOM so it’s only triggering the browser to re-render when it needs to

NOTE: Even if state updates but there are no UI changes, there will be no re-render — Why? Nothing is different between the 2 virtual DOMs

• React will still check to see if anything needs to be updated BUT will only update if something has been changed in UI

Q. What is a component?

Component = JS files that contains HTML-looking code (it’s actually JSX)

NOTE: A React app’s UI consists of components → The components are made up of built-in and user-defined components

• When rendering, a component must return a single node or array of nodes
• To return multiple components from the render method (which we usually do), the components can be wrapped by a single component (ex. <div>…</div>, <>…</> (Fragments), etc.)

Refer to lines 6 and 9 in the picture below

Q. What’s the difference between built-in components and user-defined components?

Difference: React elements are lowercased (<div></div>) VS User-defined components are capitalized and use upperCamelCase

Further Info:

Built-in components/React elements: ex. <div>(line 6) and <h1> (line 7)

• They map to HTML elements — they are the only components that actually emit DOM elements in the browser document
• They’re React elements that are transformed into HTML DOM elements
• React components must contain React elements if we want anything to appear on the page (<div> (line 6) allows for the <App /> component to appear)
• Can be styled using CSS and can have event listeners added to them

User-defined/Custom components: ex. <EmployeeList /> (line 8)

• UI is built with user-defined components to organize webpage and represent one part of UI
• Looks very similar to HTML tags, but are always explicitly closed

Every tag must either have an opening and closing tag (<App>…</App>) or have a forward slash before the closing angle bracket if it’s an empty element (<App />)

Q. What is the difference between a function component and a class component?

• Function component = A component defined as a function
• Class component = A component defined as a class

NOTE: It’s the render method in a class component that returns the component’s JSX

Q. What is the difference between state and props?

Q. What is the difference between a named export and a default export?

• The React object is the default export and Component is a class that’s exported as a named export
• Components, whether defined as a class or a function, are usually the default export of the component’s module

NOTE: JS module can have only one default export but as many named exports as desired

Q. What are lifecycle methods? What are the equivalent hooks?

NOTE: Lifecycle methods are only for class components

• Class component: constructor === Function component: useState

const [value, setValue] = useState('');

NOTE: Using the property initializer syntax, we don’t need to create a constructor method anymore

class App extends Component {
// Initialize the state property using a class field
   state = {
      color: 'red',
   };
...
}

• Class component: componentDidMount === Function component: useEffect with an empty array as the second parameter

useEffect(() => {...}, []) //equivalent to componentDidMount

• Class component: componentDidUpdate === Function component: useEffect with 1 parameter

useEffect(() => {...}) //runs after every re-render

• Class component: componentWillUnmount === Function component: useEffect with a return statement

useEffect(() => {
   console.log('Hi');
   return () => { ... }
});

Q. What’s the difference between lifecycle methods and hooks?

Lifecycle methods: only used in class components VS Hooks: only used in function components

Q. How do you update state?

A) With class components: setState(…)

NOTE: Do not mutate state directly

Why not? React doesn’t know whether to trigger a re-render since it doesn’t know if the state has changed

this.state.emotion = 'Happy'; //Do not mutate state directly

B) With function components: setColour(…)

function App() {
   const [colour, setColour] = useState('red')
   
   return(
      <>
          <button onClick={() => setColour('blue')}>
             Change to blue
          </button>
      </>
   )
}

Q. After state is changed, when it is console.logged, it shows the previous value. Why?

• setState is asynchronous → console.log shows the previous state and the current state is hashed for later when the state is changed again
• setState will gather up a bunch of state changes and only change the state once

Solution?

A) Class components: setState accepts an optional callback function as a 2nd parameter

• The callback is invoked after the state has updated

this.setState({emotion: 'Surprised'}, () => {
   console.log(this.state.emotion) //-> Will be 'Surprised'
});

B) Function components: use the equivalent of a class component’s componentDidUpdate with useEffect

• The function runs when emotion is changed

useEffect(() => {
   ...
}, [emotion])