10 Things you should know about REACT

1. It’s a Library, not a Framework

React is just a library it’s not a framework, because the framework is a premade solution, where some decision already made for you and you will just use them as likes Angular. But on React you can make all decisions by yourself.

React is a very light library and you can use it with other libraries. If you don’t want to make every decision by yourself then you can use lots of boilerplate to make your work easier.

2. JSX in React

You may already be seen JSX used in React. But you can write React by using plain JS too.

const rootElement =
React.createElement(‘div’, {},
React.createElement(‘h2’, {style: {color: ‘green’}},
‘Hello World’),
React.createElement(‘p’, {},
‘How are you guys’)
)

JSX used to React only for syntactic sugar React.createElement(component, props, …children) for the function.

<Button color="green" shadowSize={4}>
  Click
</Button>

3. Javascript

In React you also have to use javascript

<div onChange={this.handleChange}>
<ul>
{somearray.map(data => <li value={data.value}>
{data.text}
</li>)}
</ul>
</div>

In the above example, the somearray an array is mapped using map function to a list of <li> elements.

Lots of frameworks use templating languages for operations. Every framework comes with its own. So every time you want to use a framework you need to learn a new templating language

4. Separate the concerns

We can keep Html, Js, CSS together in the React component. But it’s better to keep Html, Js, CSS separately, Because if we keep all files in separate files we can easily replace the HTML and keep the JS untouched.

Most changes to the HTML structure require refactoring of JS logic. If we change the text input to checkbox we need to rewrite our logic. No going away from that.

5. State

In React it’s needed to create a stateful component where the state is changing over time.

Let’s consider an <input> where you can type in a text that will be displayed below.

const InputBox = React.createClass({
getInitialState () {
return {
text: ''
}
},

In the beginning, we set the default state of the component. In this case, we want to have an empty text value. To do that we use a component method getInitialState() that has to return the state object for the component.

6. Hooks

Hooks is a new addition in React 16.8 version. By using hooks we can use state and can get lots of features without writing class. Using hooks made react so much easier. Some most using hooks are :

1. useState()
2. useEffect()
3. useRef()
4. useContext() etc.

You also can build your own hook.

7.Conditional Rendering

In React you can conditional rendering your component. Conditional rendering means showing any component with some condition a simple example given bellow

<div>
{userLogin ?(<Button>LogOut</Button> : <Button>LogIn</Button>)}
</div>

In that example, we can see if the user is logged in then the Logout Button will be shown but if the user is not logged in then the logged-in Button will be shown for log in

8. How Rendering Works

When something changes on React then React calls the render() method to update the component's representation and compare with the browser what is new changes. If there have any changes React does the smallest change for the updated one rather than change the whole thing

9. Data pass

In React we have pass data from one component to another component. We can transfer data in so many ways. We can pass data from the parents' component to the child component by using props. We can do props drilling. Props drilling means sending data from grandparents to a grandchild by using the parent component

We can use Contextapi to pass data between two or many siblings. We can use state and even external libraries for data pass.

10. The Best way to work with react

If you know how to think for building a React app then it will become more easier for you. There are some way how you should think :

1. Break the UI into a component hierarchy
2. Build static version in React
3. Identify the minimal representation Of UI state
4. Identify where your state should live
5. Add inverse data flow