React.js primary concepts for beginner.

#react #javascript

1 What is React...?

React is a JavaScript library, not a framework. React is use for building user interface. React use more libraries for any solution.
Frameworks use for great purpose, especially for young developers. Framework already has smart design for you. When you need small piece of code, you have to include the whole thing anyway. UIs are everywhere, from the simple buttons on a microwave to the dashboard of a space shuttle. React is good for developed UI. React have virtual DOM, thats why react is best for modern developer.

2 React JSX

JSX means Javascript and XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. It is faster because it performs optimization while compiling code to JavaScript. It is also type-safe and most of the errors can be caught during compilation. JSX easier and faster to write templates, if you are familiar with HTML.

3 React is all about components

In react everythings are component base. React has two type of component one is class component another is functional component. Component are small piece of reusable, composable, and stateful codes. React components are exactly the same; their input is a set of props and their output is a description of a UI. We can reuse a single component in multiple UIs. Components can contain other components. React component can have a private state. Those state to hold data. This private state is an implicit part of the input that drives the component’s output.

4 React DOM

React DOM means Document Object Model. In react has a virtual DOM. A virtual DOM object is a representation of a DOM object, like a lightweight copy. Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.

5 React defaultProps

React components take inputs in the props argument. Then passed down from the Parent component. The child component will access them from the props object with the attribute name serving as the key. The problem here is what happens if the parent component doesn’t pass any attributes to the child component? Sure we will see undefined display in place of the props not sent by the parent component. To solve this issue, we can use the logical operator to set a fallback value, so when a prop is missing it displays the fallback value in place of the missing prop.

6 React optimizing Performance

Performance is important for any project. Clients wants their application have too much faster. Thats why's react is much concern of performacne. If you’re faceing performance problems in your React apps, make sure you’re test. React includes many helpful warnings. These warnings are very useful in development. You can read this warning and find the problem easily

7 React State

React has a built-in state object. Where store property and values that belongs to the component. When the state changes, the component will be re-renders. State contain as many properties. You can changes the state values by setState function. Always use the setState() method to change the state values, it will ensure that the component knows its been updated.After that it calls the render() method again,

8 Conditional rendering

In JSX when we thing conditional rendering, Ternary operator come out first in oor mind. In conditional rendering ternary operator vary helpful to us, its give two value depend on true false condition.

9 How rendering works

Every setState function call react state to change new State. Then react call render method to update the components in memory (DOM). Raect compares it with browser. If there are any changes, React does the smallest possible update to the DOM.

10 Raect props

Props means property. Props are used for passing data from one component to another. Parent component pass values to children using props.