React Basics

Hello, everyone, I’m back with another post this time I’m gonna talk about React JS- A JavaScript library created and maintained by FaceBook. It is a library for building user interfaces.

So Let’s get started:-

The Basics:-

• React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
• React lets you compose complex UI’s from small and isolated pieces of code called “components”.
• React uses virtual DOM which is a JavaScript object. This will improve apps performance since JavaScript virtual DOM is faster than the regular DOM.

Let’s Now start getting into technicalities of React JS:

React Dom Render:

• The method ReactDom.render() is used to render(display) HTML elements.
• Syntax:ReactDom.render(element,container[,callback])
• This will read a React element into the DOM in the supplied container & return a reference to the component (or returns null in case of stateless components.)
• If the optional callback is provided, it will be executed after the component is rendered or updated.

JSX:

• It stands for JavaScript XML and it is an XML/HTML like extension to JavaScript.
• To write JSX Expressions in React use curly braces {}.
• To write JSX Expressions in React use curly braces {}.
• For example:

<div id=”id01">Hello World!</div>
<script type=”text/babel”>
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementById(‘id01’)
   );
</script>

React Elements:

• React applications are usually built around a single HTML element often call the root element(root node).

<div id=”root”></div>

• React elements look like this:

const element = <h1>Hello</h1>

• React elements are immutable. They cannot be changed.

React Components:

• React components are JavaScript functions (or classes in ES6). They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen (UI).
• Components let you split the UI into independent, reusable pieces, and think about each piece in isolation
• For Example:

React Component Properties (Props):

• React allows us to pass information to a Component using something called props (short for properties). Props are basically kind of global variable or object.
• Props are Read-Only(Immutable) whether you declare a component as a function or a class, it must never modify its own props. Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.
• All React components must act like pure functions with respect to their props.
• For Example:

Note:

1. HTML tags always use lower case tag names, while React Components start with uppercase.
2. You should use className & htmlFor as XML attribute names instead of class & for of HTML.

React State:

• A state is a place where the data comes from.
• State of an instance of a React Component Class can be defined as an object of a set of properties that control the behavior of the component.
• In other words, the State of a component is an object that holds some information that may change over the lifetime of the component.

Difference Between State and Props:

• Props are immutable i.e. once set the props cannot be changed, while State is an object that is to be used to hold data that may change over time and to control the behavior after each change.
• States can only be used in Class Components while Props don’t have this limitation.
• While Props are set by the parent component, State is generally updated by event handlers.

Creating A React App:

• Install NodeJS from https://nodejs.org/en/
• After installing NodeJS, we can start installing React by

$ npx create-react-app <Name Of Your App>

• The above command will create a my-app folder in your PWD (Present Working Directory).
• Browse through the src folder in the generated my-app folder and remove all the files in it as shown below :

$cd my-app\src
$rm -f *

• Add files with names index.css and index.js in the src folder as :

$touch index.css
$touch index.js

• In the index.js file add the following code

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;

• Run the project

$npm start

That’s it, for now, I will discuss React Component Lifecycle in another post see you then.