React Basic Information 1

とは

ユーザインターフェースを作りためのJavascript library

Framework vs Library

props

JSX

Arrow Function(js標準)

MDNサイト参照すること

Map process return array

同じ作業を繰り返す時？

const days= ["Mon", "Tue", "Wed", "Thur", "Fri"];
const goodDays = days.map(d=> `😁${d}`);

//or
const addEmoji = d => `😁${d}`;
const goodDays = days.map(d=> addEmoji);

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/1af38db9-010f-

const goodDays = days.map((d, index)=> `#{index}`);

Filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

foreach, push, includes, reverse

↑？？vanilla.js?そう

1.1 project

参照：https://velopert.com/3417

npx -> create react project to simple latest version

yarn add prop-types

makes .env

NODE_PATH=src

srcの下を見るように設定

Component

export default () => "Home";

Fragments

<> </>

Router

Routerは一つのchildのみ持つのができる

<Router>
 <Switch>
   <Route path="/tv" exact component={TV} />
   <Route path="/tv/reality" render={() => <h1> RealityShow </h1>} />
 </Switch>
</Router>

exact =exactly

env

絶対経路設定

NODE_PATH=src

not working
https://github.com/facebook/create-react-app/issues/2230

// ./jsConfig.json <- create the file
{
    "rootDir": "src",
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "*": ["*"]
        }
    }
}

Css Module 化

not global-> be local

React-Router(画面遷移Library)

公式：https://reactrouter.com/web/guides/quick-start
公式(npm)：https://www.npmjs.com/package/react-router-dom
Kr参照:https://m.blog.naver.com/sejun3278/221797203201
テスト画面：https://codesandbox.io/s/day-three-blueprint-forked-phxg4

SPA(Single Page Application) vs MPA(Multi Page Application)

React->SPA(Single Page Application)方式

SPA★

・新しいページへ遷移せず、一つのページの中で必要なデータを描画する形

MPA

・複数のページを使って、新しいページに遷移
・ 画面遷移

install

yarn add react-router-dom

種類

• BrowserRouter <-★
  • A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.
  • support to history location
• HashRouter
  • A that uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL.
  • cannot read search engine!
  • HashRouter은 URL 해시를 서버에서 읽을 수 없기 때문에 Server Side Rendering으로 설정을 백업할 수는 없다.<? 뮤?
  • older than BrowserRouter

// scr/App.js
import { HashRouter as Router, Route } from "react-router-dom";
// Hash=> # url : https://localhost:3030/#/~~~

export default () => (
  <Router>
      <Route path="/" exact component={Home} />
      <Route path="/search" exact component={Search} />
      <Redirect from="*" to="/" />
  </Router>
);

Link

<Link to='home'>HOME</Link>
// same in html
<a href="/home">HOME</a>

fetch using axios