Getting Started with ReactJS

Table of contents

Reading Time: 3 minutes

ReactJS is a front-end open-source JavaScript library by Facebook to build user interfaces. It is used for building single page web and mobile applications.

In this blog we will go through some basics of react and how we can get started with it.

Why use React ?

As already mentioned in the introduction we now know that it is a javascript library to build beautiful user interfaces. React is also:

Declarative: We as developers just need to focus on designing views for each state change in our application. React will update and render the right components when the data changes. The code becomes more predictable and easy to debug.
Component-Based: In component based approach we encapsulate behaviours into small units called components. They manage their own state.This make the code easy by splitting the logic into reusable independent code.
Technology-stack agnostic: React does not care what tech-stack you use. You can develop new features in React without rewriting code. It can render on the server using node.

Features of ReactJS

It stands for JavaScript XML which is an extension of JavaScript.

const element = <h1>Hello, world!</h1>;

As you can see from the syntax it is not a typical data-type. It is neither a string nor a markup language.

2. Components

Components in react are like JavaScript functions which take props as inputs and return react elements. They are independent and reusable bits of code. They are of two types.

class component

  class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Functional component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

3. State

React has a built-in state object where we store property value that belongs to the component.

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render()
}

4. Virtual DOM

React creates a virtual dom which is an in-memory data -structure cache. Only the final changes of DOM have later been updated in the browsers DOM. A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

Getting Started with React

Now that we have basic understanding of React and have knowledge of its building blocks, let’s dive in and set up our first react project.

Prerequisites :

Node.js

Before starting with the project make sure you have node version >= 8.10 installed on your system. You can install it using these commands

sudo apt-get update
sudo apt-get install nodejs

You will also want to install the Node.js package manager. You can do this by using :

sudo apt-get install npm

2. Yarn

Yarn is another package manager like NPM, but is better suited and faster to work with for React applications. So let us install yarn and use it for building our React applications.

You can follow this instruction to install yarn.

Now that you have npm and yarn installed we can start with a quickstart project which is create-react-app, an official single page web application by React.

To create the app use the command :

npm init react-app my-app

You can do the same using yarn:

yarn create react-app my-app

This will create a my-app directory with the react application files.

Now,

cd my-app

Run the command

npm start

yarn start

This will run the application in development mode. Open http://localhost:3000 to view it in the browser.

Checkout the content of the my-app directory. We will explore the contents and start tweaking the my-app to understand the flow in React application and build something new out of it.

References