10 things you should know about React

As a developer, you should know this fact about React.

1. Not a Framework

Sometimes we tell that React is a Framework. It was absolutely wrong. React is a JavaScript Library. Using React you can build your User Interface with Component. React will not help you with server communication, routing, translations and so on. React is so thin and easily worked with any 3rd party libraries.

2. JSX

JSX is basically providing syntactic sugar for the React.createElement(component, props, …children) function. JSX stands for JavaScript XML. JSX allows us to write function in a HTML tag like syntax. When we used HTML tags like <div></div> then JSX convert it to React.createElement(‘div’).

3. Component must be Capitalized

We already know about JSX. In JSX, the Component name should be Capital. If we wrote the component name in a small letter then it will consider as an HTML tag like <div>,<span> and so on. So, It is highly recommended to write the Component name in Capital. If you wrote the component name in the lowercase letter then should assign it into a Capitalize variable before using it in JSX.

4. It’s declarative

In react you can write declarative style in your Component.

<select value={value} onChange={handleChange}>
  {somearray.map(element => <option value={element.value}>
                              {element.text}
                            </option>)}
</select>

In this example, use the map method to declare style <select> element. Here, you are not using a loop for creating <option> manually.

5. Props

A react element received a list of attributes when it rendered. This attribute is called Props. A function component received this list as a key with an object. Receiving props is optional. Component returns a value when it was rendered, it can not be undefined. The return value is ignored when it was rendered.

6. Data goes down

In React, If we pass data from parent to child component, we need props. From the view of JSX props are like HTML attributes. When data passes from parent to child component, it goes down through the tree of the components.

7. State

In react, the Stateful component is very normal. It means data can change over time. We can make a stateful component with useState() hooks in react. You cannot change state directly, you change state with the corresponding setState() method. At first, you initialize a state using the useState() hook then change this state with the setState() method as needed.

8. How Rendering Works

Every change is notified to React. Then React call render() method to update the component's representation in Virtual DOM and compares it with the already rendered elements in the browser. If there is any change occurred then react rendered the change part and update the DOM.

9. Conditional Rendering

You can render an element with conditional logic. It’s needed sometimes to render one part of the markup and the other part is not rendered. In React, you can use if-else conditional block but the best practice is ternary operation.

import React, { useState } from 'react';
function Example() {
   const [count, setCount] = useState(0);
   
   return (
      <div>
          <p>You clicked {count} is {count%2 === 0 ? <span>even</span> : <span>odd</span>} times</p>
          <button onClick={() => setCount(count + 1)}>        
              Click me
          </button>
      </div>
   );
}

10. You don’t need redux

To begin, you maybe think, you need redux with react to learn. Redux is great but it’s a misconception that if you learn to react, you need redux. React is a thin and interesting thing. When you start learning, you will know that.

That’s all for today. Hope you enjoy this.