INTRODUCTION
A common theme when reading about web development is evolution. The world wide web and its tools are always going through stages of improvement. The JavaScript language continues to evolve, and the tools that amplify JavaScript’s capabilities grow in turn. A tool that has gained popularity in recent years is the JavaScript library React. Achieving a strong understanding of React involves taking ideas from JavaScript and applying those ideas to new concepts foundational to React. Using JSX, React developers build components. Managing state and props composes a large part of the React developer’s decision process. All of these ideas come together and are supported by a feature integral to React, the virtual DOM. Understanding these fundamental concepts are the keys to React mastery.
REACT USE CASE
Web developers have many tools available to achieve their goals. A common problem developers can face is falling in love with specific tools. Developers may become accustomed to working with the same languages, frameworks, and libraries. It is important to understand why these tools are being used while also maintaining an awareness of other tools that are available.
When using React, it is important to know why React is a good choice for the job at hand. React is an open-source library created by Facebook. Being a library, React is dependent on other libraries in order to truly shine. Though extremely popular, many developers have their gripes with React when it is used in large projects. A common complaint is that React does not render as quickly as other front-end tools. Considering all that, React is still used by applications such as Twitter and Shopify. React is popular for single page applications that dynamically update content through user interactions.
JSX
While learning to create a React app, developers will notice some differences in HTML syntax. React uses a markup language called JSX (JavaScript XML[https://www.w3schools.com/react/react_jsx.asp]). While using JSX with React is not a requirement, JSX makes it much easier to create a react app. The main advantage of using JSX is the ability to combine HTML and JavaScript into one file.
In the Scroll component above, some other notable differences between JSX and HTML are evident. When assigning classes to elements, rather than “class” the camelCased “className” is the correct JSX syntax. All property naming in JSX follows camelCase conventions. Functions, as seen with Scroll, are named with capital letters.
The Scroll component also highlights that curly braces are a very important aspect of JSX. Using inline styling relies on using curly braces to apply styles. More importantly, any valid JavaScript expression can be placed within curly braces. Perhaps the most interesting observation from the Scroll images is the fact that JavaScript is used to render HTML. Inside the return statement, a div uses the props argument passed into the Scroll function to render the argument in HTML. In conjunction with its associated CSS file, the Scroll component creates a field that is populated by props.children.
FUNCTIONAL COMPONENTS
Like many JavaScript frameworks, the building blocks of the React library are components. As described in the official ReactJS tutorial: “React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.
Components can be broken down into two types: functional and class based.
As with Scroll, Todo is an example of a functional component. Both the Scroll and Todo components are simply JavaScript functions. Both functions take arguments and render the arguments into HTML element with the help of JSX. As stated in the JSX section, component names must be capitalized.
PROPS
Props are handled outside of the component. While it is not a requirement, components take props (properties). As seen with the Scroll and Todo functional components, props are passed down from parent components. According to the React documentation, props should be read only. This means that when a prop is passed as an argument, the function taking the argument should not alter the prop in anyway. The prop is used as a means to create an output. The child component or function taking the prop should not have code within that changes the prop. Its job is to simply use the prop to render an HTML element or produce an output.
CLASS COMPONENTS
Another type of function integral to a React app is the class based component.
The TodoForm component is an example of a class component. Class based components are are more complex than functional components. Class based components are defined by extending the ‘React.Component’ base class. In the hierarchy of a React app, class components are responsible for bringing everything together. A hallmark of a class based component is the idea of state.
STATE
Class based components have access to a state property. In contrast to props, state is handled inside the component. State is used to store data. The data stored inside of state will be altered by user interactions. The alteration of state will in turn be rendered to the user interface.
In the TodoList component above, the initial state contains an empty array called todo. Additionally, there are two functions, addTodo and removeTodo, that manipulate the state of the todo array.
The second part of the TodoList component renders all of the components. Developers have to be aware of another JSX convention. JSX requires that every element must have its own opening and closing tags. Attempting to return multiples elements will result in an error. For this reason, multiple components needs to share a parent element. In the case of the TodoList component, the parent element is the div with the className ‘container’. The TodoList component brings all of the other components together and produces the final product:
VIRTUAL DOM
The Virtual DOM is the glue that holds everything together. To understand the Virtual DOM, it is important to first understand the DOM. The Document Object Model is a standard that defines how information is arranged and accessed in an HTML document.
The DOM organizes a web page making it easy to access individual parts. It traces all the way back beyond the <html> element to the document object. The DOM is a tree that can have its individual parts manipulated following a parent-child dynamic.
The virtual DOM is a representation of the DOM. React uses the virtual DOM to render changes demanded by modifications of state and the passing of props. While the virtual DOM is not a part of the actual DOM, the Virtual DOM is used to update the actual DOM. Using state and props, developers do not have to touch the actual DOM. Developers instead work with the virtual DOM which makes it much easier to reuse components.
CONCLUSION
React is a tool web developers should consider adding to their arsenal. However; developers should understand that React is only a tool. While it has many strengths, it comes with its drawbacks. React is a library that is very flexible. This can be a strength or a weakness based on what the projects needs. There are frameworks that are more opinionated which force a logical structure onto a project. React leaves much room for freedom in terms of project structure. In a team, this can be a negative if everyone is not on the same page. React shines as a tool to build a single page application that demands dynamic rendering.
React developers must learn how to manipulate JSX in order to create reusable components. The components may use state and props to render HTML through React’s virtual DOM. While these are only some of the concepts involved in creating a React app, understanding these concepts is foundational to React development. Digging deeper into React, developers will discover topics such as Redux for state management, lifecycle components, and React Hooks. Thankfully, React is extremely popular which means there is a large community that can help solve problems. The best way to get started with React is to follow its documentation.