More than 3 years have passed since last update.

【初心者】React&Redux入門を理解するための超入門/環境構築編

Last updated at 2021-08-10Posted at 2019-07-24

半月ほどReactとReduxの勉強をしています。
理解がなかなか難しいので、勉強したこと、自分なりのポイントをアウトプットしていきます。

Reactをブラウザに表示するまでの過程が難しかったのでまとめます。

#React at CodePen を用いる

これが一番簡単です。
環境構築なしで、すぐにReactを試せます。

#create-react-app

$ cd desktop
$ create-react-app mirai
デスクトップにmiraiフォルダができる。
$ cd mirai
$ npm start
で、ブラウザに表示できる。(ロゴがクルクル)

しかし、このままではコードがややこしい。
自分でいじろうとした時に、どこをいじれば良いか分からない。
そこで、コードをスッキリさせる。

mirai/src/App.js

import React from 'react';

function App() {
  return (
          <div>
            Learn React
          </div>
  );
}

export default App;

mirai/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

mirai/public/index.html

<title>React App</title>

<div id="root"></div>

こうすると、ブラウザには、Learn Reactと表示されるだけになる。
コードがスッキリして、どこをいじればいいか分かりやすい。

#HTMLファイル1枚

実はReactは、HTMLファイル1枚でブラウザ表示ができる。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
   
    <div id="root"></div>

    <script type="text/babel">
    let dom = document.querySelector('#root');

    let el = (
        <div>
            <h1>Learn React</1>
        </div>
    );

     ReactDOM.render(el, dom);
    </script>
</body>
</html>

ブラウザには、Learn Reactと表示される。
あとは、scriptタグ内をいじっていけば良い。

#まとめ
Reactを始める環境はこれで整います。
【初心者】React&Redux入門を理解するための超入門/jsの基礎編も書いたのでぜひ見てください！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up