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;