React Intro

Posted on In

In this post we will get to know about React.

What is React

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Virutal DOM

DOM stands for “Document Object Model”. Traditionally we explicitly write code to update the DOM.

React maintains a Virtual DOM for us. Whenever the state of our application changes, the virtual DOM gets updated first, React compares the updated virtual DOM to the previous virtual DOM. Then apply the change to the real DOM.

To learn more about the Virtual DOM, see React Virtual DOM Explained in Simple English

create-react-app

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

1
2
3
npx create-react-app my-app
cd my-app
npm start

create-react-app will create an react application. You can start working with react by updating App component in src/App.js

If you prefer to use typescript, include --template typescript option

1
npx create-react-app my-app --template typescript

If you use VS Code, you can install ES7 React/Redux/GraphQL/React-Native snippets extension. This extension provides useful React/Redux snippets in ES7 with Babel plugin features.

Component

Here is what a component looks like. We will dive deep into React Component in the future post.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

This component uses React Hooks, which is the prefered way to create a component.

React Resources