React logo

1. Keep the project structure and files organized.

A basic principle that you should apply to any project no matter the language is to keep the project folders organized. This makes more sense for bigger project where a team is working together.

First, the components must be grouped by some criteria like their functionality, section of the project they are used in, the relation between those components, among others.

Second, put some thoughts naming each component. It should clearly describe the function or goals of this component. Since most projects are a result of a team collaboration, using some common sense in the naming goes a long way. Undoubtedly, this is a benefit for the whole team, especially when on-boarding new developers.

2. Design atomic components

When creating a new component bear in mind the scope and goal of it. Develop generics and reusable components and don’t develop a big one that includes a lot of goals. Try to divide it by goals in smaller ones.

3. Pay attention to the type and name of variables

Let’s start with “what is a variable”? Variables are “containers” used to save data or values. We can call them whatever we want, except for reserved words. Javascript uses three type of variables: var, let, and const. For now we’ll focus on the first two

-VAR: The var statement declares a function-scoped or globally scoped variable, optionally initializing it to a value. It’s important to point out that the hoisting will affect the variable declaration, but not its value’s initialization. The value will be indeed assigned when the assignment statement is reached.

-LET: The let statement declares a block-scoped local variable, optionally initializing it to a value.

Lets see them in action:

var a = 5;
var b = 10;
if (a === 5) {
	let a = 4; (the scope is inside the “if” block)
	var b = 1; (the scope is global)
	console.log(a); (returns 4)
	console.log(a); (returns 4)
}
console.log(a); (returns 5)
console.log(b); (returns 1)

Before declaring a new variable, you need to think about its scope, what it will be used for, so you can decide the type of variable you need. Then, select a name that properly describes the data the variable contains.