React — you need to know

What is react?

React is a JavaScript library for building user interface or UI components. It’s created for fast and interactive user interface for web & mobile application.

Why react?

React is popular front-end JavaScript library. It is a easy to learn and beginner friendly front-end library. You can building a fast and interactive web and mobile applications with more functionality. It is components base library, that’s why you can create re-useable components. There are a lot of reason, you should learn react and create attractive user interface.

How React works?

React works with virtual dom. virtual dom is a real dom clone JavaScript object. when we change any data, react put the change in virtual dom and compares virtual dom with real dom. virtual dom changes only the change data in real dom instead of updating all of the objects. manipulating the real dom slower than virtual dom. that’s why react use virtual dom to increase the performance.

Some of react things — all you need to know

  1. Don’t confused react with framework:

React is a library not a framework. I say framework is a complete package, where library isn’t. more easily, this is the framework where some decision, method already made for you. but in react you should take all decision by yourself. react main focuses is building user interface. It’s doesn’t help for server commutation, route and so more. but a framework provide you all in on package.

2. JSX (JavaScript XML):

We write html in react, but it’s not html markup that’s we using for browser. It’s is react syntactic sugar, called JSX. JSX allow any valid javascript code, where we need to write. but html mark don’t allow to use javascript in html tag.

3. Declarative:

In react, we use declarative style for components. because of it’s look like more predictable, readable and easy to debug.

example:

4. Components:

React is a components-based front-end library. It’s make react more beautiful. you can re-use any components where and how you need. you can easily create complex UIs using components. Using components in JavaScript you can easily pass the rich data instead of JavaScript template.

5. One way data flow:

In React, data goes one way. It’s goes from parent to child using props. props is html attribute, html is jsx. you don’t able flow data from children to parent element.

6. State:

Every time we used static data in UI, isn’t correct for modern web application. we need to create some stateful components, where state will change over time or user interaction.

see example with react hooks:

At first, we declare a state with default value 0. when user click the button state data will change with new data. parent will tell all child components for this state is changed you all should do updating with new data. react will re-render with new data by calling render() method.

7. Conditional Rendering:

Sometimes we need to render something when condition is matched, they not render when condition isn’t matching. There are so many way do this in react. we use ternary operator for seeing an example.

Summary:

There are so many things we didn’t mention there, they are help you build fast and interactive user interfaces. If you want to learn or need to know more about react, just read their documentation.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store