Fundamentals of ReactJs

React or ReactJs is an open-source library developed and maintained by the developers of Facebook and Instagram and also a large community of contributors. It is the most popular, declarative, efficient, and flexible front-end Javascript Library in the field of web development. It is aimed to create modern, fast Single Page Applications or websites(also called as User Interfaces or UIs).

No matter whether you’re new to ReactJs or working as a React professional, it is equally important for both to strengthen your backbone on React. Deep down in this article, we will be covering the following topics which will help you get a grip on the basic concepts of React:

1. ReactJs Basics
2. Features of ReactJs
3. Building Blocks of ReactJs(Components, Elements, Props, States, and Functions)
4. React Prerequisites.

1.1 Why ReactJs?

• Faster and Better – because of Virtual DOM (DOM and Virtual DOM – which will explain later), thus improves performance.
• Reusable Components – Define small components and later on, you can put them together to form bigger components.
• Can be used on both Client-side and Server Side – You can go with Client-side Scripting if your app is more of dynamic data where you need not request the DOM for every change. And for Static pages, server-side scripting can be used.
• Easy Debugging – Applications built using ReactJs are easy to debug because of the availability of React Developer Tools. It’s a small browser extension, developed by Facebook that makes the inspection and analyzation of React apps faster and easier.

2. Features of ReactJs

JSX – JavaScript Syntax Extension
JSX is a syntax extension to JavaScript. JSX is an inline markup that looks like HTML that gets transformed to JavaScript. It starts with an HTML-like open tag and ends with the corresponding closing tag.

Example:

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

The above example illustrates how JSX is implemented in React. The syntax is intended to be used by preprocessors to transform HTML-like text into standard JavaScript objects.
NOTE: It is not mandatory to use JSX with React. But React would be elegant if JSX is used.

Virtual DOM (Document Object Model) Consider a page displaying a list containing 10 items and one is needed to be updated. While performing updates, DOM will rebuild the entire list making it work 10 times more than what is necessary. This inefficiency can be overcome using Virtual DOM.

React postulated the idea of Virtual DOM. It can be created using the render() method in React. Virtual DOM is an abstract, lightweight copy of DOM. Each time an update is required, a new virtual DOM is created and it compares the differences between previous virtual DOM and only the changes are updated in real DOM.
Syntax: ReactDOM.render()

Also Read: How to begin learning Reactjs

3. Building Blocks of ReactJs

A typical ReactJS program constitutes:

• Components
• Elements
• Props
• States
• Functions

            Now let us have a look on core functionalities of each building block one-by-one:

Components

A Component is a small reusable piece of code that is responsible for one job. Components are like JavaScript functions. They accept arbitrary inputs (called props) and return React elements describing what should appear on the screen.
The simplest way to define a component is to write a JavaScript function:

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

This accepts a single “props” object argument and returns a React element.
You can also use an ES6 class to define a component.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
The above two components are equivalent from React’s point of view. React is all about Components. Just like everything in HTML is an element, everything in React is a component.

Elements

Elements are the basic building blocks of a react app. They contain the information that is displayed in the UI.
const element = <h1>Hello, world</h1>;
Here <h1>…..</h1> is an element that has the data Hello world. Here is how we create and use an element in React. We will learn more about the elements in the upcoming articles.

Props

When you define a component, it can be defined with or without attributes called props. Let us understand this with an example.

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name=”Jerry”/>;
ReactDOM.render(
  element,
  document.getElementById(‘root’)
);
You could see, the value ‘Jerry’ is passed to the prop name in component Welcome.
Data in props can be accessed using this.props and can be used in render() method to update dynamic data. In simple words, props are like parameters to the components.
Let’s see a component without a prop value.

function Welcome(props) {
  return <h1>Hello, Harry!</h1>;
}
const element = <Welcome/>;
ReactDOM.render(
  element,
  document.getElementById(‘root’)
); Props are immutable. So, the props cannot be changed once it is initialized.

States

State can be defined as a key-value pair defined in each component. It can be — Initialized with this.state — Updated on event calls.
When a component’s state data changes, the render function will be called again to re-render the change in state using this.setState.

Functions

Like other Javascript frameworks, ReactJS also supports functions.
Pure or Impure?
In the following code, the function itself updates the props passed. Hence it is impure.
function withdraw(account, amount) {
   // Some Code
 account = account – amount ;
}
Take a look at the following code snippet. Here the props passed are not affected by the function. Hence it is pure.
function sum(a, b) {
return a + b;
}
We will discuss the importance of Pure Functions in the upcoming articles. We hope that this article will take you one step ahead in your web development journey using React.

4. React Prerequisites

Here are some concepts that you need to be clear before starting working on React so as to make this tutorial more effective for your understanding.

1. Basic knowledge of HTML.
2. You need to be familiar with JavaScript

Knowledge of concepts like functions, arrays, classes etc.

What’s Next Now?

Now that you have React fundamentals down, then what’s next now? you must be looking to learn more on ReactJs and thinking of setting it as your dream job. isn’t it? If yes, then whom to wait for? We offer a comprehensive training course for ReactJs lovers, which contains all the required sessions and training that will make you career-ready. Our expert trainers will help you broaden your skillset and will guide you to achieve your career heights.

Consult Us