React- getting down to the basics.

What are the features of React?

• JSX : Javascript Syntax Extention, it basically allows us to write HTML code with logic, in the same file.
• Components: repetitive components can be converted into a single template of a component, and can be used multiple times, similar to that of calling a function, Instead of re-writing the code multiple times.
• Virtual DOM: earlier any change to even a single component, would result in the entire dom being rewritten, this can be quite expensive. React came up with a concept called virtual dom!.. you can think of it as a template of the real dom. any changes done on the virtual dom will only be reflected on the real dom. This results in a faster web application.
• One-way data-binding: data flows only in one direction, hence fewer chances of app breakage.

web browsers cannot read jsx directly, we need a transpiler, ex. Babel that covers the JSX to browser-compatible javascript.

Synthetic events combine the response of different browser's native events into one call(), ensuring that the events are consistent across different browsers. eg. e.preventDefault();

Why is there a need for using keys in Lists?

• A key is a unique identifier and it is used to identify which items have changed, been updated, or deleted from the lists.
• It also helps to determine which components need to be re-rendered instead of re-rendering all the components every time. Therefore, it increases performance, as only the updated components are re-rendered.

A state is a built-in React object that is used to contain data or information about the component. The state in a component can change over time, and whenever it changes, the component re-renders.

What is the Flux?

• It is a method of handling complex data inside a client-side application and manages how data flows in a React application.
• When a client makes a change on the View, the view emits a change event. This change event is send as an Action to the Dispatcher, based on the Action that was send to the Dispatcher, the values in the Store is changed. Once values in the store is changed, its respective listeners change its values in the components (View)