Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now
Build the future of communications.
Start building for free
  • By Shiori Yamazaki
    React:関数コンポーネントとクラスコンポーネントの違い react-choose-functional-components-jp

    この記事はShiori Yamazakiこちら(英語)で執筆した記事を日本語化したものです。

    React:関数コンポーネントとクラスコンポーネントの違い

    Reactの世界では、Reactコンポーネントの記述方法が2つあります。関数を使用する方法と、クラスを使用する方法です。最近では関数コンポーネントの使用が増えていますが、その理由はなぜでしょうか。

    この記事では、関数コンポーネントとクラスコンポーネントの違いについて、それぞれのサンプルコードを使用しながら説明します。この記事を読めば、モダンReactをより深く理解できるようになるでしょう。

    JSXのレンダリング

    何よりも明確な違いは構文です。それぞれの名前が示すように、関数コンポーネントはJSXを返すプレーンなJavaScript関数で、クラスコンポーネントはReact.Componentを拡張するJavaScriptクラスです。こちらはrenderメソッドを含みます。少し分かりにくいかもしれないので、簡単な例を見てみましょう。

    import React from "react";
     
    const FunctionalComponent = () => {
     return <h1>Hello, world</h1>;
    };
    

    ご覧のとおり、関数コンポーネントはJSXを返す関数です。ES6で導入されたアロー関数について詳しくないという方は、この関数を使用しない以下の例をご覧ください。

    import React from "react" …
    Read More
  • By Shiori Yamazaki
    Comprendre la différence entre composants fonctionnels et composants de classe dans React difference composants react

    Il existe dans le monde de React deux façons d'écrire des composants React. L'une utilise une fonction, et l'autre une classe. Les composants fonctionnels sont devenus ces derniers temps de plus en plus populaires, mais comment l'expliquer ?

    Grâce à cet article expliquant pas à pas chacun d'eux à travers des exemples de code, vous comprendrez les différences entre composants fonctionnels et composants de classe et pourrez vous plonger dans le monde du React moderne !

    Produire le rendu d'éléments JSX

    Avant toute chose, la grande différence, c'est la syntaxe. Comme son nom l'indique, un composant fonctionnel n'est qu'une simple fonction JavaScript qui renvoie du JSX. Un composant de classe, pour sa part, est une classe JavaScript qui étend React.Component, laquelle comprend une méthode de rendu. Vous trouvez ça déroutant ? Prenons un exemple simple.

    import React from "react";
     
    const FunctionalComponent = () => {
     return <h1>Hello, world</h1>;
    }; …
    Read More
  • By Shiori Yamazaki
    Understanding Functional Components vs. Class Components in React header - Understanding Functional Components vs. Class Components in React

    In the world of React, there are two ways of writing a React component. One uses a function and the other uses a class. Recently functional components are becoming more and more popular, so why is that?

    This article will help you understand the differences between functional and class components by walking through each one with sample code so that you can dive into the world of modern React!

    Rendering JSX

    First of all, the clear difference is the syntax. Just like in their names, a functional component is just a plain JavaScript function that returns JSX. A class component is a JavaScript class that extends React.Component which has a render method. A bit confusing? Let’s take a look into a simple example.

    import React from "react";
     
    const FunctionalComponent = () => {
     return <h1>Hello, world</h1>;
    };
    

    As you can see, a functional component is a function that returns JSX. …

    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.