Articles about Tutorials

What is Create React App?

Intro to Create React app? Setting up a ReactJS application from scratch can be a long and complicated process. You have to think about everything, like Babel, Webpack with all the plugins, testing libraries, etc. And it can also bring some issues which can take a few hours to solve. But fortunately, there is a fast and easy solution that can be used in lots of cases, and it’s the Create React App tool.

Keep reading...

Composition vs Inheritance in React.JS

Intro to composition vs inheritance Welcome to the composition vs inheritance in React comparison. If you’re a senior developer or architect, I bet you know the most popular concepts, design patterns, and how stuff works inside. But still, not many front-end devs go think so much about composition and inheritance. It’s not an often discussed topic, and I’ve noticed not all devs can explain why they created their solution with this or this way.

Keep reading...

List and keys in React - cheatsheet for beginners

List and keys in React intro List and keys in React are among the most basic concepts. It may be the first scary one for beginners who just started to create their first application using the React framework. And what’s even scarier, you can’t avoid using lists because almost every application has some kind of repeatable content. But in reality, really simple. It just needs to be explained. That’s why in this article, I decided to explain what lists are, how to build a list in JSX, what keys are and how to fix one of the most common errors connected to list and keys you will see a lot of times in your console.

Keep reading...

React lifecycle methods with hooks cheatsheet for everybody

Intro to React lifecycle methods Welcome to the react lifecycle tutorial, where I will explain all the things related to the react component lifecycle methods. You’ll learn about the four main react component lifecycle stages, when they’re fired, and what is happening inside. Next, we will talk about the methods used during these stages, which ones we need, and which ones we should avoid. We won’t forget about these deprecated methods, so you will know which ones you should definitely refactor in your code and don’t use anymore.

Keep reading...

Webpack configuration - step by step tutorial on how to setup Webpack

Intro to Webpack tutorial Webpack is a tool very often used in software development, and it’s pretty useful. For many junior and even mid developers, Webpak can be the darkest nightmare, and it was scary for me as well. By all the power, I tried to avoid setting Webpack by using tools like create-react-app to build a new ReactJS application and never have to do any changes inside the ready config, as it seemed confusing.

Keep reading...

How to setup MongoDB in the cloud with Atlas?

Intro to setup MongoDB in the cloud with Atlas Almost every application you are trying to build needs a database; depending on the type of data you’d like to keep inside, some developers select SQL databases like PostgreSQL or NoSQL databases like MongoDB. Nowadays, when MERN and MEAN stacks for applications are more and more popular, many developers select MongoDB. To start a project, you’d need to set up MongoDB locally on your computer or online in the cloud.

Keep reading...

How to implement redux-saga with ReactJS and Redux [TUTORIAL]

Intro to Redux setup tutorial Very often, you can hear about the state in frontend applications, but what it exactly is? Let me explain. State in frontend applications represents all the data stored in the application in a given time. It can be stored in different formats like objects or strings. Based on the state’s values, we can personalize the application, display, and hide certain elements. To manage the state in modern frontend frameworks, we can use different libraries like Redux, MobX, or NgRx.

Keep reading...

Node.js Course With Building a Fintech Banking App – Lesson 4: Login and User Authentication

Intro to Node.js Course - Login and User Authentication In previous weeks we started a Node.js Course, where we are building a fintech banking application. In this course, we are using the Nest.js framework and Typescript. In the first lesson of this Node.js Course, we started a project and done migrations to set up the database. In the second and third lesson, I focused on user registration, creating a new user in the database, and displaying the proper response from the endpoint.

Keep reading...

How to build a website with Hugo and amp tutorial

Intro to how to build a website with Hugo and amp tutorial Today we will focus on how to build a website with Hugo and amp, next we will host it on S3. Last episode about performance you can find here: React.js performance tutorial Last days we noticed our blog is growing a lot in size, and performance is going down. As max on slow 3g, we had even 7s to LCP that punished our SEO, and visits decreased three times.

Keep reading...