DEV Community: mahmoud

Top 10 React Chrome Extensions

mahmoud — Mon, 05 Dec 2022 06:37:09 +0000

There is a lot people use chrome as their primary browser. We’ve put together the top 10 Google Chrome extensions in this article to help you be more productive. Let’s dive into it without further due.

1- React Developer Tool

The Components tab displays the root React components rendered on the page and any subcomponents that they eventually rendered. You may inspect and modify a component’s current props and state in the panel on the right by selecting one of the tree’s elements.

Download Link

2- Redux DevTools

Redux DevTools for debugging state changes in applications. The addon gives your Redux development process power-ups. It may be used with any other architectures that manage the state. This is also an open-source project.

Download Link

3- React Context DevTool

This is similar to the Redux DevTools. The differences are It is a hook used for sharing data. If you handle small data, Context DevTool should be your first choice. React Context DevTool is used by users to track and debug state changes in React Context using the Reducer API. It is also an open-source project.

Download Link

4- HTML to React

You can easily convert HTML tags to JXS from your browser by using HTML to React. By copy-pasting an HTML code snippet into the text field, you can quickly auto-generate a class or functional component using this React extension. The HTML to React extension also helps convert HTML properties like class to camelCase JSX attributes.

Download Link

5- Website HTML To React

This extension converts HTML to REact with a single click.
Any webpage element can be transformed into a React component with
the help of this extension. It examines the semantics of HTML and CSS stylesheets and turns the chosen DOM element into JSX code.
Download Link

6- JSON Viewer

Though It’s not a direct react extension, almost every react developer uses it,If aesthetics is your concern, the JSON Viewer Chrome extension is one of the most beautiful developer tools. It is an alternative to JSON View that helps manage JSON data into an easily visible hierarchical view in a browser window.

Download Link

7- Reactime

This tool is used for time travel debugging and performance monitoring in React applications by retaining the state of components every time they render. It has many features like recording snapshots of application state, time-travel debugging, snapshot series comparison, tutorial walkthrough, and many more. It also has support for Gatsby and Next.js and beta support for TypeScript.

Download Link

8- ReactVT

React VT is a visual testing tool for react applications. It presents a live view of the React component hierarchy of your applications and current state and props.

Download Link

9- React performance Devtool

React Performance Devtool extension is used for monitoring React component performance. It allows you to check the functionality of React components.

Download Link

10- Jinno: design any website React/HTML/sketch

With Jinno, you can modify any website’s element and see how it may appear simultaneously before developing it. It’s a design system-focused extension. The website’s attributes, such as the font color, can be changed immediately, much like with Figma or Sketch.
Download Link

Follow Me On LinkedIn To Learn more

Follow Me On GitHub to explore more projects

Best Roadmap become 𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘀𝘁 for 𝗙𝗥𝗘𝗘

mahmoud — Sun, 27 Nov 2022 14:50:47 +0000

𝟭 - 𝗘𝘅𝗰𝗲𝗹:

Start with Excel, Analyzing Data in Excel empowers you to understand data through detailed visual summaries, trends, and patterns.
𝗘𝘅𝗰𝗲𝗹 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲: https://lnkd.in/dp4jp-ke

𝟮 - 𝗣𝗿𝗼𝗴𝗿𝗮𝗺𝗺𝗶𝗻𝗴 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲:

Choose 'Python' or ' R ', any one language for your journey, Python may be the ideal choice if you want to transition to machine learning.
𝗣𝘆𝘁𝗵𝗼𝗻 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲: https://lnkd.in/diuCU_4H
𝗥 𝗳𝗼𝗿 𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘀𝗶𝘀: If you're passionate about the statistical computation and data visualization aspects of data analysis, R could be a good fit for you.
'𝗥' 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲: https://lnkd.in/dx6DEk35

𝟯 - 𝗗𝗮𝘁𝗮𝗯𝗮𝘀𝗲𝘀:

Learn both SQL & No SQL databases
MySQL Resources: https://lnkd.in/dPZuDM57
Mongo DB: https://lnkd.in/dQ325DHB

𝟰- 𝗦𝘁𝗮𝘁𝗶𝘀𝘁𝗶𝗰𝘀 & 𝗣𝗿𝗼𝗯𝗮𝗯𝗶𝗹𝗶𝘁𝘆:

Master the concepts of Descriptive Statistics and Inferential Statistics
𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲: https://lnkd.in/dtr7YSzz

𝟱 - 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗗𝗮𝘁𝗮 𝗩𝗶𝘀𝘂𝗮𝗹𝗶𝘀𝗮𝘁𝗶𝗼𝗻 𝗧𝗼𝗼𝗹𝘀:

Learn Tableau or Power BI:
[Power BI] Resource: https://lnkd.in/d2xnsGMr
[Tableau] Resource: https://lnkd.in/dAds5Jfa

DEV Community: mahmoud

Top 10 React Chrome Extensions

There is a lot people use chrome as their primary browser. We’ve put together the top 10 Google Chrome extensions in this article to help you be more productive. Let’s dive into it without further due.

top 26 Interviewer Questions You Should know

I wrote these questions according to my interviews experiences

Best Roadmap become 𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘀𝘁 for 𝗙𝗥𝗘𝗘

top 10 tips for problem-solving