From a29efd5e374b58d4feb33381527d3295c01318fe Mon Sep 17 00:00:00 2001 From: SuzukiKatsuma <71871253+SuzukiKatsuma@users.noreply.github.com> Date: Sat, 19 Feb 2022 15:29:37 +0900 Subject: React tutorials の一部翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 日本語に翻訳されたページがある節のみ翻訳 --- .../client-side_javascript_frameworks/index.html | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html index 85d4cc429a..9893563a45 100644 --- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -45,21 +45,22 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.
-

React tutorials

+

React チュートリアル

-

Note: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.

+

注記: React チュートリアルは React/ReactDOM 16.13.1 と create-react-app 3.4.1 で、2020年5月に動作確認を行いました。

-

If you need to check your code against our version, you can find a finished version of the sample React app code in our todo-react repository. For a running live version, see https://mdn.github.io/todo-react-build/.

+

もし、あなたのコードとサンプルのバージョンとを確認する必要があれば、todo-react repository で完成版を見ることができます。 +実行中のライブバージョンについては、https://mdn.github.io/todo-react-build/ から確認ができます。

-
1. Getting started with React
-
In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.
-
2. Beginning our React todo list
-
Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic App component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
-
3. Componentizing our React app
-
At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.
+
1. React をはじめる
+
この記事では React のはじめかたを説明します。React の背景と使い方について説明し、ローカル環境で基本的な React ツールチェーンを設定します。また、シンプルな基本アプリを作成して、React がどのようなプロセスで機能するのかを学んでいきます。
+
2. React ToDo リストをはじめる
+
例えば、React でアイディアを検証するためにアプリを試作してみることになったとします(いわゆる、Proof of Concept - 概念実証)。ユーザーが作業したいタスクを追加、編集、削除することができ、また、タスクを削除せずに完了とすることができるアプリです。この記事では、基本的な App コンポーネントの構造とスタイルを整え、後から追加する個々のコンポーネントの定義とインタラクティブな機能の準備を行っていきます。
+
3. React アプリのコンポーネント化
+
この時点では、アプリは一枚岩です。アプリに何かをさせる前に、管理しやすく、記述しやすいコンポーネントに分解する必要があります。React には、何がコンポーネントで何がコンポーネントでないかという難しいルールはありません。それはあなた次第なのです！この記事では、アプリをコンポーネントに分解するための賢明な方法を紹介します。
4. React interactivity: Events and state
With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.
5. React interactivity: Editing, filtering, conditional rendering
-- cgit v1.2.3-54-g00ecf