Modern React From The Beginning: Arrow Functions And Object Destructuring

Episodes

In the last episode we’ve split up the code of our React sample application in two components: App component and CoursesList component. This has helped us to bring more structure into our project. To build a modern React application in this part we’re going to introduce more advanced concepts of JavaScript in our React application: we’ll make use of arrow functions and object destructuring.

What Are Arrow Functions

JavaScript arrow functions makes use of the fat arrow (=>) syntax to define functions. From the traditional way of declaring functions in JavaScript:

function () { ... }

You can move on and use the syntax you can see in the following:

const () => { ... }

By introducing arrow functions you’re able to come to a cleaner concise syntax and more intuitive scoping and this binding.

The arrow function is basically an anonymous function which accepts a fixed number or arguments, and operates in the context of the enclosing scope.

Let’s make use of arrow functions in our existing React application step by step …

Change Implementation To Make Use Of Arrow Functions

To change our existing implementation to make use of arrow functions we’ll start in App.js and change the code of the App function to the following:

const App = () => {
  return (
    <div>
      <h1>List of Courses</h1>
      <hr />
      <CoursesList courses={courses} />
    </div>
  );
}

As you can see the function keyword is not used anymore. Instead the App function is defined by using the arrow function syntax.

The same change can be made in CoursesList.js:

const CoursesList = (props) =>  {
    return props.courses.map(function(course) {
      return (
        <div key={course.id}>
          <span>
            <a href={course.url}><h4>{course.title}</h4></a>
          </span>
          <span>by <strong>{course.author}</strong></span>
          <span>| Video Hours: {course.hours_video}</span>
          <span>| Number of Lectures: {course.number_of_lectures}</span>
          <span>| Rating: {course.rating}</span>
          <br/><br/>
        </div>
      );
    }); 
  }

There is one main difference: CourseList components needs to access it’s properties therefore the method definition has one parameter: props. This parameter is defined in the arrow function syntax as well.

Arrow functions can not only be used to define a component. Arrow functions can also be used inside of components. Let’s replace the function which is passed into the call of props.courses.map with an arrow function:

const CoursesList = (props) =>  {
    return props.courses.map(course => {
      return (
        <div key={course.id}>
          <span>
            <a href={course.url}><h4>{course.title}</h4></a>
          </span>
          <span>by <strong>{course.author}</strong></span>
          <span>| Video Hours: {course.hours_video}</span>
          <span>| Number of Lectures: {course.number_of_lectures}</span>
          <span>| Rating: {course.rating}</span>
          <br/><br/>
        </div>
      );
    }); 
  }

What Is Object Destructuring

Object destructuring is another core ES6 feature will helps you to further streamline your React codebase. By using object destructuring we’re able to extract properties from an object (multiple at a time) and assign it directly to new variables.

Change Implementation To Make Use Of Object Destructuring

Let’s use object destructuring within the CoursesList implementation:

const CoursesList = ({courses}) =>  {
    return courses.map(course => {
      return (
        <div key={course.id}>
          <span>
            <a href={course.url}><h4>{course.title}</h4></a>
          </span>
          <span>by <strong>{course.author}</strong></span>
          <span>| Video Hours: {course.hours_video}</span>
          <span>| Number of Lectures: {course.number_of_lectures}</span>
          <span>| Rating: {course.rating}</span>
          <br/><br/>
        </div>
      );
    }); 
  }

Here you can see that the function declaration changed. Instead of just passing in the props argument we’re using object destructuring to pull out the courses property value and at the same time makes it available as a new courses variable inside the function. This is achieved by using curly braces and listing the name of the properties (in our case it’s just the property courses) we’d like to extract.

When now accessing the courses array inside the function we’re able to not access it via props.courses but instead just use courses.

What’s Next

In the next episode we’ll learn more about React event handling. Therefore we’re going to extend our sample application to include some user input element. By adding corresponding event handler functions we’ll then be able to respond to user input in our app.

#reactjs #web-development #javascript

What is GEEK

Buddha Community

Modern React From The Beginning: Arrow Functions And Object Destructuring
Arvel  Parker

Arvel Parker

1591611780

How to Find Ulimit For user on Linux

How can I find the correct ulimit values for a user account or process on Linux systems?

For proper operation, we must ensure that the correct ulimit values set after installing various software. The Linux system provides means of restricting the number of resources that can be used. Limits set for each Linux user account. However, system limits are applied separately to each process that is running for that user too. For example, if certain thresholds are too low, the system might not be able to server web pages using Nginx/Apache or PHP/Python app. System resource limits viewed or set with the NA command. Let us see how to use the ulimit that provides control over the resources available to the shell and processes.

#[object object] #[object object] #[object object] #[object object] #[object object] #[object object] #[object object] #[object object] #[object object] #[object object]

MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS

We are going to build a full stack Todo App using the MEAN (MongoDB, ExpressJS, AngularJS and NodeJS). This is the last part of three-post series tutorial.

MEAN Stack tutorial series:

AngularJS tutorial for beginners (Part I)
Creating RESTful APIs with NodeJS and MongoDB Tutorial (Part II)
MEAN Stack Tutorial: MongoDB, ExpressJS, AngularJS and NodeJS (Part III) 👈 you are here
Before completing the app, let’s cover some background about the this stack. If you rather jump to the hands-on part click here to get started.

#[object object] #[object object] #[object object] #[object object] #[object object] #[object object] #[object object] #[object object]

Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

systemctl List All Failed Units/Services on Linux

Is there is a command to print list all failed units or services when using systemd on Linux? Can you tell me the systemctl command to list all failed services on Linux?

This quick tutorial explains how to find/list all failed systemd services/units on Linux operating systems using the systemctl command.

#[object object] #[object object] #[object object] #[object object] #[object object] #[object object] #[object object]

Creating RESTful APIs with NodeJS and MongoDB Tutorial

Welcome to this tutorial about RESTful API using Node.js (Express.js) and MongoDB (mongoose)! We are going to learn how to install and use each component individually and then proceed to create a RESTful API.

MEAN Stack tutorial series:

AngularJS tutorial for beginners (Part I)
Creating RESTful APIs with NodeJS and MongoDB Tutorial (Part II) 👈 you are here
MEAN Stack Tutorial: MongoDB, ExpressJS, AngularJS and NodeJS (Part III)

#[object object] #[object object] #[object object] #[object object] #[object object] #[object object] #[object object]