Category Archives: REACT

7 DIFFERENT WAYS OF CONDITIONAL RENDERING IN REACT

7 different ways of conditional rendering in React

A conditional render in React is no wizardry. In JSX – the syntax extension used for React – the user can use pure JavaScript. In JavaScript the user should be familiar with if-else or switch case statements, because they are the one of the vital pillars for learning React. The user can use these in JSX as well, since JSX only mixes HTML and JavaScript.

But you might ask, what is conditional rendering in React? In a conditional render a component decides based on one or several conditions which elements it will return. This article aims to be an in-depth list of options for conditional renderings in React. If you know more alternatives, feel free to contribute.

1. if else in React:

function List({ list }) {
if (!list) {
return null;
}

return (
<div>
{list.map(item => <ListItem item={item} />)}
</div>

A component that returns null will render nil. However, the user wants to show a text when a list is empty:

function List({ list }) {
if (!list) {
return null;
}

if (!list.length) {
return <p>Sorry, the list is empty.</p>;
} else {
return (
<div>
{list.map(item => <ListItem item={item} />)}
</div>

2.Ternary operation in React:

The user can make their if-else statement crisper by using a ternary operation. );

condition ? expr1 : expr2

3. Logical && operator in React:

It happens often when the user want to render either an element or nothing. For instance, the user could have a LoadingIndicator component that returns a loading text or nothing. The user can do it in JSX with an if statement or ternary operation.

function LoadingIndicator({ isLoading }) {
if (isLoading) {
return (
<div>
<p>Loading…</p>
</div>
);
} else {
return null;
}
}

function LoadingIndicator({ isLoading }) {
return (
<div>
{ isLoading
? <p>Loading…</p>
: null
}
</div>
);
}

4. Conditional Rendering with enums:

In JavaScript an object can be used as an enum when the object is used as a map of key value pairs.

const ENUM = {
a: ‘1’,
b: ‘2’,
c: ‘3’,

5. Multi-Level Conditional Rendering in React:

How about nested conditional renderings? Yes, it is possible. For example, let’s have a look at the List component that can either show a list, an empty text or nothing.

function List({ list }) {
const isNull = !list;
const isEmpty = !isNull && !list.length;
return (
<div>
{ isNull
? null
: ( isEmpty
? <p>Sorry, the list is empty.</p>
: <div>{list.map(item => <ListItem item={item} />)}</div>
)}
</div>
);
// Usage

<List list={null} /> // <div></div>
<List list={[]} /> // <div><p>Sorry, the list is empty.</p></div>
<List list={[‘a’, ‘b’, ‘c’]} /> // <div><div>a</div><div>b</div><div>c</div><div>
};

6. External Templating Components:

There exist external solutions to pact with conditional renderings. They add control components to allow conditional renderings without JavaScript in JSX. Then it is not question anymore on how to use if else in React.

<Choose>
<When condition={isLoading}>
<div><p>Loading…</p></div>
</When>
<Otherwise>
<div>{list.map(item => <ListItem item={item} />)}</div>
</Otherwise>
</Choose>

7. Higher Order Components:

Higher order components are perfect match for conditional rendering in React. Higher order components can have multiple use cases. Yet one use case could be used to change the look of a component. To make the use case more precise: it can apply a conditional rendering for a component. Let’s have a look at a higher order components that either shows a loading indicator or a desired component.

// HOC declaration
function withLoadingIndicator(Component) {
return function EnhancedComponent({ isLoading, …props }) {
if (!isLoading) {
return <Component { …props } />;
}
return <div><p>Loading…</p></div>;
};

// Usage
const ListWithLoadingIndicator = withLoadingIndicator(List);

<ListWithLoadingIndicator
isLoading={props.isLoading}
list={props.list}
/>

COMPONENT INTERACTION IN REACT

Component Interaction in React

Component Interaction in React

In React JS, there is often a need to pass data from one component to another. If you are passing data from somewhere in a component, to somewhere else inside the same component, this can be done through the state. So, let’s dive deep in and know more about component interaction in React.

WHAT IS THE STATE?

The heart of every React component is its “state”, an object that defines how that component renders and performs. In other words, “state” is what allows the user to create components that are dynamic and interactive.

Assume of the state as the difference between water, ice, and vapor. It is the same object, but subject on conditions, it can behave differently. That’s the same way to use state within components. The user can change the way objects appear, or interact by changing the state of those objects within a component.

HOW TO CHANGE STATE IN A COMPONENT?
Generally, the user would need to declare the state after setting the constructor.
class component_A extends Component {
constructor() {
super();
this.state = {
data: [],
};
}

In this case, we are outlining the state of data. We have defined it here as an empty array. We have to use an empty object, or empty quotes, depending on the data type we wanted to change the state of. Then when we are ready to change the state, we would simply use “this.setState.” With our instance above, it might look like this:

this.setState({data: data});

Here the user has two components, and the user needs to pass the data from one component to an other. The user would not be able to use state. The state can only be transferred within the component where it was created. Instead, the user can use props or properties.

Let’s say, the user has component_A, with files nested inside of it, and then it’s child components, component_B, and component_C. It is very probable that component_A would have data that the user would need to access in component_C. How can the user access that, or pass the data from component_A to component_C? Ultimately, what the user has to do, is;

If the user wants to pass the property of color from the parent component to one of the child components. The user can pass prop using “this” the same way set the state in a component earlier. In that instance, the state could then be used and passed throughout the component.

Passing data from parent to child components is little trickier, in that, the user cannot pass data in an unbroken chain to other components. In the above instance, the user actually needs to pass the data, in this case, {this.props.color} from component_A to component_B and then to component_C.

HOW CAN WE EMBED TWO OR MORE COMPONENTS INTO ONE IN REACT?

How can we embed two or more components into one in React?

We can embed components into one in the following way:

1 class MyComponent extends React.Component{

2 render(){

3 return(

4 <div>

5 <h1>Hello</h1>

6 <Header/>

7 </div>

8 );

9 }

10 }

11 class Header extends React.Component{

12 render(){

13 return <h1>Header Component</h1>

14 };

15 }

16 ReactDOM.render(

17 <MyComponent/>, document.getElementById(‘content’)

18 );

WHY DO WE NEED A REACT ROUTER?

Why Do We Need A React Router?

Having a single page application limited to single view does not do justice to many popular social media websites like Facebook, Instagram which render multiple views using React today. We need to move ahead and learn how to display multiple views in our single page application.

For example, we are used to seeing a home page which displays welcome message and related content. The site’s background details can be found on the ‘About Us’ page, a list of users and their details are listed on a different page and there might be various other pages to include several different views.

WHICH IS BETTER, IONIC OR REACT NATIVE?

Which is better, Ionic or React Native?

Ionic is a Web-based framework that exposes the no-UI Native APIs (e.g., location service) to Javascript. React Native is a native based framework that provides binding of Javascript and native code (including UI).

The main difference between Ionic and RN is the how UI is rendered. In Ionic, it is by a WebView like a common web page, while in RN, it is drawn with native frames. Thus, RN based Apps are more responsive as they are faster.

In a project manager’s view, RN is more flexible as self-defined module and UI components are easier to create, but it requires more native knowledge from developers. Ionic is faster as existing web UI components can be largely reused. So Ionic is a less expensive option compared to React Native, but it is more limited in both performance and flexibility.

WHAT IS VIRTUAL DOM IN REACT?

What is virtual DOM in react?

React has a Virtual DOM object, for each DOM object which acts as a representation for that original object. While updating DOM virtual DOM acts as the middle layer and only updates real DOM when there are any changes to virtual DOM. In that case react will update only the updated components and not the entire DOM.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

REACT FOR MOBILE APP

React For Mobile App

React_For_Mobile_App

React is a JavaScript library used for building user interfaces. Open-sourced by Facebook in 2013, it has been met with excitement from developers. Large companies such as Netflix, Yahoo!, GitHub, and Codecademy have included their likes. Users started praising React for its performance and flexibility, as-well-as its declarative, component-based approach for building user interfaces.

On January 2015, the React has announced a new project called React Native. React Native uses React to target the platforms other than web browsers, such as iOS and Android, by implementing a bridge between JavaScript and the host platform. It promises the web developers the ability to write real, natively rendering mobile applications, all from the comfort of JavaScript which the developers already know. How is it possible? And more importantly, how can one take advantage of it? In this article, we will be covering the basics of React Native and its importance for mobile apps.

How React Native works?

The idea of writing mobile applications in JavaScript feels little fluky. How is it possible to use React in a mobile environment? We will first need to recall one of the Reacts features, the Virtual DOM, and need to understand how it relates to React Native for mobile.

The Virtual DOM in React

In React, the virtual DOM acts as a layer between the developer’s description of things ought to look and work done actually to render them onto the page. To render interactive user interfaces in a browser, a developer must need to edit the browser’s Document Object Model(DOM). This process is a little bit expensive, and excessive writes to the DOM leads to the performance errors. Rather than directly rendering changes on the page, React computes the necessary changes by using an in-memory version of DOM.

Extending the Virtual DOM

The Virtual DOM certainly has performance benefits, but its real potential lies in the power of its abstraction. What if React could render to a target other than the browser DOM? Why should the React be limited to a browser? React “understands” how your application supposed to look like. The conversion of that ideal to actual HTML elements on the page should be replaced by some other step. During the first two years of React’s public existence, some spectators noticed this intriguing possibility. For an instance, Netflix modified React, so that they could render a huge variety of platforms including televisions and DVD players. Then at React conference, Facebook has announced a new library called React Native that does same for iOS and android, allowing React to render natively on mobile platforms.

What does it mean to render natively? In React for the web, this means it renders to browser DOM. With React Native, native rendering means, it renders using native APIs for creating views.

WHY USE REACT NATIVE?

One of the first thing people ask after learning React Native is, how it relates to standard, native platform development. How should the user make the decision of using React Native or not?

Whether to use React Native or not depends on the user individual circumstances and background knowledge. The developers who are comfortable working with JavaScript for the web, and React specifically, then React Native would be exciting. React Native can leverage your existing skillset to turn you into a mobile developer without requiring a significant investment on platform-specific languages and development paradigms. On the other hand, if you are already accustomed to traditional mobile development, then React Native’s advantages are less apparently. Let’s see some of the benefits and considerations of React Native.

BENEFITS

– At the beginning, Facebook only developed React Native to support iOS. However, with its recent support on Android operating system, the library can now render mobile UIs for both the platforms.

– If a developer knows JavaScript, then React Native is a quick pick-up, allowing any front-end developer to be a mobile developer on the spot. There is no need of learning iOS’s Swift or Java for Android.

You need to know JavaScript, some native UI elements, platform APIs, and any platform-specific design patterns, and you are ready to go-with-it.

React is still new but it’s maturing quickly and Facebook has stated its plans to continue investing its growth.

React Native is all about UI: React Native is focused completely on building a mobile UI. Compared to JavaScript frameworks like AngularJS or Meteor JS, React Native is UI-focused, making it JavaScript library than a framework.

- It offers third-party plugin compatibility and less memory usage: Third-party plugins means a user need not rely on a WebView for certain functions. For instance, if you are adding Google maps functionality to your app, React Native app let’s the user link the plug-in with a native module, so, the user can link-up the map with the device functions like zoom, rotate, and the compass by using less memory.