React.Js Fundamental Concepts

1.React is All about components, we can define small components and put them to form bigger components, all the components are reusable, event different project. Most Important is the component name Start with Capital letter and also recommended when we work with HTML elements and React Elements.

we can use JavaScript expressions anywhere in JSX within a pair of curly braces, any javaScript expression is declared into those curly braces{}, javascript object are also expression sometimes we use as double curly braces for the javascript object also use for CSS style object to style attribute in react.

React components with JavaScript classes that support react components and it defines class extends React. Component and the class define the single function and its render().To use rendered output above in the jsx is this.props.lebel. Get constructed we using a regular JavaScript constructor function.

2.Event in React: Event handling in react elements are two important differences way with the DOM API. One is all the react attributes are using camelCase otherwise lowercase. Another one reacts pass javaScript function as event handler otherwise used string. React wrap the Dom event object and passes the wrapped event object to call.

3.Every React component has a story first we define react template create an element from the component and inside a render call of another component ReactDOM.render.Then given a set of props that we can access with this.props.The constructor method will be called the component lifecycle method. React components have a private state and React will react in render processing props get passed by the parent, internal private state update anytime, while the input of the render changes outputs will change.

4.Virtual-Dom: In web development, Dom is crucial to understand. In ES6 dom stands for document object model, it is mainly used to create a node using Javascript. Dom is the most important thing interactive web. In JavaScript Dom, there's a corresponding virtual DOM. In Virtual DOM object has the same power and has properties and methods like the Dom object.

How it works: The entire virtual DOM gets updated and the virtual dom compared to what it looks like before the update. React found which object has change and the change object gets an update on real DOM. Also, change it for the screen to change. This process is known as reconciliation.

5.JSX In-Depth: JSX is a JavaScript extension that provides syntactic sugar for function calls and object construction. It looks like a template but it isn't.JSX makes code easier. In JSX code can be modified easily with the HTML language. The most important part is using JSX to write less code, make a few mistakes. And it is a small language with XML-like syntax. In SOC principle fixed broken parts bringing together. That's why JSX code looks like HTML and easier to read and write.JSX is not a specification of ECMAScript.Babel compile the JSX into javaScript

6.prop-Types: PropTypes was originally exposed as part of the React core module, and is commonly used with React components. Here is an example of Proptypes:

We can declare a prop a specific js primitive by default,

  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

React will automatically check the propTypes you set on the component and it is “propTypes.checkpropTypes” Here is prop validation:

name: PropTypes.string,
 age: PropTypes.number,

7.Optimization: In the same element reference technique parent component re-render because of state change in the parent component, It's not working if the parent component re-renders because of its props.

In optimizing we also can use React.memo when child component is being asked to re-render due to change the parent's state which does not affect the child component props.

8.Render Optimization: Optimize the rendering of one component, React will also skip rendering that component's entire subtree because its effectively stopping the default “render children recursively” behavior of react.

9. It's not a Framework React is just a library and React rendering process like every setState() call and inform React about the state change. Then React calls render() method to update components.

10.Separate the concerns: In React we can keep HTML, JavaScript, and CSS together as components to display rows on the grid we can create a row component and put HTML behavior. If HTML and Js in a separate file it can easily replace the Js intact. In React data goes down the tree of components. For pass data from parent to child components, we need to use props from JSX point of view props are HTML attributes