React is the most popular library for building user interfaces today. Its founded on JavaScript, but introduces several concepts you need to understand to build smart apps with React.
Without further ado, let’s get into it.
JSX
Unless you are brand new to React, you’ve probably noticed HTML-like code in the components. That is JSX, templating language for React. Despite its similarities to HTML, JSX is still JavaScript, only ‘dressed up’ to look and feel familiar to web developers who are all familiar with HTML.
Syntax is intentionally similar to HTML to make development easier. Without JSX, React developers would have to use top-level React API, such as the createElement() method. As you add complexity to your app, these methods become difficult to manage. As a result, even most experienced React developers prefer to use JSX.
One of the advantages of JSX is that it allows you to embed JavaScript expressions inside the structure of your app. Under the hood JSX is JavaScript, so it’s very easy to include dynamic code. You only need to mark the beginning and end of the ‘JavaScript parts’. You can do that using curly braces.
JSX does not allow you to use JavaScript statements like for or if. If you need switch statement in React, you can it them outside the JSX, store the result in a variable, and then reference the variable inside JSX. SFE has a guide on this topic.
However in most cases, you do not need if and else statements and can successfully use other dynamic expressions. For example, React developers often use map() to render multiple components. The map method runs a callback function to transform every item in the array, and returns a new array with transformed items. This is precisely what you need to render components based on data.
Similarly, you can use a ternary operator or AND logical operator to use conditions inside JSX. A ternary operator takes three values: a condition followed by two outcomes. First will be returned if the condition is true, and second if the condition is false. You can even chain multiple ternary operators for complex logical operations. However, at some point this gets difficult to read so you might want to use an if statement outside the JSX and simply reference the result in JSX.
You can also use curly braces to conditionally set the attribute itself. So if condition is true, attribute is there. If it’s not, the element does not have the attribute.
Virtual DOM
Perhaps the foundational concept in React. The main idea behind React is to automatically update the contents on the screen when something changes. There’s always something changing, so it would be too difficult to re-render the application every second.
Instead, React maintains its own version of DOM that is much more lightweight than a real DOM.
Virtual DOM is only a shadow copy of a real DOM, but it helps keep track of latest changes to ensure consistency of data. Every time there’s a change to data in state or props, React updates virtual DOM. Then the library gradually updates real DOM for the most efficient results.
Components
Components are building blocks of React apps. In fact, reusability of components is a definite feature that makes it possible to quickly build apps in React. Component-based design also makes React apps easier to maintain. If there’s a mistake, it is usually localized to one component and easier to fix.
Components are usually organized in component trees. With parent components at the top, and children at the bottom. Child components can be parent components and have more child components of their own. Complex React apps usually have hundreds of components organized this way. If you export a parent component, all of its child components are also exported by association.
Props in React
Props is a React feature that makes reusable components possible. Props are like arguments to a function – a pass that you pass into reusable components to customize style, contents, or some other aspect of components.
React components are like empty shells with some structure. The empty parts can be ‘filled in’ with data from props. Components can accept as many props as necessary.
You can also use TypeScript to specify the type of values that need to be passed down via specific props. For example, the name prop needs to pass down a string, and age needs to be a number. React even allows you to pass another component via props. Or an event handler. It's a simple trick to allows React devs to pass data from child to parent in React.
State
React components need to keep track of latest changes in the app. That is why some components have a state that contains all the data that is prone to change. Values like user inputs are stored in the state. Whenever there’s a change to user inputs, event handlers automatically update the state. In turn, changes to the state trigger a re-render of the app. This is necessary to make sure that latest changes are displayed on the screen. Event handlers get input values and store them in the state, and then analyze those values to conditionally style or render elements. For example, a common feature is to render a red warning text in case the current value in the email field does not have a ‘@’ sign.
Functional vs class components
There are two types of components in React, with different syntax and overall structure. Since the introduction hooks, both types of components have more or less the same functionalities. useState hook now allows functional components to implement state. In the past, they were stateless components, mostly used for presentation only. Similarly, the useEffect hook is a fine replacement for lifecycle hooks in React. Its dependency array allows you to specify when the effect should run. More about that here.
Top comments (0)