React Tutorial

React is a front-end open source Javascript Library used for building user interfaces and interactive UIs. It is maintained by Facebook and has over a thousand contributers. React uses the concept of state and rendering of that state onto the DOM to update your applications. To make programming in React easier, we write in JSX(Javascript XML) to convert HTML into React elements.

As you have probably noticed above, React is a Javascript library. So what is the difference between a library and framework? A library is a collection of methods and functions. A framework is a predefined skeleton with features which can be filled out with your code to create an application. Frameworks contain libraries. The key difference is the control in the code that you write. When implementing a library, your code calls upon the library for a method and you are in control. With a framework, it calls your code and it is in control. Angular and Vue are examples of frameworks.

Components are what your React code will be composed of. They are reusable pieces of code which form your UI. There are two types of components in React, functional components and class components. An example of a functional component is shown below, first with an arrow function and the second without. A functional component is a function that returns some JSX code. On the other hand, a class component extends React.Component which has a render method. The JSX to be rendered will be inside this render method.

In React, composition is used rather than inheritance. Inheritance allows you to inherit from a superclass onto a subclass. Composition is when your parent component is composed up of parts, or child components. The bulk of a front end application is usually composed of many parts rather than inheriting from a superclass. You can think about child components as a specialized version of the parent component. In the example given above, the ChildComponent recieves props from the ParentComponent. In this case, it is the messaage prop. The ParentComponent then calls the ChildComponent which has returned the message prop inside a h1 tag. This is a very simple example of a composition in React.

Props, or properties are used for passing data along components. An example was given in the composition section. A regular function, an arrow function and an arrow function with destructuring are shown passing props then returning those props in some way. Because it is a class, and not a function, we must use the this keyword to refer to the props. The example above is shown in destructuring syntax.

All components in React have a state object built in. Everytime the component's state changes, the component re-renders. You can store all properties of a function into the state object. In any component, the base constructor method is always called first. Any initial states should be set up here. State must be passed as props onto the base constructor of the class. You should always call super(props) to allow the component to inherit methods from the parent React.Component. Initial states can be updated by using the setState() method. There are two main concepts when using setState().
You must use the setState() method to update state. Modifying the state directly will not re-render the component. You may only assign this.state in the base constructor.
Multiple setState() methods are grouped into a single update for better performance. If you were to call the incorrect setState() method multiple times, React would batch all those calls into one update, which would not output the intended answer. Because this.props or this.state may be updated asynchronously, you should not depend on them as previous states to update the current state of your component. Instead of accepting an object with setState(), use the correct form that accepts a function as shown above. We do not use the current this.state to keep track of previous state but instead pass a previous state function parameter.

All components in React have a lifecycle built in as well. The lifecycle consists of three main phases: mounting, updating and unmounting.
Mounting is putting elements onto the DOM.
Updating is reflecting any changes of a component's state or props onto the DOM.
Unmounting is removing the component from the DOM.
Although there are many lifecycle methods, the three relevant ones are componentDidMount, componentDidUpdate, and componentWillUnmount, one for each respective phase.
componentDidMount is called after the component is rendered onto the DOM. After the LifeCycleExample component is rendered onto the DOM, state of the greeting property is updated after 1 second.
componentDidUpdate is called after the component is updated onto the DOM. After the LifeCycleExample component is updated onto the DOM, if the states did update, a sentence is logged onto the console.
componentWillUnmount is called before the component is removed from the DOM. Before the LifeCycleExample component is unmounted, state of the greeting property is updated.

React has the same event handlers as HTML. Common HTML events include onChange, onClick, onMouseOver, onMouseOut, onKeyDown, and onLoad. If you use regular functions to express how to handle an event, you must bind it to the component using the this keyword and bind() method. You should use arrow functions, as the this keyword always represents the object that defined the arrow function. Please note the differences between using a regular function and an arrow function that are called during an event handler. In both examples, there is a button with the Blast Off! button. When the button is clicked, an alert pops up with the message, "To the Moon!".

When rendering a list, you should use the map() method and include a key for each list item. In the example above, the function MappedList takes in array of numbers. That array is then mapped onto a list for each number in the array. The resulting list is then returned. Because there is no key for the list items, there will be a warning in in the console. Keys are a string attribute that are used to give each item inside the list an identity. It helps React identify what needs to be added, changed and removed. In the edited MappedList function, each number has the key of their respective number converted into a string. Keys are unique and should differ among the siblings of the data. You would usually use the ID's of the data as the key. If there is no ID for the items, you can use the index as the key.

Hooks were a new feature in the React 16.8 update. Prior to this update, you could only use state and its' features when writing a class. Hooks allow you to "hook" onto functions which allow the use of state and lifecycle methods. In the example above, useState is the state hook. It returns a pair in brackets; the current state value and the function that allows you to update it. In the pair, count is equivalent to this.state.count and setCount is equivalent to this.setState. You can then refer to the function from a event handler. The argument in useState sets the initial value of the state. You can use the useState method many times in a component. However, they should only be at the top level of the component.

The effect hook is the counterpart to the state hook. It allows you to use lifecycle methods or "effects", hence the name "effect hook". You may think of the effect hook as a a combination of the following lifecycle methods: componentDidMount, componentDidUpdate, and componentWillUnmount. When you use this hook, React knows that it still needs to do something after the render. In the example, it just sets the document title but you can use it to fetch data or call an API. The effect hook runs after the first render and every update. Because there is a lot to digest, I suggest heading over to the React website and reviewing their documentation on the Effect Hook.

Well, you made it to the end of this tutorial! This is in no way meant to make you a genius at React after reading it but just a quick beginner tutorial if you know nothing about React. In the end, the best way to learn how to code is to actually code. It is impossible to memorize eveyrthing since there are updates every now and then. I wish you the best luck on your coding adventures. Thank you for visiting my website!