Some topics about React that you must need to know
What is React
DOM is “Document Object Model”. It is the browsers programming interface for HTML documents that treats them as tree structures. The DOM API can be used to change a document structure, style, and content.
The Virtual DOM (VDOM) is a programming concept. A virtual DOM object is a representation of a DOM object, like a lightweight copy. A virtual DOM object has the same properties as a real DOM object. DOM manipulating is slow. But Virtual DOM is faster.
defaultPros can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but no for null props. For example:
PropTypes was originally exposed as part of the React core module, and is commonly used with React components. React will automatically check the propTypes that set on the component, but if we are using PropsTypes without React then we may want to manually call.
In React if we want to pass data from parent to child component we need to use props. From JSX point of view props are HTML attributes. Props component are available under child components.
The State of a component is an object that holds some information that may change over the lifetime of the component. States can only be used in Class Components. It is generally updated by event handlers.
If we are not sure that our build process is set up correctly, we can check it by installing React Developer Tools for Chrome. By default, React includes many helpful warnings. These warnings are very useful in development. For the most efficient Browserify production build, install a few plugins:
A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. Libraries that use render props are React Router, Downshift and Formik. Once we create an element, we can’t change its children or attributes. The only way to update the UI is to create a new element and pass it to ReactDOM.render().