5 React Development Tips for Beginner

Hello there, on this article i will tell you some tips about my experiences on developing web-apps with React. As a Beginner.

For me, learning react is not really easy but not really hard too. FYI i came from PHP background with a bit of JavaScript experience (honestly that was some time ago LOL). If you wanna keep learning about programming languages, you should understand the Fundamental first.

But, React is not a programming language, it’s a library on top of JavaScript. It’s the V of your MVC, so if you came from JavaScript background (Vue, Angular, jQuery or anything) you won’t encounter any big hurdle.

So, here’s my tips for anyone who want to learn React:

1. Use IDE with a linter.

Nuclide by Facebook

Why? It’s simple, because if you are a self-trained programmer, you should use an IDE. Even if you are trained by some professional or Chuck Norris himself I still recommends you to install a linter for React. It will save you, big time. It will save you from some typing errors before sinking deeper into StackOverflow.

For IDE selection, React are best developed with Atom + nuclide (because Facebook using it) or maybe if you have subscription of WebStorm? use it!

But, if you want an Adventure (and less bloat), I recommend Visual Studio Code. You can customize it anything you wanted!

Do not use VIM if you’re still a beginner. I repeat! DO NOT. Unless you’re already a skilled programmer.

2. Use a code standard.

JavaScript Standard Style

Use it if you want your colleagues or your partner to help you debugging your codes, it will save them and YOU big time. Good codes, happy linter, happy colleagues, and your employer will be happy too after seeing your beautiful code. Use a specific linter for a code standard for better developing.

Why use a code standard? code standard means neat codes. It made our (my) life better.

On my projects i use standard.js. Why? Mainly, it doesn’t use semicolon (LOL), too many beginners complained about missing a semicolon everyday.

Minimize bad codes on your javascript project

3. Use ES6

source

Use ES6 (ECMAScript 2015) for better support of many features that regular JavaScript doesn’t have and better readability and of course maintainability. It has variable scoping, arrow functions, classes and spread operators.

It’s the new JavaScript standard, there’s many React tutorial out there that uses ES6.

4. Use JSX

Maybe you’re wondering why after I recommended ES6 and now I recommend using JSX, the reason is the simplicity of JSX. In this section, i will give you few example code snippets.

Here is the example of a div on HTML:

<div class=”sidebar”></div>

On React with JavaScript:

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

And React with JSX:

<div className="sidebar"></div>

or with self-closing tags:

<div className="sidebar" />

Simpler Right?

But don’t worry about the extension, JSX doesn’t enforce you to use .jsx, you can use .js normally.

5. Do not learn state management until you really needs it

Some people recommends learning Redux, Mobx, Flux or any other state management library for your React Web-apps. But, if you are only building a simple web-apps like static sites or To Do Apps, better not to learn it.

React have built in state management, better use it first and then learn state management later, until you fully learned React.

Why I do not recommends you to learn it before you fully understand React? Because

Redux (Flux Architecture) is Hard

I repeat

Redux is Hard

6. Learn Unit Testing

Oops, I’m Sorry, it’s not 5 but 6. There’s this last part that very important, but it will covered by next article! Stay Tuned~

Notes: Before you going deeper learning about react, you should look up into this article:

Hey, thanks for feedback! 🙂