ReactJs Basics

Quick rundown on the core concepts

For visual learners, click here for freeCodeCamp’s course on youtube

One of the most important aspects of React is the fact that you can create components, which are like custom, reusable HTML elements, to quickly and efficiently build user interfaces. React also streamlines how data is stored and handled, using state and props. Will be going over some React basics at a high level, with links to official documentation where you can read more information.

What is Virtual DOM?

• DOM(Document Object Model) is the UI components, like elements, attributes.
• Virtual DOM is a node tree listing of components, which is lightweight in-memory representation of real DOM.
• The render() method in React creates it.
• Each time the underlying data changes, new virtual DOM is created, comparing differences between previous virtual DOM and only the changes are updated in real DOM.
• So, the special thing about ReactDOM.render() is that it only updates DOM elements that have changed.

What is JSX?

• JavaScript extension, JSX is not valid JavaScript that browsers can read. It’s a JavaScript file that contains JSX code, very similar to HTML and the file have to be compiled before it reaches web browser, with JSX compiler that translates the JSX into JavaScript.
• JXS element is treated as JavaScript expression, they can be saved as a variable, passed to function or stored in an object or array.

What is a Component?

• A component is a small reusable chunk of code that is responsible for one job. Usually to render some HTML.
• We can use multiple JSX in a component.
• Variables and conditions should be inside the render method.
• ‘this’ refers to the object on which this’s enclosing method.
• A React application can contain dozens, or even hundreds, of components interacting with each other.
• When you import a variable from a file that is not the current file, then an import statement isn’t quite enough. You also need an export statement, written in the other file.

What is Props?

• Information that gets passed from one component to another is known as ‘props’.
• A component’s props is an object. It holds information about that component. To see a component’s props object, you use the expression this.props
• We can pass props from component to component. Rendering is the only way for a component to pass props to another component.
• Every component’s props object has a property named children, this.props.children will that returns everything in between a component’s opening and closing JSX tags.
• If nobody passes any text to the component, then the component display will be blank. It would be better if the component could display a default message instead. That’s where defaultProps comes into the picture.

What is a State?

• A React component can access dynamic information in two ways: props and state.
• Unlike props, a component’s state is not passed in from the outside. A component decides its own state.
• To make a component have state, give the component a state property. This property should be declared inside of a constructor method
• this.state should be equal to an object.
• The most common way to call this.setState() is to call a custom function that wraps a this.setState().
• A component can change its state by calling this.setState() but a component should never update this.props. A React component should use props to store information that can be changed but can only be changed by a different component. A React component should use the state to store information that the component itself can change.
• Child component can update the parent’s state by passing a function down to the child that can change parent’s state.

What are Lifecycle methods?

• Lifecycle methods are methods that get called at certain moments in a react component’s life.
• When a component mounts, it automatically calls these three methods, in order:

1. componentWillMount: When a component renders for the first time only, componentWillMount gets called right before render.
2. render
3. componentDidMount: When a component renders for the first time, componentDidMount gets called right after the HTML from render has finished loading.

There are five updating lifecycle methods. whenever a component instance is updated:

1. componentWillReceiveProps: When a component instance updates, componentWillReceiveProps gets called before the rendering only if the component will receive props.
2. shouldComponentUpdate: shouldComponentUpdate automatically receives two arguments: nextProps and nextState. It’s typical to compare nextProps and nextState to the current this.props and this.state. If shouldComponentUpdate returns true, then nothing noticeable happens. But if shouldComponentUpdate returns false, then the component will not update.
3. componentWillUpdate: componentWillUpdate gets called in between shouldComponentUpdate and render.It receives two arguments: nextProps and nextState. We cannot call this.setState from componentWillUpdate. Its main purpose is to interact with things outside like checking the window size or interacting with an API.
4. render
5. componentDidUpdate: componentDidUpdate automatically gets passed two arguments: prevProps and prevState. prevProps and prevState are references to the component’s props and state before the current updating period began. You can compare them to the current props and state.

There is only one unmounting lifecycle method:

1. componentWillUnmount: It gets called right before a component is removed from the DOM.

Once you master the basics, check out React Portals where I dive into rendering children into a DOM node that exists outside the DOM hierarchy of the parent component.

Thanks for reading.
For more info, check out the official documentation and https://medium.freecodecamp.org/learn-react-js-in-5-minutes-526472d292f4

Thanks for reading! My name is Steven, I’m a web developer, and I love to learn and help people learn new skills. Follow me on Twitter and Instagram if you’d like to stay in touch.