すぐできる!動かす React JS サンプル講座
4.7 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
21 students enrolled
Wishlisted Wishlist

Please confirm that you want to add すぐできる!動かす React JS サンプル講座 to your Wishlist.

Add to Wishlist

すぐできる!動かす React JS サンプル講座

jQuery は使ったことがあるけれど、React JS も使えるようになりたいという方を対象にしたコースです。動く React サンプルの作成ついてご紹介します。
4.7 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
21 students enrolled
Created by 和香奈 吉澤
Last updated 7/2017
Japanese
Current price: $10 Original price: $40 Discount: 75% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • React.js の基本を習得できる
  • React.js アプリケーションを作成できるようになる
View Curriculum
Requirements
  • Node 環境の構築
  • MacOS などの Unix 環境の準備
  • JavaScript や HTML の基礎
Description

私は最近、仕事で jQuery を使っている方から、「jQuery だけでなく React JS も使えるようになったほうがいいのかな。」という相談をされるようになりました。  


JavaScript で有名なライブラリと言えば jQuery ですよね。あくまで私のイメージですが、jQuery を使った経験がある方は、React JS を試せばすぐ業務に落とし込めるはずです。  


しかし、DOM を直接変更する jQuery と React JS は基本的な動作が異なりますし、React JS の環境構築について調べると、色々な情報が多すぎるため、どこから手を付けていいかよくわからないという話をよく聞きます。  

この動画コースでは、jQuery を普段使われているくらいのスキルの方向けに、  React JS の一番シンプルな環境構築や導入方法をはじめとして、API を Ajax 経由で利用して React JS でレンダリングするサンプルを作成します。 

コースの環境として node、npm コマンドを実行できるようにしておいてください。最初に node 環境が無い場合についてもご紹介しますが、npm コマンドを使用した方が便利です。

コース内では JavaScript の基本的な構文しか使用しないので、いままで JavaScript フレームワークをあまり使ったことがない人も、心配しなくていいですよ。  

ただ、HTML や CSS、 JavaScript の基本的な書き方や、React JS のリファレンスには載っているけれど、普段あまり使わないような細かい内容については触れませんので注意してください。

まずは動作する React JS のサンプルを作成し、React JS の魅力を体験していただければと考えています。 

もちろんコース試聴後には、React JS の基本をしっかり扱えるようになり、業務で使うにも十分なレベルになると思います。 

頑張っていきましょう!

Who is the target audience?
  • これから React.js を始めたい方
  • jQuery だけでなく、React.js 勉強をしたい方
Students Who Viewed This Course Also Viewed
Curriculum For This Course
23 Lectures
02:06:29
+
React の基本
5 Lectures 20:14


動画で使用するindex.htmlのテンプレートです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
  </head>
  <body>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.19.0/babel.min.js"></script>
  </body>
</html>

このテンプレートをindex.htmlというファイル名で保存してください。

ソースはbodyタグの中に書いていきます。

<body>
 <!-- ここにReactJSのソースを書いていきます。 -->
</body>

HelloWorld!表示用のコードを追加します。

  <div id="machine">
  </div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, World!</h1>,
      document.getElementById('machine')
    );
  </script>

最終的なコードはこのようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
  </head>
  <body>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.19.0/babel.min.js"></script>

    <div id="machine">
    </div>

    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, World!</h1>,
        document.getElementById('machine')
      );
    </script>
  </body>
</html>
Preview 05:25


CreateReactApp に React コンポーネントを追加
05:43

React.js の基礎
2 questions
+
JSX
6 Lectures 30:26
JSX とは
02:16

JSX の要素は1つ
01:59

JSX 内での JavaScript 表記
07:59

JSX での HTML 属性
08:45

JSX でのコメント
03:49

JSX で HTMLをエスケープせず表示
05:38
+
ReactComponent
7 Lectures 32:50
ReactComponent とは
02:14

FunctionalComponent と ClassComponent
04:52

props について
02:46

Component から Component の呼び出し
03:32

props のデータチェック
05:10

state に setState でデータを保存
03:55

Form の値を state に保存
10:21
+
API を利用するサンプル
5 Lectures 42:59
REST クライアントの Postman を準備
03:09

JsonServer をローカルにたてる
06:54

API が返した Json を React.js で表示する
09:14

API へ POST した結果を表示その1
16:11

API へ POST した結果を表示その2
07:31
About the Instructor
和香奈 吉澤
4.7 Average rating
2 Reviews
21 Students
1 Course
株式会社CAMON.TOKYO CEO 兼 CTO

日本とベトナムの架け橋になるために株式会社CAMON.TOKYOを創業しました。

いままでに、SIer や ゲーム会社、ニュース配信企業など様々な業種で、エンジニアとして経験を積みました。

携わった分野は PHP・Python・JavaScript・AWS・Dockerなどフロントからインフラまでを担当し様々な開発案件に携わっています。