Call a function in child component from parent component in React

Consider the following parent component

class Parent extends React.Component {

constructor(props) {

super(props);

        this.state = { data: "" };

}

handleClick() {

        this.setState({ data: "I am Clicked" });

        this.refs.child.handleChild();

}

render() {

        return (

<div>

<button onClick={this.handleClick.bind(this)} > Click Me</button>

<ChildComponent ref="child" />

</div>

);

}

}

Consider the child component

class ChildComponent extends React.Component {

constructor(props) {

super(props);

        this.state = { childData: "Child function is called" };

}

handleChild() {

alert(this.state.childData)

}

render() {

        return (

<div>            </div>

);

}

}

As shown above we can make use of "ref" on child component and using this.refs we can call any function in the child component

JSX

JSX - JavaScript Syntax Extension

A preprocessor step that adds XML syntax to javascript.

• It looks like XML/HTML
• Defines a familiar syntax to define tree structure with attributes
• It is not requires but makes things easier while writing react components.
  
  
  
   

The left side represents code written in JSX and right hand side is the corresponding javascript . Just to make a list of four colors you can see the amount of code we have to write if we are not using JSX.

" Hello World ! " using React JS

• Create a document with .html extension, let it be index.html.
  

• Now add title to the web page. In the body section create a div tag with id='app'. We will then write react code which replaces the content here under div tag.
  
  
  
• Add the react-dom and react js script files to the index.html
  
• Add the react js script to be rendered in index.html 
  
• Open the index.html in your browser. You should see Hello World! as below.
  

You have done your first react application

Use the `defaultValue` or `value` props on select instead of setting `selected` on option error in using react

This error can be solved by making use of select Value={this.state.option} which we are going to use , instead of making use of selected on option values.

List view

Form control

Import and require difference in react

Require:

This allows us to have dynamically load module which isnt predefined or we can also conditionally load  a module when we reuire it.

Ex: var Navitem =require ("./components/NavItem");

Imports:

We can use ES6 import to selectively load the pieces which we need and by doing this we can save memory.

import Navitem from("./components/NavItem);


require is in ES 5 and in ES 6 we make use of import

props and state in react.js

Function component and Class component

webpack

React js

React is a javascript library which can be used to develop user interfaces. We can also use it to develop complex and amazing web apps. It can be also be combined with Redux and many other tools to develop amazing applications.