ReactJS

React object

All of the API of react are available through this object. APIs are minimal.

React.createElement() method

React.createElement(element, attributes, 'content/children1', 'content/children2');

It creates an element, with element (string) tag, and with attributes (like {a : "b", c : "d"}) which contains content

ReactDOM object

This object contain DOM specific methods, used at outside layer(for example to final render things we built using React object)

ReactDOM.render() method

ReactDOM.render(renderWhatElem, renderWhere [, callback])

Controls the contents(children, not the node itself) of the container node. Everything is replaced on first call and efficiently refreshed afterwards.\\ Returns: a reference to the root ReactComponent instance but it may get deprecated. Example:

ReactDOM.render(React.createElement("h1",{ className : "heading" }, "hello world"),
                document.getElementById("idname"))

To make things easier, instead of calling React.createElement() we can instead use JavaScript XML.

Custom Components

Function Based Components

This is just a normal function that returns the content, the element(s) we want. Function is usually then called into ReactDOM.render() method.For example

let compnt = function(){
return "I am a card";
};
//
//
//
ReactDOM.render(
    compnt(),
    document.getElementById("card-container")
);

We can also return React.createElement() method if we want.

let compnt = function(){
    return React.createElement("div",{class = "card" },"I am a card");
};

Or return JavaScript XML

let compnt = function(){
    return (<div className = "card">I am a card</div>)
};
//
// Instead of normal function call, we can also use JSX method
ReactDOM.createElement(
    <compnt />,
    document.getElementById("card-container")
);

Class Based Components

In this we create a class that extends the React.Component and implement a render() method. And to render then component using ReactDOM.render() method, we pass class to the React.createElement() method as the only argument. For example

class Cmpnt extends React.Component {
    render(){
        return React.createElement("div",
                                   { className = "card"},
                                  "I am a Card");
        // or
        // return (
        //     <div className="card">I am card</div>
        // )
    }
}
//
//
//
ReactDOM.render(
    React.createElement(Cmpnt),
    document.getElementById("card-container")
)

or using JavaScript XML

ReactDOM.render(
    <Cmpnt />,
    document.getElementById("card-container")
)

Properties

Components can take properties and our components can process them and make return property based. To pass the value using JavaScript XML we can simply write properties and their values as attributes for example:

ReactDOM.render(
    <CustomComp propName = "prop value">,
    document.getElementById("card-container")
);

In Function Based Components we can access properties using props parameter that is passed down to our function. For example

let CustomComp = function(props){
        return <div>My properties value is {props.propName}</div>;
};

Using JavaScript’s destructuring assignment we can also write

let CustomComp = function({propName, propName2}){
        return <div>My properties value is {propName}</div>;
};

To Set the default properties value, we use defaultProps. For example

let CustomComp = function({propName, propName2}){
        return <div>My properties value is {propName}</div>;
};
CustomCom.defaultProps = {
    propName : "prop default value",
    propName2 : "prop default value 2"
};

In Class Based Components we can access properties using the this.props.propName. this.props is read only. For example

class CustomCom extends React.Component{
    render(
        return <div>My properties value is {this.props.propName}</div>;
    )
}

To set the default properties in Class Based Components we similar to Function Based Components use defaultProps property like:

class CustomCom extends React.Component{
    render(
        return <div>My properties value is {this.props.propName}</div>;
    )
}
CustomCom.defaultProps = {
    propName : "prop default value",
    propName2 : "prop default value 2"
}

State

State refers to data, different states means data is changing. To re-render a component we don't have to do anything but just need to change the data, React will handle everything else.\\

We read the state using this.state object and to update state we use this.setState() method, in this react auto-updates the contents of the element. We can directly change this.state but we should not. For example

class CustomCom extends React.Component{
    constructor(){
        super();
        this.state = ();
    };
    onSomeEvent(event){
        this.setState({
            stateName : event.target.value;
        });
    }
    render(
        return <div onChange={event => this.onSomeEvent(event)}>
                    My properties value is {this.state.stateName}
                </div>;)
}

Calling super() is required to use this in constructor. Generally events are responsible for state changes, that is handled by React's Event Handling. Also it is not ideal to set (default /initial)value of this.state to value passed(as this.props.propName). We cannot directly use state with Function Based Components, for that we will need hooks.

Accessing components from outside

As we know ReactDOM.render() method returns the root component, which we can use to access the methods of the component.

const myCardComponent = ReactDOM.render(
                            <div propName = "Prop Value" />,
                            document.getElementById('card-container'));

While we can access the component from the outside and can change its functioning, we should not. At most we should only use this to access the state.

Life Cycle

1. Mounting When component is added to the DOM. After this componentDidMount() of component is called and here we can do inital things that requires the DOM(other stuff should be in constructor).

2. Updating Component is updated using setState(). Before setState() we can use getSnapshotBeforeUpdate() method to receive previous properties and states as argument.And returns a snapshot value.\\ After update componentDidUpdate() is called. Generally used to compare old and new values.// There is also shouldComponentUpdate(), which can stop component from re-rendering.

3. Unmounting Component is removed from the DOM. But before it componentWillUnmount() is called where we can do stuff just before component is unmounted.

Event Handling

React uses its own event handlers. It uses camel casing(e.g. HTML's onclick vs onClick). Syntax

onChange =(event=> this.onSomeEvent())
// or
onChange = this.onSomeEvent.bind(this)

or using constructor()

constructor() {
super();
this.state = {};
this.onSomeEvent = this.onSomeEvent.bind(this);
}
//
//
onChange={this.onSomeEvent}

This increases performance a bit. Or we can use(more modern method) function as class property as

onSomeEvent = (event) => {
    //code
}

Hooks in React

create-react-app

Its a starting configuration of .js files. Further configuration happens in the background.

To create a ReactJS project using this

npx create-react-app app-name