Articles, Guides & Tips
post is about how to deploy React app in a sub-directory on cPanel. So, for this, you need a React Application setup and a cPanel ready for deployment. You can host React app on Firebase or any free hosting as well. That, I will cover in another post. React App cPanel/WHM Once, you are ready, let’s start…
To toggle between a boolean flag in React, you can use the below custom hook that uses setState internally: Since the function returns an array, with a state and a callback function, you can use it in your component, just like you would for other built-in React hooks, like so:
This article will provide examples of react js environment variables. I would like to share with you how to get the env variable in the laravel react site. if you want to see an example of how to get environment variables in react js then you are in the right place. we will help you…
Read More “How to Get Environment Variables in Laravel ReactJS” »
You are already familiar with the basics of React. Also, having a good understanding of React Router DOM. This post will be totally dependent on these. If you don’t have a React app setup, then you can create it. Else, you can move ahead with the existing React App. Create React App You can create a…
Read More “How to Use useLocation Hook in React Router DOM V6” »
If you ever get weird errors in npm like Please run npm cache clean you may need to clean or refresh your npm cache. To fix this, you can try running npm cache clean. Run: “npm cache verify” for npm version 5 and up However if you’re running npm v5 and above, npm is supposed to be self-healing,…
This tutorial assumes you already have a cPanel hosting service purchased and a domain name registered. If yes, Let’s go straight to the steps (If No, You can comment, I can give you steps on how to get a domain and hosting service) Step 1. Using the Terminal/CMD in your project directory, create a react…
Read More “How to Deploy or Host your ReactJS App in cPanel” »
This is a follow-up article to my previous article on Array Destructuring. Except you have an idea of destructuring, you should read it. First, let’s see why object destructuring is needed. We want to extract data from the object and assign it to new variables. Before ES6, how would this happen? See how tedious it is…
Destructuring assignment is a nice feature that comes with ES6. Destructuring is a JavaScript expression that makes it possible to unpack values from an array or properties from an object into separate variables. That is, we can extract data from arrays and objects and assign it to variables. Why is this necessary? Imagine if we…
What JSX is JSX is a syntax extension for JavaScript. Basically, it extends JavaScript so that constructs like HTML/XML can be used with JavaScript. It allows developers to use HTML syntax to compose JavaScript components. This makes it possible to have a clear and familiar syntax for defining DOM tree structures with attributes. Although it…
Read More “Important most things you should know about JSX” »
A component props is an object that holds information about that component. They are similar to attributes in HTML. In fact, they are passed to the components the same way attributes are passed to HTML. Here’s the code for the component we made in my previous article. Adding Properties to Components So let’s say we want to…
A difference between state and props is that while the data stored by props are fixed throughout their lifetime, state store data that can be changed over time. This change can be in response to user actions, network responses, or anything. Also, while props are set by the parent component, state is changed internally by the component itself. A component’s state should be considered private data. This…
Prior to ES6, classes have been in use in Javascript. ES6 just comes with a clean, nice-looking syntax for defining classes. It’s good to note that JavaScript’s class is just a more convenient way of creating constructor functions, which are very different from traditional classes. In this article, we will focus on: How to define…
A lot of shiny new features came out with ES2015 (ES6). And now, since it’s 2020, it’s assumed that a lot of JavaScript developers have become familiar with and have started using these features. While this assumption might be partially true, it’s still possible that some of these features remain a mystery to some devs….
Read More “Difference between var, let, and const in JavaScript” »