Writing clean and maintainable code in React.js involves adhering to best practices and following established conventions. Here are some tips for writing clean code and following best practices in React.js:

1. Follow the Component-Based Architecture:
- Divide your application into reusable components, each responsible for a specific piece of functionality.
- Keep your components small and focused on a single task. This makes them easier to understand and maintain.

2. Component Naming:
- Use meaningful and descriptive names for your components. Use PascalCase for component names (e.g., App, Header, ProductList).

3. Props and State:
- Clearly define and document the props that your components expect.
- Avoid mutating state directly; use the setState function or hooks (e.g., useState, useReducer) to update state.

4. Destructuring:
- Use object destructuring to extract props and state variables. This makes your code more concise and readable.

5. Functional Components:
- Use functional components with hooks whenever possible. They are easier to understand and test.

6. Component Organization:
- Group related components into folders or directories for better project structure.
- Maintain a consistent folder structure (e.g., separate folders for components, containers, styles, and tests).

7. Consistent Formatting:
- Follow a consistent coding style and formatting guide. Tools like Prettier can help automate code formatting.

8. Commenting:
- Add comments to explain complex logic or non-obvious code. Make your code self-documenting whenever possible.

9. Avoid Unnecessary Re-renders:
- Use React.memo or PureComponent to prevent unnecessary re-renders when props or state haven't changed.

10. Use PropTypes or TypeScript:
- Use PropTypes to specify the types of props your components expect. If possible, consider using TypeScript for type checking.

11. Avoid Direct DOM Manipulation:
- React handles DOM manipulation for you. Avoid direct DOM manipulation using vanilla JavaScript.

12. Avoid Uncontrolled Components:
- In forms, prefer controlled components with value and onChange handlers over uncontrolled components.

13. State Management:
- For complex state management, consider using a state management library like Redux or React Context API.

14. Error Handling:
- Implement error boundaries to gracefully handle errors in your components.

15. Testing:
- Write unit tests for your components using testing libraries like Jest and React Testing Library.

16. Performance Optimization:
- Optimize your application's performance by using tools like React DevTools and following performance best practices.

17. Accessibility:
- Ensure your components are accessible by using semantic HTML, ARIA roles, and testing with accessibility tools.

18. Code Reviews:
- Conduct code reviews to get feedback from peers and improve code quality.

19. Linting and Static Analysis:
- Use linters (e.g., ESLint) and static code analysis tools to catch common coding mistakes and enforce coding standards.

20. Keep Learning:
- Stay up to date with React updates and best practices by following the official documentation and community resources.

By following these best practices and guidelines, you can write clean, maintainable, and scalable React.js code, which will benefit both you and your team in the long run.

JavaScript ilə kartların tipini müəyyən etmək

#javascript #paymentcards #visa #Mastercard #programming #developernijat #aliyevdevinsights #regexp

JavaScript ilə kartların tipini müəyyən etmək Method 2

function getCardType(cardNumber) {
  // Define regular expressions for various card types
  var cardPatterns = {
    visa: /^4[0-9]{12}(?:[0-9]{3})?$/,
    mastercard: /^5[1-5][0-9]{14}$/,
    amex: /^3[47][0-9]{13}$/,
    discover: /^6(?:011|5[0-9]{2})[0-9]{12}$/,
    dinersclub: /^3(?:0[0-5]|[68][0-9])[0-9]{11}$/,
    jcb: /^(?:2131|1800|35\d{3})\d{11}$/
  };

  for (var card in cardPatterns) {
    if (cardPatterns[card].test(cardNumber)) {
      return card;
    }
  }

  return "Unknown";
}

// Example usage
var cardNumber = "4111111111111111"; // Replace with the actual card number
var cardType = getCardType(cardNumber);
console.log("Card Type: " + cardType);

Daha bir faydalı video.
Uğursuz Login cəhdlərindən sonra IP ünvanın blok edilməsi.

Another useful video.
IP address blocking after failed login attempts.

https://youtu.be/XwiZldfsQLI?si=n5PgEFfj1tbAoXZT

#mernstack #nodejs #ReactJS #programming #javascript #developernijat #expressjs #MongoDB #mongoose #aliyevsdevinsigths

🔄 JavaScript Tip: Embrace the power of 'Array.from()' to convert array-like objects or iterable into an array. It's a handy utility method for working with various data structures. Example:

// Convert string to array
const string = 'hello';
const charArray = Array.from(string);

// Convert NodeList to array (e.g., from querySelectorAll)
const elements = document.querySelectorAll('.myClass');
const elementArray = Array.from(elements);

#JavaScript #ArrayFrom #CodingTips

Windows-da görünməz papka

JavaScript tip: Map arrays with more shorthand way

🛑 JavaScript Tip: Be mindful of 'hoisting' when declaring variables with 'var'. Variables declared with 'var' are hoisted to the top of their scope, which can lead to unexpected behavior. Consider using 'let' or 'const' for more predictable results. Example:

console.log(name); // undefined
var name = 'John';

// Using let or const to avoid hoisting issues
console.log(age); // ReferenceError: age is not defined
let age = 25;

#JavaScript #Hoisting #CodingTips

🧠 JavaScript Tip: Use the 'Array.prototype.reduce()' method to transform, filter, or accumulate values in an array. It's a powerful and versatile method for processing arrays with a single callback function. Example:

const numbers = [1, 2, 3, 4, 5];

// Summing up array elements with reduce
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

#JavaScript #ArrayReduce #CodingTips

EN: Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, ARCore, and Google APIs on iOS.

AZ: Google Developers Codelabs təlimatlı, təlimatçı, praktiki kodlaşdırma təcrübəsi təqdim edir. Əksər kod laboratoriyaları kiçik proqram yaratmaq və ya mövcud proqrama yeni funksiya əlavə etmək prosesində sizə addım atacaq. Onlar iOS-da Android Wear, Google Compute Engine, ARCore və Google API kimi geniş mövzuları əhatə edir.

https://codelabs.developers.google.com/

#google #codelabs #googledevelopers #android #flutter #learn #coding #programming #AndroidWear #arcore #GoogleAPIs #ios #developernijat #aliyevsdevtales

Here's a brief guide on using parallel processing in Node.js:

Using the cluster module for parallel processing:

The cluster module in Node.js allows forking processes to take advantage of multiple CPU cores, enabling parallel processing. Here's an example:

const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
  console.log(`Master ${process.pid} is running`);

  // Fork workers for each CPU core
  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  cluster.on('exit', (worker, code, signal) => {
    console.log(`Worker ${worker.process.pid} died`);
  });
} else {
  // Workers can share any TCP connection
  // In this case, an HTTP server
  http.createServer((req, res) => {
    res.writeHead(200);
    res.end('Hello, World!\n');
  }).listen(8000);

  console.log(`Worker ${process.pid} started`);
}

This code demonstrates how the cluster module creates multiple worker processes, each handling incoming HTTP requests.

Using the async library for parallel operations:

Another approach is to use libraries like async to perform parallel operations. Here's an example:

const async = require('async');

// Simulated asynchronous tasks
const task1 = (callback) => {
  setTimeout(() => {
    console.log('Task 1 completed');
    callback(null, 'Result of Task 1');
  }, 1000);
};

const task2 = (callback) => {
  setTimeout(() => {
    console.log('Task 2 completed');
    callback(null, 'Result of Task 2');
  }, 500);
};

// Parallel execution of tasks
async.parallel([task1, task2], (err, results) => {
  if (err) {
    console.error('Error:', err);
    return;
  }
  console.log('All tasks completed');
  console.log('Results:', results);
});

In this example, async.parallel runs task1 and task2 in parallel and collects their results.

These examples demonstrate two different ways to achieve parallel processing in Node.js: using the cluster module for managing multiple processes and using a library like async for handling parallel asynchronous tasks within a single process.

async.parallel and Promise.all are two different approaches to handling parallel asynchronous operations in JavaScript, but they serve a similar purpose.

async.parallel:
- async.parallel is a function provided by the async library in Node.js. It's used to execute multiple asynchronous tasks simultaneously and collect their results.
- It accepts an array of functions (tasks) and a final callback function.
- It executes all tasks in parallel and waits for all tasks to complete before calling the final callback with the results.
- It's suitable for scenarios where you have multiple asynchronous tasks to perform simultaneously.

Example using async.parallel:

const async = require('async');

const task1 = (callback) => {
  setTimeout(() => {
    console.log('Task 1 completed');
    callback(null, 'Result of Task 1');
  }, 1000);
};

const task2 = (callback) => {
  setTimeout(() => {
    console.log('Task 2 completed');
    callback(null, 'Result of Task 2');
  }, 500);
};

async.parallel([task1, task2], (err, results) => {
  if (err) {
    console.error('Error:', err);
    return;
  }
  console.log('All tasks completed');
  console.log('Results:', results);
});

`Promise.all:
- Promise.all is a built-in JavaScript method that takes an iterable (e.g., an array) of promises and returns a single Promise that resolves when all of the input promises have resolved.
- It's commonly used with native promises or Promise-based APIs in modern JavaScript.
- It's ideal when you have multiple promises to execute in parallel and need to await all of them to complete.

Example using Promise.all:

const task1 = new Promise((resolve) => {
  setTimeout(() => {
    console.log('Task 1 completed');
    resolve('Result of Task 1');
  }, 1000);
});

const task2 = new Promise((resolve) => {
  setTimeout(() => {
    console.log('Task 2 completed');
    resolve('Result of Task 2');
  }, 500);
});

Promise.all([task1, task2])
  .then((results) => {
    console.log('All tasks completed');
    console.log('Results:', results);
  })
  .catch((err) => {
    console.error('Error:', err);
  });

In summary, async.parallel is a method provided by the async library specifically designed for parallel execution of multiple tasks, while Promise.all is a native JavaScript method for handling multiple promises in parallel, commonly used with native promises or Promise-based APIs in JavaScript. Both are useful for managing parallel asynchronous operations, but Promise.all is more native to modern JavaScript environments.

An alternative to setInterval() in JavaScript is using setTimeout() recursively to achieve a similar effect of interval-based execution.

Here's an example of how you can create a function that executes repeatedly with a delay using setTimeout():

function repeatAction() {
  // Perform your action here
  console.log('Action performed');

  // Schedule the next execution after a delay
  setTimeout(repeatAction, 3000); // Set the delay in milliseconds (e.g., 3000ms = 3 seconds)
}

// Start the initial execution
repeatAction();

This approach involves calling setTimeout() inside the function itself to create a loop-like behavior with a delay between each execution, achieving similar functionality to setInterval().

📣 The good news is that JavaScript is now getting grouping methods so you won’t have to anymore. Object.groupBy and Map.groupBy are new methods that will make grouping easier and save us time or a dependency.

#JS #javascript #coding #programming #developernijat #aliyevsdevtales #object #GROUPBY

22 Frontend Certifications for Web Developers

🌱 HTML + CSS

1. Introduction to Front-End Development
This introductory course will help you learn front-end development from scratch as well as the important tools and technologies in it.

👉 https://www.simplilearn.com/front-end-developer-free-course-skillup

2. Front-End Development - HTML
Learn front-end development for free to gain fundamental knowledge of HTML and kick-start your Front front-end development career.

👉 https://www.mygreatlearning.com/academy/learn-for-free/courses/front-end-development-html

3. CSS, CSS Box Model, and CSS Projects
This CSS Tutorial gives you an introduction to CSS, CSS Box Model, and CSS Projects.

👉 https://www.mygreatlearning.com/academy/learn-for-free/courses/css-tutorial

4. CSS Essential Training
In this hands-on course, you will learn the concepts that form the foundation of CSS, explaining what you need to know to tweak existing CSS and write your own.

👉 https://www.linkedin.com/learning/css-essential-training-revision-q4-2019

5. Modern HTML & CSS (Including SASS)
Build modern responsive websites & UIs with HTML5, CSS3 & Sass! Learn Flex & CSS Grid.

👉 https://www.udemy.com/course/modern-html-css-from-the-beginning

6. CSS - The Complete Guide
Learn CSS for the first time, brush up your CSS skills, and dive in even more.

👉 https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/

7. Responsive Web Design
You'll learn the languages that developers use to build web: HTML for content, and CSS for design.

👉 https://www.freecodecamp.org/learn/2022/responsive-web-design/

8. CSS Skills Certification Test
The test covers topics like exploring Cascading and Inheritance, exploring text styling fundamentals, understanding the use of layouts, and the boxing of elements, among others.

👉 https://www.hackerrank.com/skills-verification/css

🚀 JavaScript

9. Introduction to JavaScript
This course will introduce you to the basics of the JavaScript programming language and the platforms used to code the language.

👉 https://www.mygreatlearning.com/academy/learn-for-free/courses/introduction-to-javascript

10. Learn Javascript Basics
You will learn skills to build simple programs and web applications and customize web pages.

👉 https://www.simplilearn.com/learn-javascript-basics-free-course-skillup

11. JavaScript Algorithms and Data Structures
You'll learn the fundamentals of JavaScript, such as variables, arrays, objects, loops, and functions.

You'll put that knowledge to use by writing algorithms to manipulate strings, factorial numbers, etc.

👉 https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

12. JavaScript Essentials 1 (JSE)
Learn the essentials of JavaScript and computer programming. Learn how interactive web and mobile apps are created with JavaScript – and learn to program your own.

👉 https://www.netacad.com/courses/programming/javascript-essentials-1

13. JavaScript Projects
This course will guide you through three apps that will help you develop similar ones in the future.

👉 https://www.mygreatlearning.com/academy/learn-for-free/courses/javascript-projects

14. Learn to program with JavaScript
Build a strong foundation in web development by learning JavaScript, one of the major programming languages on the web.

👉 https://openclassrooms.com/en/courses/5664271-learn-programming-with-javascript

15. JavaScript Essential Training
Through practical examples and mini-projects, you will boost your understanding of JS piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting.

👉 https://www.linkedin.com/learning/javascript-essential-training-3/welcome

16. JavaScript Skills Certification Test (Basic)
The test covers topics like Functions, Currying, Hoisting, Scope, Inheritance, Events, and Error Handling.

👉 https://www.hackerrank.com/skills-verification/javascript_basic

17. JavaScript Skills Certification Test (Intermediate)
The test covers topics like Design Patterns, Memory management, concurrency models, and event loops.

👉 https://www.hackerrank.com/skills-verification/javascript_intermediate

⚛️ React JS

18. React JS for Beginners
This course is taught hands-on by experts. Learn prerequisites of HTML, CSS, and Javascript. Also, learn to create a React App.

👉 https://www.mygreatlearning.com/academy/learn-for-free/courses/react-js-tutorial

19. React JavaScript - Fundamentals to Coding
You will learn to set up your first React environment, components, keys, and props. It also discusses folder structure, CSS styling, and React operators.

👉 https://alison.com/course/react-javascript-fundamentals-to-coding-and-new-beginnings

20. Front-End Development Libraries
You'll learn how to add logic to your CSS styles, extend them with Sass, and work with Bootstrap.

Later, you'll build a shopping cart and other applications to learn how to create powerful SPAs with React and Redux.

👉 https://www.freecodecamp.org/learn/front-end-development-libraries/

21. React Essential Training
You will learn how to set up Chrome tools for React; create new components; work with the built-in Hooks in React; use the Create React App to run tests and more.

👉 https://www.linkedin.com/learning/react-js-essential-training-14836121

22. React Skills Certification Test
The test covers topics like Basic Routing, Rendering Elements, State Management (Internal Component State), Handling Events, ES6 and JavaScript, and Form Validation.

👉 https://www.hackerrank.com/skills-verification/react_basic

Source: https://dev.to/madza/26-frontend-certifications-for-web-developers-4md7

Follow us:
YouTube: youtube.com/@developer_nijat
Telegram: t.me/js_az
TikTok: tiktok.com/@developer.nijat
Facebook: facebook.com/groups/1298499510834490


#js #javascript #React #react #ReactJS #reactjs #web #webdev #developer #programming #webdeveloper #webdevelopment #learnprogramming #developernijat #aliyevsdevtales