react - React JS - reactjs states - reactjs props - dom model - react js - reactjs

Article tag : react , react native , react js tutorial , create react app , react tutorial , learn react

React Component using createClass method :

React - Bootstrapping code :

Article tag : react , react native , react js tutorial , create react app , react tutorial , learn react

React dataflow state :

• Everything in reactjs is components.
• The core building blocks of React application is components only.
• Components interact with each other and maintain the state too.
• In Reactjs whole application is need to be break into the component only.

• Line 8-19 : Telling browser the code between the script block is JSX and not normal JavaScript.
• Line no 12 : This is how we write the HTML in JSX

In Reactjs props are like the HTML Properties. They are used to pass the data between the components or via the states. In Reactjs the props can be accessed by this.props.propsname

Props can be define by name=“value”. To access this we have to call this.props.name

React.render(<MyComponent name=“Neha” />) : name is the one of the props of the component MyComponent

To access the value of the props in the react we use {this.props.name}.

Every component has a State object.

Can be set by using setState.

setState triggers UI updates and to get the initial state before the setState : getInitialState.getDefaultProps

Reactjs maintained the state – getIntialState, setState, getDefaultProps.

In the above example we are getting the count variable to 5 and accessing it by {this.state.count}

componentWillMount – Client and server side componenet Will Occur only once (before)

componentDidMount – Only once (after)

shouldComponentUpdate – Return value determines weather component should update

componentWillUnmount – Before unmounting component

Reactjs has the events that are attached with the components as the props of the components and can trigger methods.

We have created a custom method clickCount and onClick of the button we are calling it onClick = {this.clickCount}

In reactjs, application data flows unidirectional via the state and props not like angular js where we have 2-way data binding. Which means in multiple component hierarchy , a common parent component should manage the state and pass it down the chain by props.

setState - state should be updated by setState to ensure UI will refresh/update

this.props – to pass the value to the child components