Hands-On React

Purushoth Anandaraja
Jan 31 · 4 min read

Happy New Year 2021!!!. It has been a great journey from the prevailing global pandemic. Hope you all are safe and may this year be more productive than the previous one. In this article, I would like to share my knowledge on React which I started to learn when I was at home during the quarantine days.

What is React?

React is a JavaScript library that you can use to create user interfaces. It was created at Facebook and open-sourced in March 2013. Today React became more popular such that companies like Twitter, Netflix, and Microsoft and many more.

As a student, it is really fun to try to React to build a website or UI for a web application because of its simple architecture in them during implementation. React consists of Components, Elements, Props, States and lifeCycle. There are subparts such as React events and React JSX which will be discussed in this article.

React Components

Components are reusable pieces of code that work similarly to a javascript function such that it returns something as a result of calling it. In React there two types components such as Class components and Functional components.

Class Components- The component is created as a class which extends from React main classes. when creating class components the name of the component should start with upper case letter.

class User extends React.Component {
render() {
return <h1>Hi, I am a User!</h1>;
}
}

To use this class component in an HTML code we can call it by using the syntax as <User />

ReactDOM.render(<User />, document.getElementById('root'));

Function Component- This component is created as a function and also behaves like a class component. It can also be returned into an HTML code like the similar way the class components are called.

function User() {
return <h1>Hi, I am also a User!</h1>;
}

Props

Props are like arguments that get passed into React components. It also act as an attribute in HTML. The props can be used in a lot of ways rather than arguments like pass data, used in a constructor.

class User extends React.Component {
render() {
return <h1>I am a {this.props.name}!</h1>;
}
}

State

A state is an object which stores a property value which is declared in a component. The state object is initialized in a constructor and can more than one property. we can change the property of a state in a component.

class User extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "Ford",
Job: "Accountant",

};
}
changeJob = () => {
this.setState({job: "Teacher"});
}
render() {
return (
<div>
<h1>Hi I'm {this.state.name}</h1>
<p>
my job is {this.state.job}
</p>
</div>
);
}
}

Lifecycle

Lifecycles are used to free up resources when the components are finished completing their actions. there are three phases in lifecycles which are Mounting, Updating, Unmounting. Theses phases are just named to get a basic understanding, click here to know more.

Mounting- In react there are four default methods to mount a component to a DOM. They are constructor(), getDerivedStateFromProps(), render(), componentDidMount().

Updating- in the updating state, there are five default methods to update the components in the DOM. They are getDerivedStateFromProps(), shouldComponentUpdate() ,render(), getSnapshotBeforeUpdate() componentDidUpdate()

Unmounting- The final state is when the component is removed from a DOM the default method in React is called. componentWillUnmount()

Elements

React elements describes what we see on the screen. The element outputs the component output in the browser by many methods such as calling the id, name etc.

React Events

Events are used for user-based actions in the web application like click, change, mouseover and etc. When writing event they should be written in camelcase. In some instances, event handlers can be passed down arguments instead of creating separate components. The below example describes an example of passing an argument to an event and the second statement explains the same process with the use of ‘bind’ keyword.

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

React JSX

JSX stands for javascript XML where it is used to insert HTML code in React. The main use of XML in react is, it is easy to add HTML elements in Javascript and place in the DOM without createElement() or appendChild().

I guess that summarizes my article which consists of main concepts in React but there are many other important and advanced concepts like Lists and keys, Forms and Rendering, Hooks etc. Also, there are many version of React like NEXT.js, Gatsby, React Native, Preact and React 360 use for multiple purposes developing multiverse web application. The best source of learning React as an absolute beginner is the React.org documentation page and Mozilla page for react which I used to learn. There are many solutions like W3Schools and LinkedIn learning to learn them at your own level and I encourage to check out to learn this amazing tool which fascinated me when I learnt. Cheers!!!

CodeX

Everything connected with Tech & Code