React World

About:

React is a JavaScript “library”. It is not exactly a “framework”.Building User interfaces is the main focus of React.React following Unix Philosophy.React became more popular todays because of it created a common language between developers and browsers that allows developers to declaratively describe UIs and manage actions on their state instead of actions on their DOM elements.

React’s Popularatity Reason:

1)React basically acts like user agent who will do the communication with the DOM on their behalf.
2)React is often given the “Just JavaScript” label. This means it has a very small API to learn and after that one's JavaScript skills are what make him/her a better React developer.
3)Learning React pays off big-time for iOS and Android mobile applications as well. React Native allows one's to use his/her React skills to build native mobile applications.

API using method:

The ReactDOM.render method and React.createElement method are the core API methods in a React application.A React web application cannot exist without using both of these methods.

ReactDOM.render:

This is basically the entry point for a React application into the browser’s DOM. It has 2 arguments:
1)The first argument is WHAT to render to the browser. This is always a “React element”.
2)The second argument is WHERE to render that React element in the browser.

React.createElement:

Representing DOM elements with object instead of string is known as React.createElement method.The React.createElement function has many arguments:
1)The first argument is the HTML “tag” for the DOM element to represent, which is div in this example.
2)The second argument is for any attributes (like id, href, title, etc.) we want the DOM element to have. The simple div we’re using has no attributes, so we used null in there.
3)The third argument is the content of the DOM element. We’ve put a “Hello React” string in there.

Nesting React elements:

DOM API and React API are two node controlling method.Major diffrences between two methods are,in the HTML version we used a string to represent the DOM tree, while in the React version we used pure JavaScript calls and represented the DOM tree with an object instead of a string.

JSX:

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.The first part of a JSX tag determines the type of the React element.

defaultProps:

defaultProps 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 not for null props.Example:
class CustomButton extends React.Component {
// ...
}

CustomButton.defaultProps = {
color: 'blue'
};
Here,if props.color is not provided it's default value will be 'blue'

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.

Create React App:

Using "create react app" command we can build react app.Then running 'npm run build' will create a production build of programmer app in the build/ folder of programmer project.