ReactJS basic | KAMP Blog

This article will explain you very basic steps to bootstrap your Application using React JS. Before start you should have good understanding on props, state and few more words.

What is React JS?

React JS is JavaScript library which is built and maintain by FaceBook. This library works as component and component can be written by using class key word or functional key work.

Sample of class component

  class MainAppComponent extends React.Component {
    render() {
      return (
        <h1>{props.greeting}</h1>
      );
    }
  }

Sample of functional component

  function MainAppComponent (props) {
    return <h1>{props.greeting}</h1>
  }

What is props?

In react component, property assign from parent component to child component can be accessed though this props property.

 class MainAppComponent extends React.Component {
    render() {
      return (
        <h1>{this.props.greeting}</h1>
      );
    }
  }

What is state?

React component state is where an javascript object store property values that belongs to the component. It’s similar to variables declared within a function.
Other important thing is, when state object changes, the component re-renders.

  class MainAppComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {greeting: props.greeting};
    }
    render() {
      return (
        <h1>{this.state.greeting}</h1>
      );
    }
  }

What is JSX?

JSX stands for JavaScript XML which allow you to write HTML in react component.

By using JSX one can write the following JSX/JavaScript code:

var nav = (
    <ul id="nav">
      <li><a href="#">Nav 1</a></li>
      <li><a href="#">Nav 2</a></li>
    </ul>
);

Babel will transform it into this:

var nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Nav 1"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Nav 2"
      )
   )
);

You can think of JSX as a shorthand for calling React.createElement()

What is hooks?

React hooks are another way of get and set component state. Basically react hooks allow you to write component as a function ( Not like class extend) and get and set state of the application.

Also there are some method to access life cycle method in component.

Steps to bootstrap application using React JS

Add React library from CDN into your HTLM page

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>


<!-- babel to transpile code to js. -->
 <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js" ></script>

Create a div element id="root" to bootstrap the application

<HTML>
 <body>
     <div id="root"></div>
 </body>
</HTML>

Create first component

 class MainAppComponent extends React.Component {
    render() {
      return <h1>{this.props.greeting}</h1>
    }

Bootstrap the application

  var App = <MainAppComponent greeting="Hello World!" />;
  ReactDOM.render(App, document.getElementById('root'));

Final code to run the application

React JS for beginner