React.js fundamental

today i am gonna discussing about react.js.top 10 topics i am gonna introduce ,its not complete guide on react.js.

1)The React language

Say that we have a list of TODOs like this one:

const todos:[

{ body : ‘ react js’ done : true}

{ body : ‘ TODOs app’ done : false}

{ body : ‘ build game’ done : false}

]

This TODOs array is have to use UI. build a UI to manage them and can be displayed.

2)ReactDOM.render:

This method are the core method in react application.in fact react application method can not exist without using reactDOM.render.

This is basically the entry point for a React application into the browser’s DOM.

1. render the browser always a “React element”.
2. DOM node that exists in the statically rendered HTML

3)React.createElement:

This method also a core method in react application.DOM element represent with objects using calls to the react.createElement method.These objects are known as React elements.

The react.createElement function has many arguments:

1. HTML “tag” for the DOM element to represent that is div
2. There have so many attribute like id,herf,title in DOM element used null.\

4)Virtual DOM:

A virtual DOM object is a representation of a DOM object.it has the same properties as a real DOM object,DOM is represented as a tree structure,it pretty quick but change the element it’s children’s has to go through Layout stage and changes has to be Re-painted which are slow,therefore more items to repaints then more app becomes slow

5)JSX:

SX just provides syntactic sugar for the react.createElement(components,props,…children) function

<Mybutton color =”green” shadowSize ={2}>

touch me

</Mybutton>

that compiles into:

react.createElement(

Mybutton,

{color =”green” shadowSize :2}

touch me

)

6)Props in JSX:

There are several different ways to specify props in JSX.for the javascript can be pass any expression as a prop by surrounding it with {}.

here is example using jsx

<My component foo = {2+4+6+8} />

here props.foo will be 20 because of expression is 2+4+6+8 gets evaluated.

7)defaultProps:

it can be defined as a component class ,it’s use for undefined props but not for null props

class CustomButton extends React.Component {
// …
}

CustomButton.defaultProps = {
color: ‘green’
};

if props.color are not provided

Rendr() { return

<CustomButton/>; // props.color is set to green

}

8)Optimizing Performance:

Internally, React uses the costly DOM operations needed to update the UI to a minimum. For many applications, the use of React leads to a fast user interface without doing much to optimize performance specifically. You can accelerate your React application in several ways.

React contains many useful warnings by default. These warnings are extremely helpful to develop. They make the reactions bigger and slower though, so you should ensure that you are using the production version when using the app.

9) react is not a framework:

Angular or Ember are systems in which you already have those choices. React is just a library and you have to take your own decisions. It concentrates on helping you to build component user interfaces.

React is very thin and mixing with other third-party libraries is incredibly fast. For all, the Rich JS environment has a library. Without addressing design choices/boundaries, you can pick your preference and plug in.

10) react is a JavaScript:

To generate markup dynamically in React you also use JS:

<select value={this.state.value} onChange={this.handleChange}>

{somearray.map(element => <option value={element.value}>

{element.text}

</option>)}

</select>

In the above case, the array is mapped to a list of <option> elements using the map function. The only deviation from ordinary HTML here is a value in <select> which sets the attribute you’ve picked.