Coding in React made lot easier with these tools

Hey you!

Are you tired from writing all your code from scratch?

If so, this right here would move you out of that state.

Want to know how?

Let’s find out!

By the way guys, i am Agbejule Kehinde Favour.

Without further ado, let’s hit the road!!

Tools that makes coding in React easier

1. Prettier code formatter

Prettier is an extension in visual studio code that helps to format your code and saves it so your code can be rendered on the browser (Local host)

2. Es7 React/Redux/GraphQL/React-Native-snippets

This extension reduces the time you spend on writing code syntaxes.

For example;

If you want to write a functional based component in react you just have to create a file in your app and name it according to the name you want to give your component.

In that file, type rfce and hit the enter key.

This would give you the component syntax with the name of the component as the name of the file.

Functional based component

If it is a class-based component, you would do the same thing above but the only difference is that you would type rcc and hit the enter key.

It would give you the same result but it would be a different syntax from the functional based component.

class based component

3. Emmet code editor

This extension helps you to write html tags including nested tags with attributes in a short period of time using short code syntaxes or descriptions.

Like this would here;

div>ul>li

will produce;

<div>
    <ul>
        <li></li>
    </ul>
</div>

Also, this right here;

div#header+div.page+div#footer.class1.class2.class3

will give you;

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Amazing right?

Emmet Documentation

4. Quooka.js

This extension is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and makes it easier and faster to read and essentially debug your code.You can also use it while coding with React.

Quokka will even show you errors as to why your function cannot return.

5.React dev 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. It helps you to debug your React code easily

React Developer Tools

6. Redux dev tools

it helps you to debug your redux code easily.

Redux DevTools

Redux dev tool

BONUS TIP:

The download statistics of these extensions is pretty much high.

So you want your coding life to be made a lot more easier right?

if you want to download any of the extensions 1– 4 with Vscode,

#Go to the extension icon on the side menu bar

From the image above ;

• The red arrow shows the extension icon
• The white arrow shows the search bar where you type in the extension request
• The green circle shows the install button that would be clicked to install the extension.

You are excited to code with lots of stress lifted off you right ?

Great!!

With that done, thank you guys for your time!

You can drop in your thoughts in the comment section and don’t forget to hit that clap button if this was helpful to you.

Until next time guys!!

Agbejule Kehinde Favour.

Peace y’all!