ReactJS Part 1 : Stackblitz

ReactJS is a component based JavaScript library for creating User Interfaces from Facebook. It can be used to create Single Page Applications (SPA) as well as native mobile applications.

React is based on Components. Components are small and isolated pieces of code which can be composed to create complex UI.

React uses ES6. Since ES6 is not supported in all the browsers it has to trans-compiled to  ES5 using Babel.

Setting up a ReactJS development requires installing Node which we will see later. An easier alternative for that matter Angular is  Stackblitz. Stackblitz is on online editor with similar user interface as that of Visual Studio Code. It's possible to login to Stackblitz using GitHub account and have a repository of your code.

Selecting React JavaScript will create a React project with ES6 as the language.


package.json
Inside the project there is a package.json file which contains the dependencies of this project. Inside dependencies section there is the dependency of react and react-dom. React is the core library and react-dom is for DOM manipulation.

{
  "name": "react",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}

index.html
Inside the index.html file there is div

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

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React Shalvin'
    };
  }

  render() {
    return (
      <div>
       <h1>{this.state.name}</h1>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

React  supports both  class based as well as function based component. Here we see a class based component.

JavaScript Expressions can be embedded within { } syntax.

Every React app will have a root component. Here the App component is the root component.

React components can be either class based or function based. Here the App component is a class component. A class component can have state which is the data of a component.