Latest Tutorials

Data grids are a popular way to display information on the web. In this article, we will see how to display data grids with Bootstrap styling in React applications. We will use React Bootstrap Table that helps to display tables with Bootstrap theming support, sorting, filtering, paging, and other features.Bootstrap is one of the most popular UI frameworks. It provides ready-to-use components that simplify building web applications. The Table component in Bootstrap provides beautiful styling for different styles of tables. However, it does not provide additional functionality commonly needed in applications like sorting, filtering, paging, in-cell editing. That's where the React Bootstrap Table comes into play. The React Bootstrap Table is the library that provides the Table component that supports Bootstrap theming and has got a rich set of additional features. For this article, we assume that you're familiar with React components and how to use props and state to control them. We start by adding the React Bootstrap Table to a project: React Bootstrap Table relies on Bootstrap for styling, so we need to install the bootstrap package for the Bootstrap CSS files as well: React Bootstrap Table provides separate packages if you need additional features: If you're going to use some of these additional features, you need to install them as well. Now, we can add the Bootsrap Table to our project: We start by importing CSS files. The bootstrap.css file provides styling for tables. We also import the react-bootstrap-table2.min.css for specific React Bootstrap Table styles not covered by Bootstrap, such as sorting icons and cell editing. Next, we import the BootstrapTable table component. The products array contains a list of items we'd like to display. The columns array defines settings for the table's columns. For each column, we define the name of the field it should display with the dataField field, its display name with the text field, and whether it should be sortable with the sort field. Finally, we render the table with the table component. We specify the bootstrap4 property to notify the table that we're using the Bootstrap version 4. We provide the data to show in the data property and columns configuration in the columns property. We also specify that the id property of products should be used as the unique key with the keyField property. We can configure the BootstrapTable component using its properties. The full list of properties is available on the official site. For example, let's add paging to our table. As mentioned before, paging is implemented in a separate package. We need to install it before using: Now, we can add paging support to our table: This example is similar to the basic table demo. The difference with the previous example is that we import the paginationFactory function from the react-bootstrap-table2-paginator package. We call this function and pass the returned value to the pagination property of the table. The advantage of the React Bootstrap Table is that it uses the Bootstrap theming. If you're using Bootstrap in your React project, the table would use the same styling as the rest of the project. It will apply all the additional theming as well. If you'd like to apply styling to all tables in your application, this is a way to go. We can specify custom CSS classes for additional customization. This can be useful if you need to apply styling for a particular table that differs from other tables. The BootstrapTable component provides properties such as classes , bodyClasses , rowClasses , and headerClasses . React Bootstrap Table provides the table component that works with Bootstrap theming. This is a great choice when you're using Bootstrap in a project and need to display a data grid with sorting, paging, and filtering.

In this article we will look at how to display charts in React applications. We will use Chart.js and react-chartjs-2 libraries for that. We'll see how to add them to a project, configure, and display charts.Charts are a great way to visualize data. We might use different chart types depending on a data type. React-charts-2 is a library that provides different charts to use in React applications. It is a wrapper for the popular JavaScript charts library Charts.js . In this article, we will see how to add, configure, and use react-charts-2 in React applications. For this article, we assume that you're familiar with React components and how to use props and state to control them. Let's start by adding react-chartjs-2 to a project. React-chartjs-2 is a wrapper for Chart.js so we need to add both packages: Now, we can display charts. Let's display a chart with two lines: We start by importing the Line component. Next, we define the data object that contains data for our chart. The labels property defines labels that will be used for the X-axis. The datasets property is an array of datasets to display on the chart. Each dataset contains a set of properties that provide data values and visual configuration like colors, background colors, and line styling. Every dataset should have a unique label. The label property is used by Chart.js by default to distinguish datasets. Finally, we render the Line chart. We pass our data object to the data property of the chart. React-chartjs-2 provides 9 components for different types of charts: Line , Bar and HorizontalBar , Doughnut and Pie , Bubble , Polar , Radar , and Scatter . All the charts provide the same set of properties we can use to configure them. The main properties are: The description of all properties is available on the react-chartjs-2 site. Objects that we provide to properties got redirected to an underlying Chart.js chart. That means that these objects follow the same format as expected by Chart.js. To get the description of options for the data , options , and legend properties you may check the Chart.js documentation . For example, let's display the same line chart with some additional changes. We will provide a title, display a legend at the bottom, and will configure Y-axis to start at 0 and end at 100: The data property for the chart stayed the same as in the previous example. It defines legends for X-axis and datasets to display. We additionally declare the legend object for the legend property. It contains configuration to display the legend at the bottom with larger font size. The options object specifies to display a title for the chart and also provides a configuration for the Y-axis. This object is passed to the options property of the Line component. React-chartjs-2 makes it easy to display Charts.js charts in React applications. Using this library we can display different types of charts, configure them, and style as needed.

This post is about the systematic procedure of how NodeJs performs tasks, how and why one would use asynchronous programming, why and when should one resort to synchronous programming and then we will see how to make use of the new FS. Promises API as opposed to the commonly known callback and synchronous based FileSystem methods.Throughout this post, we will look at the many ways to write code the asynchronous way in Javascript and also look at: ✅ How asynchronous code fits in the event loop ✅ When you should resort to synchronous methods ✅ How to promisify FS methods and the FS.Promises API In order to make the best use of this post, one must already be: ✅ Sufficiently experienced in Javascript and NodeJS fundamentals (Variables, Functions, etc.) ✅ Had some level of exposure to the FileSystem module (Optional) Once you're done reading this post you will feel confident about asynchronous programming and will have learned something new but also know: ⭐- If you hang tight there's also some bonus content regarding some best practices when using certain FileSystem methods! Javascript achieves concurrency through what is known as an event loop. This event loop is what is responsible for executing the code you write, processing any event that fires, etc. This event loop is what makes it possible for Javascript to run on a single thread and handle asynchronous tasks, this just means that Javascript does one thing at a time. This might sound like a limitation but it is definitely something that helps. It allows you to work without worrying about concurrency issues and surprisingly the event loop is non-blocking! Of course, unless you as a developer purposely do something to block it. The event loop looks more or less like this: This loop runs as long as your program runs and hence called the event loop. To better understand asynchronous programming though, one must understand the following concepts: Let's take a look at the following code example and see how a typical execution flow looks like: Initially the synchronous tasks console.log() will be run in the order they were pushed into the call stack. Then the Promise thenables will be pushed into the Job Queue , while the setTimeout 's callback function is pushed into the Callback Queue . However, as the Job Queue is given a higher priority than the Callback Queue, the thenables are executed before the callback functions. What's a promise or a thenable, you ask? That's what we will look at in the next topic! As you previously saw in the setTimeout , a callback function is one of the ways that Javascript allows you to write asynchronous code. In Javascript, even Functions are objects and because of this a function can take another function as an argument/parameter and can also be returned by functions. Functions that take another function as an argument is called a Higher-Order Function. A function that is passed as an argument to another function is what is known as a callback. But quite often, having a whole lot of callbacks look like this: Taken from callbackhell , this shows how extremely complex and difficult it might get to maintain callbacks in a large codebase. Don't panic! That's why we have promises. A promise is an object that will produce some value in the future. When? We can't say, it depends. However, the value that is produced is one of two things. It is either a resolved value or a reason why it couldn't be resolved, which usually indicates something is wrong. A promise goes through a lifecycle that can be visualized like the following: Taken from a great resource on promises, MDN . But still, this didn't provide the cleanliness we wanted because it was quite easy to have a whole lot of thenables one after the other. This is why the async/await syntax was introduced, which looks like the following: Looks a whole lot better than what you saw in all the previous code examples! Before we jump into the exciting FS.promises API that I previously used, we must talk about the often unnoticed and unnecessarily avoided synchronous FileSystem methods. Remember how I mentioned previously that you can purposely block the event loop? A synchronous FS method does just that. Now you might have heard quite a lot of times about how you should avoid synchronous FS methods like the plague, but trust me because they block the event loop, there are times when you can use them. A synchronous function should be used over an asynchronous one when: A typical use case to satisfy both the above use cases can be expressed like this: DataStore is a means of storing products, and you'll easily notice the use of synchronous methods. The reason for this use is that it is completely acceptable to use a synchronous method like this as the constructor function is run only once per every creation of a new instance of DataStore . Also, it is essential to see if the file is available and create the file before it will be used by any other function. The asynchronous FileSystem methods in NodeJS, commonly use callbacks because, during the time they were made, Promises and async/await hadn't come out nor were they at experimental stages. The key advantage these methods provide over their synchronous siblings is the fact that you do not end up blocking the event loop when you use them. This allows us to write better more performant code. When code is run asynchronously, the CPU does not wait idly by until a task is completed but moves on to the next set of tasks. For example, let us take a task that takes 200ms to complete. If a synchronous method is used, CPU will be occupied for the entire 200ms but if you use around 190ms of that time is freed up and can now be used by the CPU to perform any other tasks that are available. A typical code example of asynchronous FileSystem methods are: As you can see, they are distinguished by the lack of Sync and the apparent usage of callback functions. When secret.txt has been completely read, the callback function will be executed and the secret data stored will be printed on the console. As humans, we're prone to making silly mistakes and when frustrated or when we experience a lot of stress, we tend to make unwise decisions, one such decision is mixing synchronous code with asynchronous code! Let's look at the following situation: Due to the nature of how NodeJS tackles operations, it is very much likely that the secret.txt file is deleted before we actually read it. Thankfully here though, we are catching the error so we will know that the file doesn't exist anymore. It is best to not mix asynchronous code with synchronous code, being consistent is mandatory in a modern codebase. Way back when FS.promises was introduced, developers had to resort to a few troublesome techniques. You might not need them anymore, but in the unlikely event you end up using an old version of NodeJS knowing how to achieve promisification will help greatly. One method is to use the promisify method from the NodeJS util module: But as you can see, this allows you to only turn one method into its promisified version at a time, so some developers often used an external module known as bluebird that allowed one to do this: Some developers still use bluebird as opposed to the natively implemented Promises API, due to performance reasons. As of NodeJS version 10.0, you can now use FS.promises a solution to all the problems that you'd face with thenables when you use Promises. You can neatly and directly use the FS.promises API and the clean async/await syntax. You do not have to use any other external dependencies. To use the FS.promises API you would do something like the following: It's much cleaner than the code you saw from the callback hell example, and the promises example as well! One must note however that async / await is simply syntax sugar, meaning it uses the Promise API under the hood. File streams are unfortunately one of the most unused or barely known concepts in the FileSystem module. To understand how a FileStream works, you must look at the Streams API in the NodeJS docs. One very common use case of FileStreams is when you must copy a large file, quite often whether you use an asynchronous method or synchronous method, this leads to a large amount of memory usage and a long time. This can be avoided by using the FileSystem methods fs.createReadStream and fs.createWriteStream . Phew! That was long, wasn't it? But now you must feel pretty confident regarding asynchronous programming, and you can now use the FS.promises API instead of the often used callback methods in the FileSystem module. Over time, we will see more changes in NodeJS, it is after all written in a language that is widely popular. What you should do now is check out the resources section and read some more about this or try out Fullstack Node.Js to further improve your confidence and get a lot of other different tools under your belt!

In this article, we will look at a way to style React elements called inline styling. We will learn when to use it and what alternative approaches are available.Styling in React applications is a large topic with lots of nuances. In this article, we will look at the basic styling approach called inline styling. Also, we will look at styling using CSS classes and will compare these two approaches. You will learn what inline styling is, how and when to use it. For this article, we assume that you're familiar with React components basics, such as working with component's properties. There are two basic ways to define styling for an element in React. The first one is using the className property of a React element to define CSS classes for it. We define a string with a space-separated list of classes. This corresponds to the class attribute of HTML elements. This way, we can define a CSS class and apply it later to multiple elements. The second approach is using the style property and is called inline styling . This property accepts an object with fields that define the style of a React element. This corresponds to the style attribute of HTML elements. Using this approach, we define styling for a particular element. For example, here are two <div> elements that look the same. The first one has got styles applied with a CSS class and the second one has got inline styling applied: In this example, we've defined the box CSS class in the separate styles.css CSS file. We start by importing this file to include it in the final bundle. Next, we specify the className property of the first <div> element to use the box class. For the second <div> element we've defined the boxStyle object. This object has got properties that define styling to be applied. This object has got properties equal to the box CSS class. We specify this object as a value for the style property of the second <div> element. Properties of the style object should be in the lower camel case . For example, the backgroundColor corresponds to the CSS border-color attribute and defines the background color, and borderWidth defines a width of the element's border. We can use strings and numbers as values of style properties. When using numbers, React will append "px" suffix where applicable. For example, React will add the "px" suffix for the width and fontSize properties, but won't add it for the zIndex and fontWeight properties (as they do not require units). An important thing to keep in mind is that properties for inline styling are not autoprefixed. If you need to support older browsers with inline styles, you need to provide vendor-specific attributes yourself. Also, when working with inline styling you cannot use pseudo selectors such as :hover or :first-child . Media queries are not supported as well. The inline styling has got limited applicability in modern React applications. A valid choice for it would be if you need to dynamically apply a unique style depending on a component's state. For example, if we allow a user to select a color or a text size dynamically, it won't be feasible to define a CSS class for each case. In this case, we can use a CSS class for basic styling and add unique settings with inline styling. In other cases, you may prefer using CSS classes. In this example, we allow a user to enter a background color manually: We've defined the box CSS class in the styles.css file that provides basic styling, such as padding and text color. We specify this CSS class with the className property for the <div> element. Text entered by a user we save to the color state variable. We use that value as the background color value of the boxStyle object that we pass to the style property of the <div> element. Styling in React applications is a large and complex topic. In this article, we've seen how we can use inline styling to dynamically apply styling to a particular element. In other cases, it is recommended to use CSS classes. Also, if you're working with large React applications or building reusable components, you may benefit from styling tools such as styled-components or emotion .

In this article, we will look at how to add a carousel to a React application using the React Slick library. We will see how to add a carousel, configure and style it.React Slick provides a carousel component for React applications. It is a port of the popular Slick jQuery plugin. Using this library we can easily add a carousel to a React application. For this article, we assume that you're familiar with React components and how to use props and state to control them. First, we need to add React Slick to our project. React Slick does not provide own CSS styling. Instead, it uses the theme of the original Slick jQuery plugin. That means that we need to install both React Slick for a carousel component and Slick for CSS styles: After that we can show a carousel component in our application: We start by importing CSS files from the slick-carousel package that provides default styling. We also import the Slider component from React Slick. After that, we use the Slider component to render a carousel with slides. We specify properties to the component to define its behavior. In this case, there is a single dots property that specifies whether to show dots under slides. Slides are defined as children of the Slider component. In our case, the renderSlides function returns a list of <div> elements with <h3> headers inside, but you are free to use other elements. The Slider component provides a lot of properties that we can use to configure it. For example, let's configure a carousel to auto-play slides and display two slides at once: The configuration for the Slider component in this demo is the following: If you would like to style the React Slick carousel, there are two ways to do that: defining custom React components for slider elements and customizing CSS. Providing custom components for arrows and dots allows modifying the carousel without knowing details of its CSS classes. We can override next and previous arrows by specifying the nextArrow and prevArrow properties. For these properties, we need to provide a React component that will render a custom arrow. Also, we can override dots under a slider. We can specify a custom container for dots with the appendDots property and define a look of a particular dot with the customPaging property. For example, here's how we can provide custom arrows and custom dots: In this example, we've declared our Arrow component that renders either next or previous arrow depending on its type property. We use this component to specify values for nextArrow and prevArrow properties of the Slider component. For the dots container, we've got the appendDots function that we've specified for the appendDots property of the carousel. This function renders a list of dots in a div with a modified background. For custom dots, we've declared the customPaging function. This function receives the index of a slide and renders a <span> element with a number instead of a dot. We provide this function for the customPaging property of the carousel. If we need to deeply customize the styling of the Slider component, we can override CSS classes provided by the Slick carousel. This requires looking into details of CSS classes but allows to completely change the look of the slider. We can either copy them all or just only override some classes. For example, here's how we can define a color of arrows and an active dot: React Slick provides a great component that we can use to add a carousel to React applications. We can configure the Slider component and apply styling according to requirements.