React Introduction

Mohit Kala — Tue, 10 May 2022 14:29:59 +0000

What is React
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.

Example

import React from "react";

const Example= () => {
  return (
    <div className="hello_react">
      <h1> Hello, world this is React ! </h1>
    </div>
  );
};

export default Example;

The Example function is a React component that displays the famous introductory ''Hello, world this is React".

When displayed in a web browser, the result will be a rendering of:

Hello, world this is React !

2) React History
a) React was Created by Jordan Walke, a software Engineer at Facebook

b) On April 2017, Facebook announced React Fiber, a new core algorithm of React Library for Building User Interfaces.

3) React Benefits and Features
A) Virtual DOM: The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as React DOM. This process is called reconciliation.

Virtual DOM has the same properties that of the Real DOM, but it lacks the power to directly change the content of the screen.

Think of Virtual DOM as the blueprint of a machine, changes made to the blueprint doesn’t reflects on the machine itself.

B) Components

React component is the building block of a React application. Let us learn how to create a new React component and the features .

i) Functional Components

Function components are declared with a function that then returns some JSX.


const Example= () => <div>Hello, world this is React !</div>;

ii) Class-based Components

Class-based components are declared using ES6 classes.

class ParentComponent extends React.Component {
  state = { color: 'black' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

C) JSX

React JSX is an extension to JavaScript. It enables developer to create virtual DOM using XML syntax. It compiles down to pure JavaScript. Since it compiles to JavaScript, it can be used inside any valid JavaScript code. For example, below codes are perfectly valid.

class Example extends React.Component {
  render() {
    return (
      <div>
        <p>Example 1</p>
        <p>React Js</p>
      </div>
    );
  }
}

D) One Way Data Binding: ReactJS uses one-way data binding. In one-way data binding one of the following conditions can be followed:

i) Component to View: Any change in component data would get reflected in the view.

ii) View to Component: Any change in View would get reflected in the component’s data.

E) Performance: React uses virtual DOM and updates only the modified parts. So , this makes the DOM to run faster. DOM executes in memory so we can create separate components which makes the DOM run faster.

F) Extension: React has many extensions that we can use to create full-fledged UI applications. It supports mobile app development and provides server-side rendering. React is extended with Flux, Redux, React Native, etc. which helps us to create good-looking UI.

Useful Git commands for common tasks

Mohit Kala — Tue, 10 May 2022 14:27:26 +0000

1)Git Clone

Git Clone Is A Command For Downloading Existing Source Code From A Git Repository (Like Azure DevOps, GitHub)

git clone “repository url” -b “branch name”

2) Git Branch

Branches Are Highly Important In The Git World. By Using It, Developers Are Able To Work In Parallel On The Same Project.

i) Creating A New Branch:
git branch “branch-name”

ii) To Push The New Branch
git push -u “remote” “branch-name”

iii) Viewing Branches:
git branch or git branch — list

iv) Deleting Branch
git branch -d “branch name”

3) Git Commit

Most-Used Command Of Git. Once We Reach A Certain Point In Development, We Want To Save Our Changes (Maybe After A Specific Task Or Issue).
git commit -m “commit message”

4) Git Push

After Committing Your Changes, The Next Thing You Want To Do Is Send Your Changes To The Remote Server. Git Push Uploads Your Commits To The Remote Repository.
git push “remote” “branch-name”

5) Git Status
The Git Status Command Gives Us All The Necessary Information About The Current Branch.
git status

6) Git Diff

You can use this command to see the unstaged changes on the current branch.

git diff — staged

7) Git Add

This is the command you need to use to stage changed files. You can stage individual files

git add “file path”

for all files
**
git add**

DEV Community: Mohit Kala

React Introduction

Hello, world this is React !

Useful Git commands for common tasks