REACT (14) 썸네일형 리스트형 [React] ページ移動する時アニメーション 今日はページを移動する時アニメーションを入れる方法について説明します。 基本セッティング まずページを二つ作ります。 main page function App() { return ( main page ); } sub pageは別のファイルに作りました。 function SubPage(){ return( sub page ) } export default SubPage; ページ移動のため、main pageにリンクを付けます。 import { Routes, Route, Link, useNavigate } from 'react-router-dom' import SubPage from './Page/SubPage.js' function App() { let navigate = useNavigate(); return ( main pa.. [React]Router使い方 Router routerはページを分けたいときに使います。 routerを使用するには、まずインストールする必要があります。 初期セッティング 1. まずターミナルを開き、コマンドを入力します。 npm install react-router-dom@6 2. index.jsでタグを追加してください。 import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); ページ分け url経路によって異なるページを表示したい場合は、Routeタグを使用することができます。 import { Routes, Route } from 'react-router-dom' function .. [React] reactでbootstrap使い方 reactでbootstrap 既存の私たちがbootstrapを使うためにcdnを使いました。 しかし、reactでは方法が少し違います。 一つ一つ学んでみたいと思います。 まずreactプロジェクトを生成します。 リンクの下段に出ています。 [React] スタートセッティング 1. react bootstrap インストール 一番上のやつです。 Get started これをターミナルに入力してください。 なんか赤い字が出ましたけどオッケーです。 あれ何かしている方は教えて下さい。 cssをbootstrapを使うところにimportします。 わたしはこんどapp.jsにします。 こんな感じですね。 import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; // ここ function App() { .. [React] props使い方 props どんな時propsを使いますか？ 今h4のタグの中にlocationのStateを使いたいんです。 function App (){ let [location, setLocation] = useState(['東京', '青森', '大阪']); return ( ) } function Modal(){ return ( ここ！！！！ ) } 普通にStateを書いたらエラーが発生します。 location[0] // エラー この時propsを使ってstateをcomponentに渡します。 step1. タグにstateを渡す 新しい変数名={渡すStateの名} 普通は同じにします。 function App (){ let [location, setLocation] = useState(['東京', '青森', '大阪']); return ( //.. [React]map使い方 map JSX中括弧内にはfor文が書けません。 なのでmap()を使います。 map使い方 array資料型にmapを貼り付けることができます。 let arr = [1, 2, 3]; arr.map(function(a){ console.log(a) }); 結果は1, 2, 3一つずつ出ます。 arrayの個数だけ回ります。 htmlに適用 ここに繰り返しコードがあります。 function App() { let [location, setLocation] = useState(['東京', '大阪', '青森']); return ( {location[0]} {location[1]} {location[2]} ); } まず基本的な枠組みを先に決めてあげます。 { array.map(function(){ return ( 内容 ) }) } arrayに.. [React]モーダル作り方(feat.条件文) モーダル 今回はボタンをクリックするとモーダルがでる機能を作ります。 デザイン モーダルは前回作ったものを使います。 modal function App() { return ( click! ); } function Modal(){ return ( 名前 年齢 性別 ) } state まずモーダルの状態をstateにセーブします。 let [modal, setModal] = useState(false); 条件文 jsx中にはif文を使えません。 今回は三項演算子を使います。 stateがtureとモーダルが出て、falseなら出ません。 こんな感じですね。 function App (){ let [modal, setModal] = useState(false); return ( ... { modal == true ? : null } ) } ボタンを.. [React]component使い方 component componentはreactでいろんなところで使えます。 今回はモーダルをcomponentで作りましょう。 モーダル click! 名前 年齢 性別 .modal{ margin-top : 20px; padding : 20px; background : #eee; text-align : left; } こんな感じですね。 component App functionの中にあったhtmlを外部にfunctionを作って入れてください。 component名は英語の大文字で始まった方がいいです。 function App (){ return ( click! ) } function Modal(){ return ( 名前 年齢 性別 ) } これだけではhtmlが消えちゃいます。 funtionの名前をタグとして入れます。 function App.. [React]onClickの使い方 onClick 今日は簡単にreactでonClickの使用方法を見てみましょう。 1. 準備 いいねボタン ハートを押すと数字が上がる機能を作りましょう。 まずいいねボタンを作ります。 いいね！ ❤️ 0 数字の部分は変わるのでstateに変更してあげます。 state使い方 function App(){ let [heart, setHeart] = useState(0); return ( いいね！ ❤️ { heart } ) } 2. どう使う? 従来のジャバスクリプトコードとは異なり、cが大文字で 中括弧を入れるのが特徴です。 あらかじめ用意した関数を入れる。 function App(){ function 関数名(){ console.log(1) } return ( こんにちは ) } すぐ入れる。 { コード } }> // arrow functionを使っ.. 이전 1 2 다음
