React

Question : What are the different types of components?
Answer : There are two types of component, function component and the class component,
1. Functional component : They are also called as the stateless component, they accept the props and returns the DOM. They are the most basic way of defining the component in the React.

2. Class Component : They are also called as the stateful component. They are more versatile way of defining the component where they have the state and props, the difference between state and props is the state can be changed but props can not be changed once defined.

Question : Describe the following webpack.config.js
var config = {
    entry: './main.js',
    output: {
        path: __dirname,
        filename: 'index.js',
    },
    devServer: {
        inline: true,
        port: 8080
    }, module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}
module.exports = config;

Answer : Here  We are setting webpack entry point to be main.js . Output path is the place where bundled app will be served. We are also setting the development server to 8080  port. You can choose any port you want. And lastly, we are setting babel loaders to search for js  files, and use es2015  and react presets that we installed before as babel-preset-react and babel-preset-es2015.

Question : Write a basic HelloWorld Basic Functional Component?
Answer :
const helloComponent = (props) => (
            <div>
                Hello World!!!
            </div>
);

alternatively can be written in this way as well
const helloComponent = (props) => { 
     return (
            <div>
                Hello World!!!
            </div>

    );
}

Question : Write a basic HelloWorld Class Component?
Answer :
class App extends React.Component {
    render() {
        return (
            <div>
                Hello World!!!
            </div>
        );
    }
}

Question : How does the component communicate with the outside world?
Answer : Each react component can accepts the props as it's argument and that is how we can communicate and also instructs the component to have behavior based on the props.

Question : What are the two main properties of the React Class Component?
Answer : props and state are to main Instance Properties,

props : this.props contains the props that were defined by the caller of this component. See Components and Props for an introduction to props.
In particular, this.props.children is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself.

state : The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.
If you don’t use it in render(), it shouldn’t be in the state. For example, you can put timer IDs directly on the instance.
Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

Question : Describe Virtual DOM in terms of React?
Answer : React is a library that is designed to update the browser DOM for us. We no longer have to be concerned with the complexities associated with building performant SPAs because React can do that for us. With React, we do not interact with the DOM API directly. Instead, we interact with a virtual DOM, or set of instructions that React will use to construct the UI and interact with the browser.5
The virtual DOM is made up of React elements, which conceptually seem similar to HTML elements, but are actually JavaScript objects. It is much faster to work directly with JavaScript objects than it is to work with the DOM API. We make changes to a JavaScript object, the virtual DOM, and React renders those changes for us using the DOM API as efficiently as possible.

Question : What is React Elements?
Answer : The browser DOM is made up of DOM elements. Similarly, the React DOM is made up of React elements. DOM elements and React elements may look the same, but they are actually quite different. A React element is a description of what the actual DOM element should look like. In other words, React elements are the instructions for how the browser DOM should be created.
e.g. React.createElement("h1", null, "Baked Salmon");
The first argument defines the type of element that we wish to create. In this case, we want to create a heading-one element. The third argument represents the element’s children, any nodes that are inserted between the opening and closing tag. The second argument represents the element’s properties. This h1 currently does not have any properties.

What is ReactDOM?
Answer : ReactDOM contains the tools necessary to render React elements in the browser. ReactDOM is where we will find the render method as well as the renderToString and renderToStaticMarkup methods that are used on the server. These will be discussed in greater detail in Chapter 12. All the tools necessary to generate HTML from the virtual DOM are found in this library.
All of the DOM rendering functionality in React has been moved to ReactDOM because we can use React to build native applications as well. The browser is just one target for React.

What is React DOM Children?
Answer : ReactDOM allows you to render a single element to the DOM. React tags this as data-reactroot. All other React elements are composed into a single element using nesting.
React renders child elements using props.children. We could render other React elements as children too, creating a tree of elements. This is why we use the term component tree. The tree has one root component from which many branches grow.
E.g.
React.createElement(
    "ul",
    null,
    React.createElement("li", null, "1 lb Salmon"),
    React.createElement("li", null, "1 cup Pine Nuts"),
    React.createElement("li", null, "2 cups Butter Lettuce"),
    React.createElement("li", null, "1 Yellow Squash"),
    React.createElement("li", null, "1/2 cup Olive Oil"),
    React.createElement("li", null, "3 cloves of Garlic")
)