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…

CSS Modules are one of the most popular ways for styling React components. Whether you are using only CSS or a more advanced pre-processor like SASS, it doesn't matter for CSS Modules: You can write all these styles in your style sheet files next to your React components. Since we are building up on top of a custom React + Webpack application, it…

React Context is a powerful feature. If your React application grows in size beyond a small application, there is nothing wrong with giving it a try. Many third-party libraries like Redux are using it under the hood anyway, so why not learn about it. Especially if your component hierarchy grows in vertical size, it becomes tedious passing props…

State in React is one of the most important topics when learning React . State breathes life into your React application. It's what makes your application grow beyond static content being displayed on a website, because a user can interact with it. Every interaction of a user with your application may change the underlying state which lead to…

A JavaScript naming conventions introduction by example -- which gives you the common sense when it comes to naming variables, functions, classes or components in JavaScript. No one is enforcing these naming convention rules, however, they are widely accepted as a standard in the JS community. JavaScript Naming Conventions: Variables JavaScript…

If you are new to JavaScript, the question mark after a variable may be confusing to you. Let's shed some light into it. The question mark in JavaScript is commonly used as conditional operator -- called ternary operator when used with a colon (:) and a question mark (?) -- to assign a variable name conditionally. Either the expression is true…