やはり、React.jsをやっていく、ひいては、React Nativeをやっていく上では、CSSの知識（CSSそのものが必要な場合あるいはそれに類したもの）が必要となるため、覚悟を決めて、CSSを学習してみる。 React.jsの環境だと、エディタでの変更がすぐにブラウザに…

zenn.dev 上記と同様に下記を使ってみたが、時間がうまく扱えない。 date-fns.org ので、js-Jodaをしてみたが、React.jsではうまく読み込めず、エラーメッセージも意味不明。 なので、Day.jsを試してみた。これは、以前のMoment.jsの後継に当たる？ようであ…

JavaScriptにはさまざまなライブラリが存在します。React.jsもライブラリの一つであるといわれます。ただし、通常の『ライブラリ』とは少し違います。書き方を変えるように強いるのです（バニラJavaScriptでも書けますが、書いている人はいません）。 フレー…

・JSXとは？［理解する必要はありません］ HTML風のコードが書ける。 実際は、HTMLとほぼ同じタグ名や属性がすでに決められていて使用でき、またさらに、XML規格で拡張可能なものです。 ・JSXにすると何がいいのか？ HTMLのDOMを見ながら（HTMLファイル見な…

・React.jsとHTML＋JavaScriptの書き方の違い これについては実際入門してから慣れるべき。 ・作成したページの確認の仕方の違い ローカル環境は自分で作る必要はなく、あらかじめ提供してくれています。 グローバル環境（サーバー）への上げ方がわからない…

・React.jsを自分で作っていける状態になるまでにJavaScript知識はどれくらい必要か？ JavaScriptといっても範囲が広すぎますので、やみくもに勉強しても、終わりが見えません。 コツとしては、まず、JavaScriptを、型無し関数型言語と捉えることです（途中…

変更前 const Button = (props)=>{ return( <div> <button>{props.title}</button> </div> ) } export default Button; 変更後 const Button = ({title})=>{ return( <div> <button>{title}</button> </div> ) } export default Button;

『ボタンを押すと、次押せなくなる』『カウントダウンタイマー』『兄弟コンポーネント間の値の受け渡し』などの技術を合わせて、『独自にチュートリアル』を完成させてみます。 そのあと、Storybookで、デコレーションをしてみます。 その次に、できれば、Zu…

Reactでは、Flex Layoutはあるが、Grid Layoutはないのかもしれません。React NativeではGrid Layoutはありません。 わざわざ、CSSファイルで指定してもよいのですが、ここでは、React.jsでTailwind CSS（v3)を導入してみます。CSSで結局は書いているのです…

App.js（親コンポーネント） import { View, Text, Button } from 'react-native'; import BtnTxt from './BtnTxt' const App = ()=>{ return( <View style={{flex:1,justifyContent:'center'}}> <BtnTxt name ="Hello"></BtnTxt> </View> ) } export default App; BtnTxt.js（子コンポーネント） import {Button,View,Text} from 'react-native…

Reactについてやりのこしたことも多いですが、目的が、React Nativeなので、それに移行したいと思います。 その前に、今後関係するかもしれないバージョン管理について勉強したいと思います。 OSはWindows10です。 ①Node.jsのバージョン管理 いろいろ方法は…

www.npmjs.com index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import MyTimer from './MyTimer'; import reportWebVitals from './reportWebVitals'; import { unstable_batchedUpdates } from 'rea…

react-timer-hookを用いる。 コマンドプロンプトで、プロジェクトのディレクトリに移動し、 npm install --save react-timer-hook と記載し、Enterを押す。 MyStopwatch.js import {useStopwatch} from 'react-timer-hook'; const MyStopwatch = ()=>{ const…

下記HPはわかりやすいです。 qiita.com ToggleTest.js import {useState} from 'react'; const ToggleTest = ()=>{ const [open,setOpen] = useState(true); const changeOpen = ()=>{ if(open === true){ setOpen(false); }else{ setOpen(true); } } return…

cpoint-lab.co.jp A⇒B⇒Zへ値を渡す <index.js> import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import Parent from './Parent'; import reportWebVitals from './reportWebVitals'; import { unstable_batchedUpdates } </index.js>…

【これだけ分かれば戦える】 React.jsの特徴とJavaScriptの頻出構文 | Wemotion メディア スプレッド構文 - JavaScript | MDN (mozilla.org)

プロジェクトに、Zustandを詰め込んで、useStoreを使う。 下記をすごく参考にしました。 [JavaScript] Reactの状態管理にはZustandが決定解になるような気がする (zenn.dev) index.js import React from 'react'; import ReactDOM from 'react-dom/client'; …

下記HPを参照にします。 【TypeScript入門】TypeScriptを実践で活用したい人向けの基本を徹底解説 | アールエフェクト (reffect.co.jp) なぜ必要かを考えて、どうしても必要だと思う方が学習しないとモチベーションが保てないかもしれません。 TypeScriptと…

www.youtube.com OSはWindows10、エディタはVSCodeです。 まず、tscコマンドが使えないので、コマンドプロンプトで、 npm install -g typescript と入力し、Enter。 tsc -v と入力しEnterでVersionが出てくればOKです。 ホームディレクトリの下に、JavaScrip…

www.delftstack.com これはそのまま使わせてもらいます。 独自のチュートリアルを作るためのTips 次に押すべきボタンの数字を上に表示し、その数字と同じボタンを押すと、ボタンが無効になるというのをやってみます。 <index.js> import React from 'react';import Rea</index.js>…

<index.js> import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import MonoButton from './MonoButton'; const root = ReactDOM.createRoot(document.getElementById('root'));root.render( //<React.StrictMode> <MonoButton /> //</React.StrictMode>); <MonoButton.js> import A…</monobutton.js></index.js>

JavaScript + Zustandをやってみる。ZustandもRedux系のものですので、Reduxの概念は理解しておいたほうがよさそうです。 dev.classmethod.jp qiita.com Reactで状態管理 初心者でも簡単Zustandの設定方法 | アールエフェクト (reffect.co.jp)

①React初学者が必ず押さえておきたい考え方とは？【コンポーネント指向のフロントエンド】 | in-Pocket インポケット ②Reactの思想を理解してリファクタする - Qiita 上記HPを参考にしてます。 個人的に重要と思われるところから、再学習してみます。 まず、…

下記HPに沿ってやっていきます。 reffect.co.jp 上記HP後半で、WebAPI（以下、APIと略します。）についての記述があります。 これについて調べてみます。いろいろ『APIとは？』について説明しているページがありますが、実際手を動かしたほうがわかりやすい…

ja.reactjs.org もともと日本語で書かれているページです。 まとめは下記に記載 React の流儀を読んでコードを書いてみた - Qiita 実際に実装したコードは下記参照。 ただしこのコードはクラス型コンポーネントで記載されています。 zenn.dev

Reduxはアプリ作成の場合は避けれないと思われるので、このあたりから勉強していきます。 まずはReactなしのReduxの勉強です。 Reduxの公式のリファレンスの中のReduxエッセンシャルは最低読む必要があるようです。 Redux Essentials, Part 1: Redux Overvie…

React.jsで現在の時刻を表示するデジタル時計を作ってみましょう。 普通にJavaScriptの感覚で作成すると、ハマってしまうようである。 [React] 現在の日付と時刻を表示する（デジタル時計） | FEELD BLOG (feeld-uni.com) これによると、useStateとuseEffect…

まずは、基本となるコードを再掲。わかりやすいコードを基本とします。 コピペできるように貼り付けてます。 ＜index.js＞ （index.cssはデフォルトです） ＜Grid.js＞ import './grid.css';import GridContent from'./GridContent'; function Grid(){ retur…

（前回の続きです） その前にコールバック関数をもう少し理解する必要がありそうです。どこのホームページにも書いてますが、Reactでつまづくときは、JavaScriptの知識の無さでつまづきます。ただし、前の短いYoutube動画でも言っておられるように、React.js…

beta.reactjs.org クイックスタートをまず読みます。（PC用の最近のブラウザはGoogle翻訳がもともと入っています。スマホ用のブラウザでなら、自分でGoogle翻訳をダウンロード、インストールすれば、ブラウザ上で表示されたテキストは、簡単に翻訳できるよう…