10 Important Methods About React

So Lets Get Started.

…………………

1. What Is React ?

React is a JavaScript library that aims to simplify development of visual interfaces. It's created by Facebook. React can be used as a base in the development of single-page or mobile applications. React is thin, and it’s extremely easy to mix it with other 3rd party libraries.

2. Virtual DOM

The DOM (Document Object Model) is a Tree representation of the page, starting from the <html> tag, going down into every child, which are called nodes. It’s kept in the browser memory, and directly linked to what you see in a page. This works fine for simple, static websites, but for dynamic websites that involve heavy user interaction it can become a problem. Since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh. If a developer uses JSX to manipulate and update its DOM, React JS creates something called a Virtual DOM.

3. JSX in React

JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together. In React, we are allowed to use normal JavaScript expressions with JSX. JSX code looks a lot like HTML. It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript. It makes it easier for us to create templates.

Example :

import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
<div>
<h1>Hello World.</h1>
</div>
);
ReactDOM.render(myelement, document.getElementById('root'));

4. Components

React components let you break up the user interface into separate pieces that can then be reused and handled independently. Components come in two types, Class components and Functional components. Here is the example of Functional components and Class components.

Example :

Functional Components are functions.

const Greeting = () => <h1>Say Hello</h1>;

Class components are ES6 classes.

class Greeting extends React.Component {
render(){
return <h1>Say Hello</h1>;
}
}

5. State

State is a JavaScript object that stores a component’s dynamic data, and it enables a component to keep track of changes between renders. React components have a built-in state object. State can be updated and whenever it is changed, React re-renders that component.

Example :

class Greeting extends React.Component {
state = {
name: 'Nisar'
}
}
render() {
return <h1>Hello, my name is { this.state.name }</h1>;
}
}

6. Props

Props is short for properties, and they are used to passing data between React components. Starting from the top component, every child component gets its props from the parent. When we need immutable data in our component, we can just add props to reactDOM.render() function in main.js and use it inside our component.

Example :

app.jsx

import React from 'react';

class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App
headerProp = "Header from props..."
contentProp = "Content from props..."/>,
document.getElementById('app'));

export default App;

7. Events

React provides an easy way to manage events. Prepare to say goodbye to addEventListener. React events are written in camelCase syntax, onClick instead of onclick.

Example :

const CurrencySwitcher = props => {
return (
<button onClick={props.handleChangeCurrency}>
Current currency is {props.currency}. Change it!
</button>
)
}

8. Event Handlers

Without event handlers in React as just in any other framework. Event handling is very important as it ensures React keeps track of every action performed by the user. Handling events with React elements is similar to handling events on DOM elements, with a few minor exceptions.

Example :

import React from 'react';function App() {function handleClick() {console.log('Button click ...');}return (<div><button type="button" onClick={handleClick}>Event Handler</button></div>);}

9. Conditional Rendaring

Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if, and let React update the UI to match them. We use an if with our condition and return the element to be rendered. There’s more than one way to use conditional rendering in React.

Example :

const users = [{ id: '1', firstName: 'Tanshin', lastName: 'Ahmad' },{ id: '2', firstName: 'Rafsan', lastName: 'Rana' },];function App() {return (<div><h1>Hello Conditional Rendering</h1><List list={users} /></div>);}function List({ list }) {if (!list) {return null;}return (<ul>{list.map(item => (<Item key={item.id} item={item} />))}</ul>);
}
function Item({ item }) {return (<li>{item.firstName} {item.lastName}</li>);
}

10. Form in React

Forms are a crucial component of React web applications. They allow users to directly input and submit data in components ranging from a login screen to a checkout page.

Example :

import React from 'react';
import './App.css';

function App() {
const handleSubmit = event => {
event.preventDefault();
alert('You have submitted the form.')
}

return(
<div className="wrapper">
<form onSubmit={handleSubmit}>
<fieldset>
<label>
<p>Name</p>
<input name="name" />
</label>
</fieldset>
<button type="submit">Submit</button>
</form>
</div>
)
}

export default App;

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why you should stay away from Angular CLI

Dynamic Height and Offset for Flatlist in React Native

React native mobile app

JavaScript/TypeScript Array Filter

How to Make a Fake Chat Bot with React

How to Use & Select ADX indicator | ADX Indicator Explained in Hindi

https://youtube.com/watch?v=zrzI3xGYBTQ&feature=share

Testing JavaScript performance with Benchmark.js

My name is TypeScript, and I’m the strictest tool on Earth.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abrar Abir

Abrar Abir

More from Medium

Ionic 6 is now Available

“BEST BUY ” Website Clone Project | Masai School,

CS371P Spring 2022: Lilia Li Blog #4

The Best Website For Rep Sneakers On 2022