React Basic Information 1

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

#Framework vs Library 

#props

#JSX


#Arrow Function(js標準)
MDNサイト参照すること

##Map process return array
同じ作業を繰り返す時？

```React
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-

```React
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.

```React
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 

```terminal
yarn add prop-types
```
makes .env

```
NODE_PATH=src
```

srcの下を見るように設定


#Component

```React
export default () => "Home";

```


#Fragments

```react
<> </>
```

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

https://codesandbox.io/s/day-three-blueprint-forked-phxg4


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

#env
絶対経路設定

```json
NODE_PATH=src
```

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

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



#Css Module 化
not global-> be local

```



```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/8cf887f6-a4e0-9eb9-af66-cb95bf1683ed.png)


#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★
・新しいページへ遷移せず、一つのページの中で必要なデータを描画する形
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/32c10b76-098e-a9d8-8971-24768d4d7dfb.png)

###MPA
・複数のページを使って、新しいページに遷移
・ 画面遷移
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/cea62c19-6c39-b2a9-0c61-dd143593b46d.png)

##install

```terminal
yarn add react-router-dom
```

##種類
+ BrowserRouter <-★
    + A <Router> 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 <Router> 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

```react
// 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

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


#fetch using axios