Forem: Sebastian9995

Most important concepts in React

Sebastian9995 — Thu, 07 Mar 2024 15:52:02 +0000

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.

Different ways to dynamically render components in React

Sebastian9995 — Thu, 07 Mar 2024 15:37:15 +0000

It is a well known fact that React is perfect for building interactive user interfaces. Conditional rendering allows you to define what the application needs to look like based on a condition.

What you need to know

Before trying to master conditional rendering in React, you need to have solid knowledge of the fundamentals – HTML and CSS for structuring and styling the app, and JavaScript to implement dynamic features. You are going to need ternary operators a lot. So it would do you well to practice writing nested ternary operators with multiple conditions.

You also need to know how React works. Specifically the state, props, and how to embed dynamic expressions inside JSX. You will also benefit from understanding different lifecycle methods, as well as the useEffect method to achieve the same results.

Besides these features, you also need to understand foundational principles of React such as virtual DOM and why components render and re-render when they do.

What is conditional rendering?

Sometimes when building an app, you need to display certain elements or components if a condition is true, and other set of elements if the condition is false. That is the idea behind conditional rendering in React. Conditions usually depend on values from the state, which in turn can change based on user input. Often times user interactions will change current rendered status of elements.

You can also set inline styles based on state values, so user interactions will change appearance of elements as well. This guide explores how to set multiple classnames in React.

Why do you need conditional rendering

This is a very important feature for building dynamic UIs with React.

Conditional rendering allows you to define dynamic UI layout that changes in response to user events. This includes not only large elements, but also error messages and the like. For example, when you implement dynamic validation, you might need to display a custom message depending on the type of error that occurred.

Dynamic rendering means that you don’t overload the page with unnecessary components. This helps to not overwhelm users and keeps pages lightweight. So you only render the elements you need to. This is important to make sure the application runs smoothly and without delays.

Rendering based on a condition also helps you simplify the code. Using a ternary operator to output elements or components also makes code more readable. You can use data from props to conditionally render components, which gives you more flexibility for rendering (or not) components.

Two common ways to implement dynamic rendering in React
From if/else statements to switch, there are many ways to determine output of a JavaScript expression based on a condition. However, React’s templating language JSX only allows you to include only certain JavaScript expressions. React developers typically use ternary operators or logical AND operator to conditionally render components or elements inside JSX.

The syntax for ternary operator is simple:

Condition ? outcome 1 : outcome 2

First, you define a condition. Then follow it up with a question mark. After that, there are two values (or expressions) separated by semicolon. If the condition is true, ternary operators the first outcome. If it is not, the second one.

Experienced React developers sometimes nest another ternary operator in place of second outcome. So if the initial condition is false, ternary operator checks another condition. This is kind of similar to if/else syntax in React.

As for the AND logical operator, you probably know that in JavaScript, two values can be connected with a number of operators. AND logical operator ensures that the condition is true only if both conditions are met. At the same time, AND logical operator also runs all expressions connected to it.

That is, the AND logical operator checks if the first expression evaluates to true. The second expression only runs if the first evaluates to true. That is why logical AND operator is useful for conditional rendering in React.

Render based on route

In order to build a fully fledged web application, you need to render different pages for different URLs. As you know, React library is great for single page applications. But you can’t just display everything on screen all at once. Yes it is true that web apps are rendered in the browser, but users need to see different contents for different URLs. That’s where React Router comes in.

React router is the most popular library for routing and navigation in React. It allows you to define paths and components and elements to render for that path. The idea is pretty simple – wrap your entire application with a custom component, and then use custom components to define what gets rendered for that specific URL.

There’s much more you can do with react-router. From custom components to the ability to search query parameters. You can learn about advanced use cases it in official react-router documentation.

Since the very beginning, you can define optional param in react-router to render a specific component only for specific URLs. SimpleFrontEnd has good article about how to do this:

https://simplefrontend.com/optional-parameter-in-react-router/

Render for every item in the array

Finally, sometimes you need to dynamically render components or elements for every item in the array. And use data from the array to customize contents or styles of elements or components. You can easily do that using map() filter() and other advanced JavaScript methods in React.

React doesn’t require you to do JavaScript operations outside of UI. JSX allows you to mix UI with logic. You only need to wrap the entire expression with curly braces, and return an element for every item. Combined with the idea of reusable components, this facilitates rendering entire pages of UI in only few lines of code. That is why React so popular with front-end developers all around the world.

You can also render the same component multiple times. Simply use the fill() method to create array with specified number of items, and in the map() method return a static component.

react-router to implement dynamic navigation in React

Sebastian9995 — Thu, 07 Mar 2024 15:15:24 +0000

Navigation is essential for any web application. As you know, React allows us to build Single Page Applications. These types of apps are rendered in the browser at once. URL only determines which parts of the application is showed to the user.

React-router is the most popular package for handling routing in React. It is a great tool that gives you plenty of opportunities for navigation between pages and components. Let’s explore different avenues for implementing navigation features in React.

Navigation using component

React-router comes with many custom components to help you implement essential navigation features in React.

As you know, Single Page Apps are all rendered on the same page, so there’s no need to refresh the page. is perhaps the most useful custom component for navigation in React. It works similar to <a> tag in HTML, except does not reload the page. The website automatically navigates to a different URL. Then React renders appropriate components for that URL.

Similar to normal <a> tag, you can set to attribute on component. The to attribute is set to a string that specifies relative path to navigate to. For example, if the current page is homepage.com/dashboard/, and the to attribute is set to ‘/somepage/, then clicking the url will take user to homepage.com/dashboard/somepage.

You can also set event handlers on like you do on <a> tag.

Go back in React

Going back to the previous page is one of the essential features of navigation in React. Browsers usually store your browsing history in history object. This object is available on window interface. You can work with this object to navigate to previous page in React.

Latest version of React Router provides useNavigate hook, which is essential to implement go back feature. useNavigate returns a function you can use to navigate forward, backward, or even several steps backward.

You only need to specify argument to the navigation function to specify how many steps you want to go back or forward. If you want to go back to previous page, pass it -1. It will take you one step back.

Note that you don’t pass argument to the useNavigate hook, but the function it returns. Also don’t forget that you can only use react-router features if the application is wrapped with parent component.

You can also implement go back features in previous features of react-router. In versions 4 and 5 you need to use the useHistory() hook to navigate backwards in React. The hook returns instance of history object. Its interface includes the goBack() method, which takes user to the previous page.

Newest react-router 6 comes with many other upgraded features. Most interesting to me was setting react router optional path param, more about that here:

https://simplefrontend.com/optional-parameter-in-react-router/.

Redirect in React

Often times you need to redirect users to React. For example, when someone logs in, redirect them to a dashboard. You can do that number of ways in React.

Let’s start with how to do redirects in the most recent version of react router 6.

Once again, you are going to need the useNavigate() hook to get a navigation function. Once you have that, simply call the function and pass it a string argument. The app will redirect users to that relative path. This way, you can programmatically redirect users to a different URL. You can insert the call to the navigation function in event handlers, or even lifecycle methods.

Another way is to render a custom component, which is also available with react-router 6. If invoked and successfully rendered, this custom component will redirect users to the path in the to prop.

Great thing about invoking a Navigate component is that you can use it in functional as well as class components. Whereas the useNavigate hook is reserved only for functional components.
You can even use curly braces to conditionally render a Navigate custom component in the JSX. Remember that React allows you to embed dynamic expressions inside the structure of your app. That’s what makes it vastly better than other front-end frameworks out there. You can use similar techniques to conditionally call the navigation function.

Typically you’d use a state or props value to set a condition. If the state changes, then the redirect happens. Ternary operators also allow you to specify two options: redirect to a certain path if the condition is true, and to another if the condition is false.

Redirect on button click

Programmatic navigation is necessary to do a redirect in response to events in React. Click event is no exception.

Once again, you need a useNavigate() hook to create a navigation function. Then call it inside an onClick event handler, which will run every time user clicks the button. And of course specify the relative path you want to redirect the user. Once set, clicking the button will redirect users to that URL. This is how you redirect to external URL in React on click of a button.

You can also set an onClick event handler on custom Link component.

Redirect on form submit

Sometimes you also need to redirect users to a different URL after the form is submitted. To do that, you need to set onSubmit handler on the

element itself. In the event handler, you are going to call the navigation function to take user to a specified URL.

Needless to say, the form also needs to have a submit button. That is, button where the type attribute is set to ‘submit’.

How to access DOM elements in React

Sebastian9995 — Thu, 07 Mar 2024 15:02:01 +0000

If you know basics of React, you’ve probably heard of Virtual DOM – one of the foundational features in React. The name might lead you to believe that it’s like normal DOM, but nothing could be further from the truth.

What is virtual DOM?

Virtual DOM is feature of React that allows you to build very fast and reactive applications. The idea behind React is to immediately show changes in the application. For example – if there’s a new notification on Facebook, show the updated number of notifications even if user hasn’t refreshed the page.

React apps are made up of components that contain DOM elements. React needs some way to keep track of data changes and update the DOM accordingly. That is why components re-render when important data changes (state or props). But to re-rendering the actual DOM element would be too expensive. That’s why React needs virtual DOM, which is a shallow copy of Real DOM. Still, it is much less resource intensive to re-render. This is how React manages to ensure that React apps always reflect the most recent changes in data.

Why would you want to access DOM elements?

In React, it’s typically not necessary to directly manipulate DOM. The library itself provides all the necessary features to access elements, set styles and modify contents of elements.

If you still need to access DOM elements directly, React has one solution – refs. You can use refs to store element references in a variable and work with that variable.

Refs use cases in React

UI features like scroll to bottom requires you to create and manage refs, similar to how you’d use getElementById method in React. You would have to get a reference to an element, so you can call scrollIntoView to skip directly to that element. You can also implement it in the lifecycle methods, so the page automatically skips to a certain part of the page when the application loads.
Sometimes you also need to access ref to manage element’s current state – whether it is focused or not. Refs are commonly used for animations as well.

You can also use refs to log element to the console. This will be helpful in understanding difference between React elements and HTML elements. There’s a pretty big difference, because despite similar syntax, all elements in JSX are actually JavaScript objects.

How to create a ref?

For starters, you need to decide whether you are going to use functional or class components. The former are simpler to write, and allow you to implement features that were previously exclusive to class components. For example, thanks to refs, now you can create and manage state in functional components.

Speaking of hooks, you need a useRef hook to create a ref in React. You need to import it, and then create a variable and set it equal to useRef() hook, which returns instance of an empty ref. Then you can associate with a DOM element in the structure of your app. To do this, you need to set the ref attribute to a variable that holds an empty ref. Don’t forget to use curly braces, otherwise React is not going to know that you are setting the attribute to a JavaScript expression.

You need to initialize a ref to a null value. You can do that by passing null as the argument to the useRef hook.

Why not use getElementById in React?

The problem is that all changes need to be reflected on screen. And using the getElementById method bypasses virtual DOM, which might mean inconsistencies in data rendered on the screen. So it’s best to work within framework of React.

How to get input value in React?

You might’ve used getElementById to access input elements and then get value from them. It works differently in React. Every event handler receives an argument – instance of SyntheticEvent. This is an object that contains information about the event, as well as the element that triggered the event. One of the important values is stored on event.target.value, which contains information like current value entered into input field in React. Follow this tutorial from SimpleFrontEnd to create two way binding in React to manage input values and avoid errors.

What are React elements?

If you look at React code, you will notice that a lot of it looks like HTML. So you might assume that we write HTML inside JavaScript. But don’t be confused. That code is not HTML, it is JSX. Two look alike, but there are very important differences between HTML and JSX.

For one, JSX elements are not actually React elements. JSX is only a simple syntax for developing complex apps in React. Then it is compiled to JavaScript, and ultimately React internally translates everything into a real webpage with JavaScript, CSS and HTML.
React elements are not HTML elements but JavaScript copies to represent features of elements we know and love.

Because everything is JavaScript, you have more freedom to implement dynamic features in React than in HTML. For instance, you can add variable in a className in React.

Partly this is why getElementById() does not work in React. Because in React apps you have an elaborate description of what the page needs to look like. But you don’t have HTML elements yet. That happens after JSX is compiled and React builds an actual page with HTML.

Can you build apps without selecting DOM elements?

Absolutely. In this article we’ve seen that React offers many internal solutions to problems that require getElementById method without React. You can access input elements via SyntheticElement, and create refs if you do need to programmatically alter elements in one way or another. You don’t ever need to use getElementById in React.

What you need to know before learning React

Sebastian9995 — Thu, 07 Mar 2024 14:49:53 +0000

React is a JavaScript library. So you need knowledge of important JavaScript concepts to properly understand how React works and use it to build an interactive web application.

One way of learning React is by doing it. This is an okay approach, but you will make better progress understanding these JavaScript features. Without this foundational knowledge, you may be able to make some things work, but will struggle to understand inner machinations of React. This will prevent you or delay you from fully mastering the library.

What is React

Before going any further, let’s establish what React is. It is a JavaScript library for building user interfaces for browsers.

If you ever look at the code that makes up a React component, you will notice typical JavaScript features – functions, classes, and other aspects of JavaScript. You will also notice code that looks like HTML. That is JSX, templating language for React. Despite how it looks, it’s just a syntax sugar for writing JavaScript code. Personally I've struggled with understanding how to add a new line in React. Then I found an article that explained React line break in great detail.

All of React is actually written in JavaScript. JSX is designed to look like HTML to utilize familiar development experience for building web applications.

You will also notice familiar JavaScript syntax, and also some things you may not be familiar with. For example, React developers extensively use destructuring syntax, as well as spread operator as well as arrow functions. You need knowledge of latest JavaScript features to really understand what’s going on in the code.

With that out of the way, let’s talk about important JavaScript concepts you need to understand to facilitate development in React.

Callback function

This type of function is passed as argument to another function. Often you will use callback functions in metods like map() to dynamically render elements based on an array. useEffect, one of the most important hooks also uses callback function to execute a side effect. Similarly, often you need to event handlers like onClick to a callback function to respond to user interactions in the app.

Promises

Asynchronous functions play an important role for developing apps in React. You need to load external data or wait for certain factors until you execute a function. Promises play an important role for setting up asynchronous functions in React.

Promises are also important when you have multiple callback functions that you need to run in a certain order. Promises allow you to define the order of these functions. Learning about promises and different states they go through will help you write effective code.

map() and filter() methods

Map is a relatively new JavaScript method. It is applied on arrays, and allows React developers to ‘do something’ for every item in the array.

Often times React developers will use map() method to dynamically invoke components. The callback function passed as first argument to the map method allows you to define what you’re going to do with item in the array. You can use data to customize contents of the component you are invoking. You can also pass data via props to customize functionality and even appearance of the component or an element. Similarly, you can use foreach in react js to render components based on an array.

Keep in mind that map() method is applied on an array, and also returns a new array. Except it returns a transformed array. Every item is transformed according to the callback function passed to the map() method.

You can use curly braces to call map() on an array and embed inside the JSX. Since the map method returns a new array, the app will display elements or components returned by the array.

filter() is another important method. It works similar to map() method, but instead of transforming item in the array, callback function checks every item for a condition. Filter() method returns a new array that contains all the items that passed the condition specified in the callback function.

Destructuring arrays and objects

Destructuring is a new ES6 feature that facilitates writing complex expressions in React. Destructuring allows you to access object properties more easily, and also store multiple values. For example, you destructure variables to store a state variable and updater function returned by the useState hook. As for spread operator, it allows you to combine arrays or add items to the array.

I personally also use destructuring to access individual properties instead of using dot notation to access each property. This saves me time and makes my components more readable.

Spread operator, often written as three dots, allows you to give flexibility to your functions to accept as many arguments as you want.

Conditional operators

There are many ways to set a condition and define outcome for that condition in JavaScript. Since React is written entirely in JavaScript, you can use all these statements in React as well.

However, React uses templating language JSX that makes it easier to develop apps in React. And you can not use certain features in JSX. It only allows you to embed expressions that take only one line, not multiple lines. So ternary operator is essentially the only conditional operator you can use inside JSX. That makes ternary operators very useful, and essential for developing dynamic apps with React. You can use a ternary operator to specify what component needs to rendered (a dashboard component if the user is logged in). Or what styles an element should have (dark background if darkmode is enabled).

Logical operators

Finally, it’s also important to understand logical operators in JavaScript. An effective use of logical operators OR ( || ) or AND ( && ) allows you to effectively set complex conditions. This will allow you to build interactive features in React.

Specifically, conditionally render elements or conditionally set inline styles for elements. You can even use the AND operator for conditional rendering.

Summary

Knowledge of these JavaScript features will allow you to build interactive apps with React.

Intro to input types in React

Sebastian9995 — Thu, 07 Mar 2024 14:19:08 +0000

User inputs are the key to building interactive apps with React. In this guide, we will learn about many different types of inputs, as well as corresponding event handlers to capture user inputs. You will also learn about controlled and uncontrolled inputs. Without further ado, let’s get started.

Buttons

Buttons are the simplest and probably most commonly used inputs in React. They’re very useful for variety of use-cases. For example, you can set up a button to hide or show a component when user clicks the button. Or add specified product to the cart when user clicks ‘add to cart’ button.

This type of input is great for one-off actions. Click is a singular user input that doesn’t really vary. All clicks are the same.

You need to define an onClick event handler to respond to click events. The event handler needs to be set to the element. Keep in mind that you need to use curly braces to embed dynamic expressions in JSX. And the onClick attribute should be set to a callback function that runs only when the button is clicked. Don’t set the onClick attribute to the function call itself. Otherwise the event handler will run every time the button is rendered.

Input field

Another very common type of input is a single input field. It is used for many purposes, from authentication to collecting user data.

A value of user input in a field can change as users add or delete their input. That is why you need to track a change event. If defined, onChange event handler will fire every time there’s a change and update the state. Typically current inputs are stored in the state. This way, changes in the input field trigger a re-render of the entire component. This is useful if you’re using the input value to dynamically change structure or contents on the page.

Most often React developers associate value of an input field to the state. This is only possible by getting current input value via event.target.value and storing it in the state. If you are unaware of how this work, you can check out Simplefrontend guide that explains the process.

Form

Form is usually not a component, but a collection of different types of components. Its main purpose is to collect information from users and do something when the form is submitted. There’s also usually a button to submit the form, called a submit button. You do need to specify its type using the type=”submit” attribute.
You can usually set an onSubmit event handler on the

element to perform a certain action when the form is submitted.

Most common is to save current inputs and then clear the form so it can be submitted again. You also need the onSubmit event handler to prevent default behavior of reloading the page.

Checkbox

Another useful type of input is checkbox. It is most commonly used for turning certain features on and off, or letting users provide information about their preferences that can be answered as yes or no. I’ve seen checkboxes used for implementing dark mode, for example. When the checkbox is ticked, the website has dark background and white text, and vice versa.

There are different ways you can handle checkbox events. One way is to get the value of the checkbox that was selected. Another, more common way is to get current status of the checkbox – whether it is selected or not. This guide goes into detail on handling checkbox onChange in React.

You need to store current checkbox value in the state. That is the only way to use it for dynamic rendering or conditional styles. Current state of checkbox is usually stored as a Boolean – true if the checkbox is selected, and false if it is not. Otherwise individual value of the checkbox can be an integer or a string as well.

Radio buttons

This is a very useful type of input. It lets users choose one of the many pre-defined options. The most common type of event is change. You need to capture user input any time they pick one of the radio buttons or change their selection from one to another.
When handling radio buttons, you need to access value of the currently selected option. Information about the event is available on SyntheticEvent object passed to all event handlers.

Labels for inputs

Most inputs need a label. Otherwise users won’t know what to enter. It’s important to give users instructions on the right input. Sometimes you can also display custom error messages to guide users to the right answer. For example, dynamic validation allows you to check if the email field contains ‘@’ or similar necessary symbols. If it doesn’t, tell users to enter the right email.

Don’t forget that we use the htmlFor attribute to associate labels with inputs in React. Not for attribute, like we do in HTML. This is done to avoid confusion between the for loop and for attribute in React.

What are controlled inputs

React has its preferences when it comes to working with input elements. Because input elements are so important for implementing interactive features, React advises developers to implement a two-way binding between inputs and the state. An input field gets its value from the state. At the same time, changes to the input field update the state, which updates the input field. This type of relationship helps React ensure consistency of data.

This approach (also called React 2 way binding) also allows you to dynamically validate values in the input field.

Of course, input like button is an exception, because it doesn’t have an explicitly set value.

Finally, associating input values with the state allows you to easily set default values for the input. In case of class components, you can simply set the default value in the class object. For functional components, the argument to the useState() hook is set as the default value for the state variable. Advantage of using the hook is that it also returns a function to easily update that specific state value. So you don’t have to deal with the setState() method, which can be confusing.

Final words

That sums up everything I needed to share about inputs in React. I hope the guide was helpful and wish you success in your developer journey.