React js in 20 minutes

React js in 20 minutes

React js is a javascript library for building user interfaces. Reach js has two category –

  • React for web
  • React native

Prerequisite

  • Html
  • Css
  • Javascript

Start to react we need to understand the following things –

React JSX

JSX means JavaScript XML. Using JSX we can write HTML in React by which we can easily write HTML inside react.

Component

It’s a reusable code component. They return HTML code. It can be two type –

  • Function component
  • Class component

Add script inside head tag

The first step to work on react js we need to add script inside our head tag.


<!-- Add react js library -->
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

But here we will use class component

Get Started


<!DOCTYPE html>
<html>
  <head>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
  
    <div id="app"></div>

    <script type="text/babel">
      class Hello extends React.Component {
        render() {
          return <h1>Hello World!</h1>
        }
      }

      ReactDOM.render(<p>Hallo</p>, document.getElementById('app'));
    </script>

  </body>
</html>

Data passing using prop

A prop is just like a function argument and we can pass them to a component. It is made the component more dynamic and powerful. like in the previous example if we want to show dynamic content then we use like –


<script type="text/babel">
class Hello extends React.Component {
    render() {
        return <h1>{this.props.msg}</h1>
    }
}

ReactDOM.render(<Hallo  msg="Hi, Welcome to react js"/>, document.getElementById('app'));
</script>

Now you can see we have msg attribute in Hello component and we are passing message though this attribute so by which we can create a more powerful component in react js.

We can use multiple attributes or prop and those props are read only

Componets inside component

In react, js component can be nested. So by which we can create a lot of small components to building the main component. It’s useful because of; if we have some bugs on our system then we know the component and we will focus on related component witch will save development time.


<script type="text/babel">
class Hello extends React.Component {
    render() {
        return <h1>{this.props.msg}</h1>
    }
}

class HelloSection extends React.Component {
    render() {
        return (
            <div>
                <Hallo  msg="Hi, Welcome to react js"/>
                <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
            </div>
        );
    }
}

ReactDOM.render(<HelloSection />, document.getElementById('app'));
</script>

You can see we have Hello component and we are using Hello component inside HelloSection component.

State in react js

The state is just like two way binding of angular js. Suppose that you have an object and you are using that object into your component and somehow the value of that variable or object changed so that value should be change on your component the prop doesn’t work like that but using state your component rerender or change the value of the component.


<script type="text/babel">
class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: "I am stage and i will change",
        };
    }
    render() {
        return <h1>{this.state.msg}</h1>
    }
}

ReactDOM.render(<Hallo />, document.getElementById('app'));
</script>

It’s just a simple example which shows how to use state in react now we will see a rerender property of state using event.

Use of Event in react js


<script type="text/babel">
class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: "I am stage and i will change",
        };
    }

    msgChange = () => {
        this.setState({msg: "You have changed the message."});
    }

    render() {
        return (
            <div>
                <h1>{this.state.msg}</h1>
                <button type="button" onClick={this.msgChange}>Change Msg</button>
            </div>
        )
    }
}

ReactDOM.render(<Hallo />, document.getElementById('app'));
</script>

setState() is a method whitch change the value of state object.

About the Author: Pankaj Bisht