Just recently I had to use Docker for my create-react-app web application development. Here I want to give you a brief walkthrough on how to achieve it. First of all, we need a React application. Either create a React app with create-react-app yourself, or follow this React MacOS setup guide or this React Windows setup guide . Note: If you are…
When my last client asked me about internationalization in React, I went through all the hoops to prepare a presentation for them. In this React tutorial, I want to show you the gist of what I have learned about translating a React application. Table of Contents React Internationalization: Which library should I use? There are two popular libraries…
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…
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…
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…
Redux has been with us for a while now. What has gone public 2015 -- demonstrated by Dan Abramov in his infamous talk about time travel -- suddenly turned into many JavaScript developer's day to day business. Especially React developers were hit hard by this phenomenon, because it gave everyone a clear path on how to deal with state management…
