マガジンのカバー画像

Reactでカウンターアプリを作成しよう

8
Mac上に仮想環境を構築して、その上にReactのアプリを構築していきます。React.js、Babelの簡単な使い方や、メリットを見ていきます。
運営しているクリエイター

記事一覧

Reactでカウンターアプリを作成する

作成するアプリ● +1をクリックしたら、1がプラスされる。 ● -1をクリックしたら、1がマイナ…

jyouji1979
6年前
1

仮想環境でJavaScriptの開発環境を構築

仮想環境で環境を構築しましょう MacOSの中ですMacでターミナルを開いて下さい。 ターミナル…

jyouji1979
6年前
2

Reactで「Hello World」をしよう

JSXとBabelについてブラウザのデベロッパーツールで、何らかの文字を表示させたいと思います。…

jyouji1979
6年前
2

Reactで簡単なHTMLを表示してみよう

HTMLを表示してみようReactDOMに渡すタグは、一つしか渡せません。そのため、<div>タグでくく…

jyouji1979
6年前
3

Reactでカウンターアプリのhtmlを作成しよう

まずはHTMLを作成します。(src/app.js) let count=0;let template = ( <div> <h1>Count: …

jyouji1979
6年前
2

Reactでカウンターアプリの中身を実装していこう

countの値を増減させましょう src/app.js let count=0;const addOne = () =>; { count ++; c…

jyouji1979
6年前
2

JavaScriptのクラスを勉強して、React.Componentを使ってみよう

クラスの基本を勉強しよう前回までの実装で気になったところは、値を変更するたびにrenderCounterApp関数を呼び出さなければいけないところです。そこを修正していきたいのですが、その前にjavascriptのクラスの概念を勉強しましょう。 クラスとは設計図のようなもので、ポイントは以下の通りです。 ● classというキーワードで宣言 ● newというキーワードで、クラスを使う。 ● constructorはnewが使われた時に、実行される。 例として、Anima

React.Componentでクラスの状態を管理しよう

前回、作成したクラスをもとにカウンターの中身を実装していきましょう。 カウントの中身を実…

jyouji1979
6年前
2