DEV Community: Rajesh Prajapati

Communicate with Redux & Redux-Saga 🪄

Rajesh Prajapati — Mon, 15 Feb 2021 02:38:39 +0000

Greetings Reader,🙏

This blog will discover the process of communication with redux store in React

Every developer maintain code in a different approach

My approach: Folder structure 📂 for this tree folders are common like - models, services, pages

1. Models

const customerModel = {
  namespace: 'customer',
};

export default customerModel;

Providing namespace will be unique all over the store and easy to remember and call its effects & reducers.

let's create a state of the customer model -

const customerModel = {
  namespace: 'customer',
  state:{
    customerList: [],
    singleCustomer: {},
  }
};

in the above state, the object will handle the response from Rest API also updates from customer components if any change happens.

let's understand how to connect with Rest API and push the response in the customerList array. for this will create a effects object which will contain the generator functions. read more about generator

redux-saga provides some helper effects wrapping internal functions to spawn tasks when some specific actions are dispatched to the Store.

effects -

  effects: {
    // * indicate its generator fun
    *setState({ payload }, { put }) {
      if (payload) {
        yield put({
          type: 'save',
          payload,
        });
      }
    },

setState is very common fun for calling multiple occurrences like user action, updating a value in the state, etc. we got two params -

{ payload } - whatever value you would like to update in the state.
{ put } - is a special helper function of redux-saga. It takes two params - 1. type name of reducer (save), 2. payload which needs to update in-store, payload we will understand in the component section. read more about helper
- yield - will return the call of put which is connecting to the reducers save. The save function we will declare in the below code in the section of the reducer object.

reducers -

 reducers: {
    save(state, { payload }) {
      return {
        ...state,
        ...payload
      };
    },
  },

in the reducers function, you can put the logic to maintain the state of the application but currently, we are just taking the previous state of it and merging with the new state if any changes.

But in the top, we were about to get the response of customer list in put inside the customerList array

example: - Let's create a generator function & define logic as in setState fun.

*getCustomers({ payload }, { call, put }) {
      try {
        // api call -
        const response = yield call(customerListAPI, payload); 
        if (response.success) {
         // customerList key specified to store only in that array value. 
          yield put({
            type: 'save',
            payload: {
               customerList: response.data,
            }, 
          });
        }
      } catch (error) {
        console.error('error in customer list api', error);
      }
},

Explain - we wrapped the API call because we calling the promise function with the help of the call effect.

call -required two params - i) callback function, ii) payload - if we need any required data to be passed to the callback function, in simple word API requirement likes customer id, etc.
yield has control over the sequence in getting a response from API call.
try-catch helps the control of the function of we get any error in resolving the promise the catch will prompt us in the console.

2. Services

The services folder will contain the related API functions & common required key values.


import { Access, Secret, ApiURL } from '@/utils/env';
import request from 'umi-request'; 
// axios also can be used here if you are comfirtable with `umi-request`

const headers = {
  'Content-Type': 'application/json',
  'access': Access,
  'secret': Secret,
};

export async function customerListAPI(params) {
  return request(`${ApiURL}/v1/getcustomerlist`, {
    headers,
    method: 'GET',
  });
}

// other async functions ....
export async function customerByID(params) {
 ....
 ....
 ...
}

3. Page or components

Now the finally we have to call the model to get the data from API.
What is UMI and understand how to connect works check out my article


import { connect } from 'umi';

const CustomerList = (props) => {
  const { dispatch, customer } = props;
  const { customerList } = customer;
  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'customer/getCustomers',
        payload: {
          size: 10,
          page: 1,
        },
      });
    }
  }, []);

  return (
    <CommonTable
      source={ customerList }
    >
    ....
    </CommonTable>
  );
};
// to connec with redux store
export default connect(({ customer }) => ({
  customer,
}))(CustomerList);

Congratulation you made it. 🏆

I hope you enjoyed, learned, and remember...🙌

If you liked it please leave some 💙 & 👍 to show your support. Also, leave your responses below and reach out to me if you face any issues.

You can find me on Twitter rkumar1904 & follow my developer journey ✌️

ThankYou.

My favorite tools to learn web development 2021 🔥

Rajesh Prajapati — Sat, 13 Feb 2021 00:52:24 +0000

Hello Everyone 👋,

I'm going to list all the tools which I've used to learn & earn money so far. some of the tools you may know but a few you might need to know.

Most of us think (including me) in their mind for web development we just need an editor and web browser, but that's the problem with thinking.

Let's correct our thinking and find out the best tool you need for your web development faster and smoother so that you can enjoy it more. check all the listed tools one by one.

If you're happy with your current tools and arsenal then you're most welcome to leave the article because this is going to be a lengthy article for tools and tips, I don't want to waste your time. - thank you for your time.🙏

If you are here mean you want to continue.. let's get rolling the tools. 👇🏻

Vs Code

Yes, Vs Code is one of the Top tools on my list which will help you to write code and amazing plugins and themes which leads to our work as the focus we can.

Listed extension are self explainery, just install & start using them.👍

ES7 React/Redux/GraphQL/React-Native snippets - This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code

Link: - ES7 React/Redux/GraphQL/React-Native snippets

ESLint - Well run projects have clear consistent coding conventions, with automated enforcement (NodeJs). I called this is a lifesaver. 🤟

Link: - EsLint

Visual Studio IntelliCode -AI-assisted development

Link: - Visual Studio IntelliCode

Prettier - Code formatter - it can help you format the code with all the listed languages - JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTML · Vue · Angular GraphQL · Markdown · YAML

Link: - Prettier - Code Formatter

If you got any great extensions then do comments down below, so that others might get help from it.

Postman

Yes, Postman is a fantastic tool not just for API call, it can do a lot more things which you might not know.

Postman provides you default features not only just request, response.

Requests - Create, send and save REST, SOAP, or GraphQL requests.
Responses - View status code, response size, and response time.
Variables - Built-in support for variables, also you can share with your team.
Scripts and the Postman Sandbox - With a script you also write a test case, Insert preset test and pre-request scripts in Sandbox.
Collaboration - * It provides you unlimited personal or team workspaces, you can share collections, environments, and APIs to workspaces.*
Collections - Its most common and useful features and to be connected with the team for API request, Organize and keep track of related requests, it will also help you to save a response for future reference so that the next person need not call the API if he/she just want to see the response.
Monitoring - * it's just a scheduler for API or collection which you have set up and assigned if there are any scripts or tests to run along with its duration. It will help you to monitor if API failed or pass the request and response, keep in mind it will support only public network, not VPC.*
Mock Server - Simulate API endpoints with mock server and also Create and save examples for the mock server to return.
Documentation - Write markdown descriptions at request, folder, or collection level, it will help you when sharing the document in **private* or publish on the public network, you can also save the response, env to manage better documentation for the viewer.*

In the above points, we talk about the API but how to create one? 🤔

API - Express - yes we are talking about express.js, but you can also create API with others as well. checkout the video and blog.

Best Online IDE and Code Editors to Develop Web Applications

** JSFiddle ** - While JSFiddle can’t replace a full-fledged text editor, it does a damn good job of handling one-off frontend scripts.

** CodeSandbox ** - CodeSandbox can be thought of as a much more powerful and complete take on JSFiddle. True to its name, CodeSandbox provides a complete code editor experience and a sandboxed environment for front-end development.

** StackBlitz ** - If you’re into front-end mostly and cannot move away from the VSCode interface, StackBlitz was created just for you.

** CodePen ** - CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, called "pens," and test them.

Below pen is created by [Shadow Scientist] checkout his profile for amazing pens and works.

Editor and designer tool (Collaboration between Designers and Engineers)

** Figma ** - Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes on mobile devices.
1. Fast
2. Easy to use
3. Extensions
4. Large Community
5. Free / Paid features.

Download 🗳

** Zeplin ** - Zeplin focuses purely on improving the collaboration between designers and engineers, providing them the most accurate resources out there.

Easy to use
Extensions
Free / Paid features.

The better way to share, organize, and collaborate on designs—built with developers in mind.

Download for Mac 🗳
Download for Windows 🗳

Or check out the web version

Other Tools for [React developers]

** React Developer Tools ** - React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

You will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".

Downloads - 2,000,000+ users

Rating: ⭐️⭐️⭐️⭐️

** Redux DevTools ** - Redux DevTools for debugging application's state changes. The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.

Downloads - 1,000,000+ users

Rating: ⭐️⭐️⭐️⭐️⭐️

Miscellaneous - just for now.
- ** Notion ** - One tool for your whole team. Write, plan, and get organized.

Notion is my personal favorite tool for everything which includes a bookmark, reading list, to-do list, research, blog post, article arrangement, task, work, and life balance, and many more.

** ClickUp ** - All your work in one place: Tasks, docs, chat, goals, & more.

ClickUp is one of the most inspirational and growing tools for today, currently using it for my office environment and people Love ❤️ it. its got so many amazingly delicious task management system, which supports like OKR, Kanban, many more you can think of it. It's just not a task management system, it's bigger than that.

Wrapping Up

Hope you enjoyed this article. Go add some nice reactions and cool comments below. Why I'm requesting it because it took me 8+ hours ⏰ to write this article. You only need a few moments to like and comments, it will encourage me to write more good articles in the future. Share it with your friends let them know about this article.

Thank you for your time.✌️

Finally ✍️

If you have time then do check out my other article & many of them are related to Ant. Design.

I'm also available on Twitter https://twitter.com/rkumar1904 & do follow for Tips and Tricks and developer journey with me.

Happy Coding 👌

Top Best Data Visualization Tools by Ant.Design in 2021 🔥

Rajesh Prajapati — Fri, 12 Feb 2021 06:19:05 +0000

Greeting you as X-axis Y-axis, 👋

There are many things to consider when choosing the right data visualization or charts tool for our web page. We will be going through the best data visualization tools for our needs.

Now the question is,

Question - "What Are Data Visualization Tools?" 🛠 🧰

Ans - Data visualization tools provide data visualization designers with an easier way to create visual representations of large data sets.

The answer is not perfectly clear and understanding unless we see what it means.

We all know it's pointing to the direction of a chart or graph which may be d3.js or chart.js similar kinda lib. Yes, you’re absolutely correct here but I want to point out the important part of it.

Do you know when someone buys a theme for the admin panel what should be most Circean in terms of UI? 60% Ans would be Charts and Graphs.

Let's roll over the Visualization lib or tool... 👇🏻

AntV - Liven Data Lively

A new generation of data visualization solutions from Ant Group.

Don't worry about the "Liven Data Lively" it's the slogan.

Here is what AntV provide the full list of the things which treasure for us.

G2 -Data-driven visual language with a high level of usability and scalability.

F2 - F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based and is also compatible with Node.js, F2 provides all the chart types you'll need. Our mobile design guidelines enable a better user experience in mobile visualization projects.

G6 - is a graph visualization engine with simplicity and convenience. Based on the ability to customize, it provides a set of elegant graph visualization solutions and helps developers to build up applications for graph visualization, graph analysis, and graph editor.

X6 Diagram Editing Engine - X6 is AntV's diagram editing engine, which provides a series of easy-to-use interactive components and node customization capabilities to facilitate the rapid construction of DAG diagrams, ER diagrams, flowcharts, and other applications.

L7 Geospatial Visualization - Large-scale WebGL-powered Geospatial data visualization analysis framework

AVA - AVA is a framework for more convenient Visual Analytics. The first A of AVA has many meanings. It states that the goal of this framework is to become an Automated, AI-driven solution that supports Augmented analytics.

All the above have there owned capabilities and concepts but if you're looking for specific in React version of it, then I will recommend you to go for Ant Charts

Let's see in action -

** Ant Design Chart ** - Simple and easy to use React chart library

installation

$ npm install @ant-design/charts

import React from 'react';
import { Line } from '@ant-design/charts';

const Page: React.FC = () => {
  const data = [
    { year: '1991', value1: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];

  const config = {
    data,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
    label: {
      style: {
        fill: '#aaa',
      },
    },
  };
  return <Line {...config} />;
};
export default Page;

And here is the final output is 👇🏻

Wrapping Up

Hope you enjoyed this article. Go add some nice reactions and cool comments below. You only need a few moments to like and comments, it will encourage me to write more good articles in the future. Share it with your friends let them know about this article.

Thank you for your time.✌️

Finally ✍️

If you have time then do check out my other article & many of them are related to Ant. Design.

I'm also available on Twitter & do follow for Tips and Tricks and developer journey with me.

Thank you for your valuable time. ⏰ Your support 👍 💛 will make my day🙏

Complete Skillset You Must Know as React developer ✡️

Rajesh Prajapati — Thu, 11 Feb 2021 02:42:31 +0000

Greetings 🖖 my amazing friend,

Today I'm writing the article to React just for one reason - I love 💛 Reactjs. I've no intentions to force you to learn to react or get into React. if you're currently getting started or already working on it then it's definitely for you, And please don't miss any points because every single skill or tip will help you to get better at ReactJS.

Few prerequisites

HTML5 and CSS3 - As frontend developers, we all mostly start from HTML and CSS and that's the good start of a career. We do create a cool and attractive design with help of HTML and CSS, JS provides functionally for every piece of design. If you've got a good understanding of how to link pages with CSS, HEAD, BODY section, and semantics element of HTML.
- Semantic Elements in HTML -Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning to both the browser and the developer.👇🏻

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements:<form>,<table>, and <article> - Clearly defines its content.

JavaScript (JS) - If you have a basic understanding of JavaScript then it's enough to react. like - Validation of form, how click events work? storing data in variables, cookies, and so on. If you ever understood the programming concept of OOP then it will be a BONUS for you.

I'm repeating again, you don't need to be an expert in Javascript to learn React.

Let's start the Reaction in React 🙀

Now we already know what React is built for what we are trying to achieve with it.

Point #1 - Basic understanding of ES6 features. The below points are the most common and required for writing react code and working as lib suggests.

let
const
Arrow functions
imports and exports
classes

And Basic understanding of how to use ** NPM **

The importance of the above points you will be asked the question about it in interviews.

Just not only let and const, but you will also be asked some questions related to ES6, JSX, Babel, Package manager, basic javascript or some other fundamental concepts.

Point #2 - JSX & Babel - In React we will work with JSX that looks like HTML and you can consider it like HTML-with JavaScript. It is the easiest way to add HTML code inside javascript or you can say it is the extension of the Javascript language syntax.

basic - const title = <h1> Welcome to React ✡️ </h1>

meaning -

JSX = JavaScript + HTML

Point #3 - Arrays - Array Functions like .map() and .filter() - as React is essentially a view library, you’ll often be rendering items, or a list of records, to be displayed in your User interface.

Information like this is usually stored in an array in a component’s state and passed around from parent to child, where you iterate over the list of items and do something with it. Most often, you use .map() or .filter() in cases like these.

Point #4 - this - Binding and the this keyword - If you go for the ES6 class syntax, you’ll usually bind your utility functions (like handleClick/handleSubmit) to the class instance, using a **constructor**. Along with that, you’ll often refer to these functions using the this keyword. Prior knowledge of this and binding would help here.

Point #5 - Styling - Learning that JSX utilizes className instead of class for assigning class attributes and the nuances involved with how to assign styles inline become an important aspect of React as you begin to style basic pages.

Point #6 - State - React components has a built-in state object.

The state is data that we want to show to users or items in memory that we can access in order to allow our users to interact with our data. We hold all of the data that we present on an object called state and access these bits of data via properties on this state object.

Point #7 - Event Handlers - The native event object that you get with normal DOM manipulation in React is actually wrapped up in what’s called the SyntheticEvent. Make sure you can attach different types of events to HTML elements such as onclicks, onchange, mouseenter, etc.

But mostly you've to take care of such events in onChange for the input box.

Point #8 - ** Lifecycle** - After understanding how we can create modular components and pass the data, next comes learning how to utilize the lifecycle to properly handle obtaining data, choosing when to trigger a re-render, and responding to other lifecycle-related nuances as appropriate. This is critical to making more involved applications.

Few key points to understand - React provides developers with many methods or “hooks” that are called during the life-cycle of a component, which allows us to update the UI and application state.
constructor - This is a special function that will get called whenever a new object is created. It’s very important to call a special function super in cases where our class extends any other class that also has a defined constructor. Calling this special function will call the constructor of our parent class and allow it to initialize itself. This is why we have access to this.props only after we’ve initially called super.

Events	Do ✅	Don't ❌
constructor	set initial state	cause any side effects (API calls etc.)
componentWillMount	update state via this.setState	cause any side effects (API calls etc.) on client-side
componentWillReceiveProps	sync state to props	cause any side effects (API calls etc.)
shouldComponentUpdate	use for increasing performance of poor performing Components	call this.setState
componentWillUpdate	synchronize state to props	cause any side effects (API calls etc.)
componentDidUpdate	cause side effects (API calls etc.)	call this.setState as it will result in a re-render
componentDidCatch	A new addition in React 16	-
componentDidMount	cause side effects (API calls etc.)	call this.setState as it will result in a re-render
componentWillUnmount	remove any timers or listeners created in lifespan of the component	call this.setState, start new listeners or timers

For deep div understanding in react life cycle checkout the official doc or check the blog of Bartosz Szczeciński

Point #9 - ESLint - ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. And It's awesome 👍

Awesome because not only does ESLint identify ways to make code better, but if you don’t need or don’t agree with certain rules, they can be changed or ignored (either for the line, for the whole file, or for the whole project).

None of the rules depend on each other, they all function independently, and some rules can even fix the code themselves to fall in line with the prescribed rules.

** Airbnb ESLint ** -The ESLint rules that Airbnb abides by are considered among many as the gold standard for React. They are strict, they are unforgiving and they are thorough.

airbnb / javascript

JavaScript Style Guide

Airbnb JavaScript Style Guide() {

A mostly reasonable approach to JavaScript

Note: this guide assumes you are using Babel, and requires that you use babel-preset-airbnb or the equivalent. It also assumes you are installing shims/polyfills in your app, with airbnb-browser-shims or the equivalent.

This guide is available in other languages too. See Translation

Other Style Guides

Types

1.1 Primitives: When you access a primitive type you work…

View on GitHub

Here is my setup for EsLint:-

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["compat"],
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "mocha": true,
    "jest": true,
    "jasmine": true
  },
  "rules": {
    "generator-star-spacing": [0],
    "consistent-return": [0],
    "react/forbid-prop-types": [0],
    "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
    "global-require": [1],
    "import/prefer-default-export": [0],
    "react/jsx-no-bind": [0],
    "react/prop-types": [0],
    "react/prefer-stateless-function": [0],
    "react/jsx-wrap-multilines": ["error", {
      "declaration": "parens-new-line",
      "assignment": "parens-new-line",
      "return": "parens-new-line",
      "arrow": "parens-new-line",
      "condition": "parens-new-line",
      "logical": "parens-new-line",
      "prop": "ignore"
    }],
    "no-else-return": [0],
    "no-restricted-syntax": [0],
    "import/no-extraneous-dependencies": [0],
    "no-use-before-define": [0],
    "jsx-a11y/no-static-element-interactions": [0],
    "jsx-a11y/no-noninteractive-element-interactions": [0],
    "jsx-a11y/click-events-have-key-events": [0],
    "jsx-a11y/anchor-is-valid": [0],
    "no-nested-ternary": [0],
    "arrow-body-style": [0],
    "import/extensions": [0],
    "no-bitwise": [0],
    "no-cond-assign": [0],
    "import/no-unresolved": [0],
    "comma-dangle": ["error", {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "imports": "always-multiline",
      "exports": "always-multiline",
      "functions": "ignore"
    }],
    "object-curly-newline": [0],
    "function-paren-newline": [0],
    "no-restricted-globals": [0],
    "require-yield": [1],
    "compat/compat": "error"
  },
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  },
  "settings": {
    "polyfills": ["fetch", "promises"]
  }
}

Point #10 - Node + npm - Yes node and NPM both are required to fully develop and test the application.

React developers need to have a solid understanding of the npm registry. This is the place where software developers can go to get the software to help them build software.

Sometime we need clear understanding which we should choose ** YARN ** OR ** NPM **.

Yarn is a package manager that is built to utilize the npm registry. The yarn actually optimizes your npm workflows. Yarn and npm somewhat compete today, but the mission of Yarn has been to solve a lot of the problems that are accepted in the Node/npm ecosystem. npm has been doing everything it can to follow the patterns and practices that Yarn presents.

Point #11 - ** Redux** - The state management library of React, Redux is another essential feature or skill that every developer must-have. Earlier developers have had a hard time dealing with the asynchronous nature of React updates.

Here is how I manage the Redux-Saga Application!

What is Redux Saga? Doc

redux-saga / redux-saga

An alternative side effect model for Redux apps

redux-saga

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.

The mental model is that a saga is like a separate thread in your application that's solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well.

It uses an ES6 feature called Generators to make those asynchronous flows easy to read, write and test. (if you're not familiar with them here are some introductory links) By doing so, these asynchronous flows look like your standard synchronous JavaScript code. (kind of like async/…

View on GitHub

How to manage the Redux store? where to write reducer, action, & how to update the state of an application?

The First thing to manage all the main part application with folders like,

models 📁
pages 📁
components 📁
layouts 📁

Example: -

Point #12 - ** Testing** - You can test React components similar to testing other JavaScript code.

There are a few ways to test React components. Broadly, they divide into two categories:

Rendering component trees in a simplified test environment and asserting on their output.
Running a complete app in a realistic browser environment (also known as “end-to-end” tests).

Recommended Tools

** Jest ** -is a JavaScript test runner that lets you access the DOM via jsdom. While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have more control over how the code executes.
facebook / jest

Delightful JavaScript Testing.
🃏 Delightful JavaScript Testing

👩🏻‍💻 Developer Ready: A comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects.

🏃🏽 Instant Feedback: Fast, interactive watch mode only runs test files related to changed files.

📸 Snapshot Testing: Capture snapshots of large objects to simplify testing and to analyze how they change over time.

See more on jestjs.io

Table of Contents
Getting Started

Install Jest using yarn:
yarn add --dev jest
Or npm:
npm install --save-dev jest
Note: Jest documentation uses yarn commands, but npm will also work. You can compare yarn and npm commands in the yarn docs, here.

Let's get started by writing a test…
View on GitHub
** React Testing Library ** - is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn’t provide a way to “shallowly” render a component without its children, a test runner like Jest lets you do this by mocking.

testing-library / react-testing-library

🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

React Testing Library

Simple and complete React DOM testing utilities that encourage good testing practices.

Read The Docs | Edit the docs

The problem

You want to write maintainable tests for your React components. As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your testbase to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.

The solution

The React Testing Library is a very…

View on GitHub

** Cypress ** -E2E Testing tool - Fast, easy, and reliable testing for anything that runs in a browser.

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.

Documentation | Changelog | Roadmap

The web has evolved. Finally, testing has too.

Fast, easy and reliable testing for anything that runs in a browser.

What is Cypress?

Installing

Install Cypress for Mac, Linux, or Windows, then get started.

npm install cypress --save-dev

yarn add cypress --dev

Contributing

- develop branch
- master branch

Please see our Contributing Guideline which explains repo organization, linting, testing, and other steps.

License

This project is licensed under the terms of the MIT license.

Badges

Let the world know your project is using Cypress.io to test with this cool badge

[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)

View on GitHub

Point #13 - ** Git** - Git is essential to every developer's toolkit for storing projects on solutions like GitHub, Bitbucket, and GitLab. Skills that should just be part of your day-to-day include:

Tracking changes with add, commit, push and pull
Branching and merging strategies
Handling merge conflicts

All the above-listed points are which I've focused on so far, some might be not exactly related to you but most of them are common for React concept and functionally related to each other.

Wrapping Up 👋

Thank you for your time.🥂

DEV Community: Rajesh Prajapati

Communicate with Redux & Redux-Saga 🪄

My favorite tools to learn web development 2021 🔥

Vs Code

Postman

Best Online IDE and Code Editors to Develop Web Applications

Editor and designer tool (Collaboration between Designers and Engineers)

Other Tools for [React developers]

Wrapping Up

Finally ✍️

Top Best Data Visualization Tools by Ant.Design in 2021 🔥

Question - "What Are Data Visualization Tools?" 🛠 🧰

AntV - Liven Data Lively

Wrapping Up

Finally ✍️

Complete Skillset You Must Know as React developer ✡️

airbnb / javascript

JavaScript Style Guide

Airbnb JavaScript Style Guide() {

Table of Contents

Types

redux-saga / redux-saga

An alternative side effect model for Redux apps

redux-saga

facebook / jest

Delightful JavaScript Testing.

🃏 Delightful JavaScript Testing

Table of Contents

Getting Started

testing-library / react-testing-library

🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

React Testing Library

Table of Contents

The problem

The solution

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.

The web has evolved. Finally, testing has too.

What is Cypress?

Installing

Contributing

License

Badges

Wrapping Up 👋