React props explained

Posted by & filed under React Fundamentals, React Props.

2 minutes read Props definition and role Usually we want the components to display dynamical data, not just static data. For that we need to pass that information to the components. Props represent the mechanism used by components to talk to each other. Props represent the short term from properties. The way to pass this down to the… Read more »

React component lifecycle

Posted by & filed under React Fundamentals, React Lifecycle.

6 minutes read Definition of component lifecycle The React component lifecycle represents the flow of events which a React component goes through during its lifetime. For more details about components types or an in-depth explanation of React components. Major changes to the React component lifecycle were added with ReactJS 16.3. Some lifecycle methods have been deprecated while new… Read more »

React Context API with Example

Posted by & filed under React Fundamentals.

2 minutes read React Context was introduced in React v0.16.3 and its main functionality is to pass data to child components without having to pass props at every level. Let’s have a look at a simple example of a page that uses 3 components and understand how we used to pass the data in the component tree before… Read more »

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 »

Presentational Components Vs. Container Components

Posted by & filed under React Fundamentals.

2 minutes read Presentational components Definition Presentational components are usually stateless components / components that do not manage state and are used for displaying data.Presentational components are usually children of container components. Characteristics of presentational components presentational components are stateless they receive the date to be displayed from the parent components Container components Definition Container components are usually… 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 elements explained

Posted by & filed under React Elements, React Fundamentals.

3 minutes read What are React elements? Elements are the smallest building blocks of any React app and describe what you want to see on the screen. In essence an element is a plain object describing a component instance or DOM node and its desired properties. What information do React elements contain? The elements contain only information related… 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 »