Binding functions in React

Posted by & filed under React Components, React Fundamentals.

1 minute read There are two ways you can bind functions in React: one option is inside the constructor of the class component the other is works implicitly by using ES6 arrow functions class MyComponent extends React.Component { constructor(props) { super(props) } handleClick = () => { … } } or class MyComponent extends React.Component { constructor(props) {… Read more »

React component state

Posted by & filed under React Components, React Fundamentals, React State.

2 minutes read React state meaning State in React represents the components own local state. The state cannot be accessed and modified outside the component and can only be used inside the component. Adding state to a component Until recently when React Hooks were introduced there was no way of using state with function components. The new React… Read more »

React Conditional Rendering Techniques & Best Practices

Posted by & filed under React Components, React Fundamentals.

2 minutes read Rendering React components is very important since it can make your app behave faster or slower, depending on your approach for rendering components, re-rendering components based on condition or state/props change. Here are a few methods you can use to render React components: If Else conditional operator import React from ‘react’; import ReactDOM from ‘react-dom’;… Read more »

React Components Explained

Posted by & filed under React Components, React Fundamentals.

1 minute read Components are JavaScript functions or classes that let you split the UI in reusable pieces. Components accept arbitrary input named props and return React elements which describe what should appear on the screen. React component types Function components The simplest way to define a component is by writing a function that accepts a single props… Read more »