Starting React

Blogpost 401

Discuss in words something you learned in class today or this week.

I learned about the difference between functional and class-based components, how to write them, and how to initialize a new React App.

Why/when would you use a class-based component vs a functional component?

• a state (it may render differently for the same set of props)
• lifecycle methods (it needs to perform actions when the component is mounted, unmounted, about to be updated, etc.)
• refs (it needs to refer to underlying DOM nodes)
• Or if you plan to use shouldComponentUpdate or PureComponent performance optimisation techniques.

What is create-react-app?

Create-react-app is the command you type into your terminal to start building a new React app.

What are the differences between a class component and a functional component?

• Functional component can’t have state or lifecycle methods
• A class-based component can maintain its own state.
• Class-based components can have lifecycle methods which can be used to perform various actions at specific points of the component lifecycle.
• Class-based components can have refs to underlying DOM nodes.
• Class-based components can use shouldComponentUpdate and PureComponent performance optimisation techniques.

What is JSX?

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React by converting HTML tags into react elements.

How does React work?

It’s a front-end library that maintains a virtual DOM.

How does the virtual DOM work in React?

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

What’s the difference between an element and a component in React?

• A Component is a global definition, usually either a function or a class (with a render function).
• An Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns. With a class component, the element is the object that the component’s render function returns.