WTF is React?

Instructor: [00:00] React is JavaScript programming library that is used to help create complex user interfaces. It is set apart from other interfacing libraries in the fact that HTML is commingled with JavaScript, leading to a single, unified template file for each component.

[00:16] A component can contain a single element or many elements, and even many components. Component-driven design is a new paradigm shift of how we think about user interfaces, and helps us deliver complex user interfaces much more simply.

[00:32] Each component in React typically goes into its own JavaScript file. We'll import React from the React library into each of our component files, which gives us access to some of React's features in our files, such as JSX.

[00:47] Note that you must use a compiler, such as Babel, to convert newer features, such as classes, into code that is readable by a web browser. You will also need to use a build tool such as Webpack to automatically compile code and carry out other build tasks.

[01:05] Zero configuration tools, such as createReactApp, can be easily utilized, that set all these tools up for you. Let's create a new component named sawSelector. First, we'll import react and component from the React library.

[01:22] Then let's create our class called sawSelector, which extends from the component class. Inside the class, we will add a method named render, which is what is executed when the component loads, and contains the desired output for our component.

[01:38] Inside of this render method is where we use JSX, which is a code format that looks very similar to HTML, but allows us to interface directly with JavaScript. Let's add an h1 tag to our render function.

[01:56] We can see that it is outputted directly to the browser as HTML. When we add brackets to our JSX, we could also interact directly with JavaScript within our render function. Managing application state, or how we track changes of components or elements over time, can be done directly from within our component.

[02:18] Let's create an array of colors, and then loop through and output all of them to the screen using JavaScript's map function. Using JavaScript class object properties, we can then easily set the default state to the first color and render it to the screen.

[02:39] Let's add a button which will update our application state. We will trigger on one of the many event handlers available to us, in this case onClick, which will be triggered when the button is clicked. We will define the function, which will be fired on click, and name it handleClick.

[02:57] Within this callback is where we update the application state. Assigning a value with React's special setState function will modify the state, and automatically rerender the function containing the updated state.

[03:13] React will derive e.target.value from the value attribute of the element, and we will also need to define a unique key, so React knows which element is triggering the update. We could also add some styling to our button.

[03:27] Let's create a style sheet and paste in some styling for our button. Then we will add the class using React's classname property, because class a reserved keyword in JavaScript. We can also override the styling locally using a regular JavaScript function, accepting parameters of our color.

[03:48] Most JavaScript frameworks update the browser DOM much more than they have to. React utilizes an efficient process called reconciliation, which updates the DOM. When the state of a component changes, React doesn't do a full rerender of DOM nodes, but utilizes something called the virtual DOM, which is a lightweight representation of the actual DOM.

[04:10] React carries out its own diffing process, changing only the DOM elements that need to be updated, which is efficient, and greatly increases rendering performance. There are many helper functions available in React called life cycle methods.

[04:25] Each life cycle method is triggered at some point within React's render timeline, and you can use them when you need your code fired at a specific time. For example, componentDidUpdate is triggered every time the component state is updated.

[04:39] Usage of these life cycle methods are completely dependent upon your individual use case and needs. You can find a list of all life cycle methods by reading through React's documentation. React utilizes a unidirectional data flow model, meaning data flows from the most-parent component down to the most-child component.

[04:58] If there are many components that need access to a piece of state, the state should be stored at a component, which is a common ancestor to all of the child components needing access to that piece of state, but on the level that is deepest down the rendering tree.

[05:14] This avoids components from unnecessarily rerendering on state changes if they do not need access to that piece of state. Data is passed from parent components to child components via props. Props are used instead of state when the data does not need to be modified by the component using it.

[05:33] They also should be used whenever possible instead of state to avoid unnecessary code complexity, and improve rendering performance. If a child component needs to modify state from a parent component, functions can also be passed as props from the parent component down to child components.

[05:51] Passing props down many levels can be a bit verbose, but helps keep the data model simple, and easy to debug. When you start dealing with many, many layers of parent-child components, or start having a hard time tracking down function props through numerous layers of components, it may be a good idea to look into external state management libraries.

[06:12] There are a variety of libraries which will help in the setting and retrieval of pieces of state. However, you'll find that most apps can manage state locally in React. Local state is the simplest way to manage your application state, and avoids the unnecessary complexities of external state management tools.

[06:30] Smart planning around your component-driven design from the start of a project goes a long way in reducing inherent complexities introduced from a growing code base.