Conditional rendering in React isn't difficult. In JSX - the syntax extension used for React - you can use plain JavaScript which includes if else statements, ternary operators, switch case statements, and much more. In a conditional render, a React component decides based on one or several conditions which DOM elements it will return. For instance…
In this React tutorial, we will get to know event handlers in React for HTML elements such as button and input elements. You will learn how to use a button with its onClick event and how to define and use different kinds of event handlers. Essentially we will go through three kinds of event handlers: event handlers, inline event handlers and…
There are three different ways to declare a variable in JavaScript: const, let and var. Historically, var has been the only way of declaring a JavaScript variable : An addition to JavaScript -- to be specific: JavaScript ES6 in 2015 -- has made const and let available to the language: Obviously more options on how to declare and define a…
In JavaScript ES6, you can import and export functionalities from modules. These can be functions, classes, components, constants, essentially anything you can assign to a JavaScript variable . Modules can be single files or whole folders with one index file as entry point. The import and export statements in JavaScript help you to share code…
The content of this section is a crash course in node and npm. It is not exhaustive, but it will cover all of the necessary tools. The node package manager (npm) installs external node packages (libraries) from the command line. These packages can be a set of utility functions, libraries, or whole frameworks, and they are the dependencies of your…
In every programming language, you will find variables. This also holds true for JavaScript. Essentially variables are used to carry information. Without them, it wouldn't be really possible to code any applications. At some point in time, you always have to keep or transfer information in variables. In this JavaScript tutorial, I want to dive with…
In this React component tutorial by example, we will create a React Range Component with React Hooks and a Function Component . You can see the final output of this implementation in this CodeSandbox or in this GitHub repository . If you want to implement it step by step, just follow the tutorial. React Range: Component We are starting off…
In this React component tutorial by example, we will create a React Slider Component with React Hooks and a Function Component . You can see the final output of this implementation in this CodeSandbox or in this GitHub repository . If you want to implement it step by step, just follow the tutorial. React Slider by Example Let's start right…
Just recently I had to apply Webpack's Code Splitting, because the bundle size of a single file for my JavaScript library got too big when installing and importing it in another JavaScript project. After going through the process of Code Splitting my library, I was able to reduce my bundle size significantly by not importing the whole library at…
Every once in a while we need to test API requests. Axios is one of the most popular JavaScript libraries to fetch data from remote APIs . Hence, we will use Axios for our data fetching example -- however, the following tutorial should make it possible to exchange axios with any other data fetching library. In this data fetching example with…
