初心者でもできる！アプリ作成をしながらReactを習得（もくもく）2/3

/ 0 Comments / , /

今日ももくもく勉強会に参加しています。

TeamsのリンクはFacebookで探してください。

 

参考動画はこちら

 

環境構築は、非エンジニアの方にはハードルが高いと思いますので、ぜひ上のリンクにある動画を先に見ておきましょう。

今回は私もMacで構築しています。

空港でも確認しましたが、node.jsがインストールされているかどうかを確認するコマンドは　node -vでした。

私のMacBook Airでは、v18.6.0　でした。

node.jsは、サーバー環境で動くJavaScriptという解釈で進めていくとわかりやすいです。

Reactを触っていく上で大事なポイントとなりますので、ここをしっかり理解しておきましょう。

 

Create React App

node.jsがサーバー環境で動くJavaScriptという意味を理解した上で、次はリアクトアプリをサーバー上に作っていくという、何ともエンジニアらしい工程を楽しんでいきたいと思います。

ちなみにスクリプトの意味を理解しておく必要があるかと思いますので、下記参考にして頂けると幸いです。

・NPM START

 ローカルサーバーを起動して、Reactアプリを確認するためのコマンド

「ホットリロード（ファイル保存で自動的に更新する機能」に対応！（ブログ公開と同等の役割）

・NPM RUN BUILD

本番用ファイルを生成して、build（ディレクトリ）に出力するコマンド

src(sourc)とpublicのファイルをひとつにまとめる（バンドルの役割を持つ）

・NPM RUN EJECT

BabelやWebpackの設定を変えたい時に使う

・・・・

npm startを実行すると↑の画面が自動で出現します。

成功です！おめでとう♪

コンポーネントとは

見た目のと機能を持つUIを構築する部品類

分類すると、クラスコンポーネントと関数コンポーネントに分けることができる。

この2つの違いとは

実際にコードを書いていくとわかりますが、関数コンポーネントと呼ばれる Functional Componentの方が効率がいいです。

import React, {Component} from ‘react’;

class Button extends Component {
render() {
return /*ボタンがThemify拡張機能で自動的に赤になっています*/
   }
}

import React from ‘react’;

const Button = (props) => {

return /*ボタンがThemify拡張機能で自動的に赤になっています*/

 };

React hooksが開発されたのちに、使える様になったのが関数コンポーネント。

長期開発のために。なぜコンポーネントを使うのかを理由を理解しよう!!

１）再利用するため

　同じ記述を何度も入力する必要がない

２）コードの見通しをよくするため

 　１コンポーネント＝１ファイル

 　別ファイルに分けることでコードが読みやすくなる！

３）変更に強くするため

 　修正は一度でOK！（チームで開発をする時に、連絡１本で済む！）

 

親と子の概念

フォルダでいうと、App.jsx が親に当たる。component/Artics.jsx　が子に当たる。

関数の違いについての概念は別動画（とらハックさん）を参考に！

 

Propsという概念

実際のコードを見ながら、書いて理解していきましょう。

const Article = ( props) => { return (
<h2<{props.title}
 ); 
};

説明でも仰っておりましたが、プロップスを使うと動的なプログラムを作れるので、作業の効率化ができますね。

const Article = ( props) => { return (
<h2<{props.title}
 ); 
};

プロップスはぜひ実際に書いて使ってみよう

プロップスにデータを渡すときの書き方ルール → {}　波かっこに渡す

・{}の中は文字列、数値、真偽値、配列、オブジェクト、日付など、何でもOK！

・変数を渡すこともできる

・文字列は、{} なしでもOK

実際に、自分で試してみよう！！