reactシリーズ(ゼロ)インストール

4877 ワード

インストール

最初の段階では,オンラインで編集したウェブサイトを用いてReactの基本的な文法を学ぶことができる.Hello WorldからCodepen、またはcodesandboxで記述できます.もちろん,npmやyarnを用いて依存をインストールし,ローカルで開発することもできる.ここではcreate-react-appでReactプロジェクトを作成する方法について説明し、webpackでreactプロジェクトを作成する方法について詳しく説明します.

create-react-app

詳細はgithubでご覧いただけますhttps://github.com/facebook/create-react-app.

NodeとNpm

まずNodeをインストールします.js、これは直接ノードの公式サイトでインストールパッケージをダウンロードすればいいです.長期サポート版をダウンロードすることをお勧めします.バグは少ないです.インストール完了後、端末またはcmdに入力

npm -v

npxを使用する場合は、npmのバージョンが5.2より大きいことを確認します.npmバージョンが低い場合は、

npm i -g npm

npmを最新版に更新すると、npxが使用できます.npxの詳細については、この記事を参照してください.yarnを使用すれば、yarn公式サイトにダウンロードしてインストールすることもできます.

create-react-app

公式にはreact-appを作成する方法が3つ紹介されています.1.npx

npx create-react-app my-app

2.npm init xxx your-app

npm init react-app my-app

npm initは1回のnpxのコマンドパッケージに相当し、具体的な説明はこのnpmドキュメント-init|npmを見ることができる.この方法にはnpm,6+のより高いバージョンが必要であることに注意してください.3.yarn

yarn create react-app my-app

個人的にはyarnを使ってnpm依存を管理することをお勧めします.速度が速く、上手でも簡単です.ここでyarnのバージョンは0.25+が必要です.

cd my-app

依存インストールが完了するまで、新しく作成したmy-appディレクトリに入ります.

├── node_modules
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock

create-react-appは、少なくとも1つのreact-appを実行できる依存性しかインストールされていません.例も簡単ですが、今実行してみましょう.

yarn start

実行に成功すると、http://localhost:3000この例を見ました.

webpack

現在、フロントエンド開発でよく使われている構築ツールはwebpackです.次にwebpackで簡単なreact-appを構築する方法を紹介します.

新規ディレクトリ

まず新しいディレクトリを作成します.

mkdir webpack-react-app
cd webpack-react-app
npm init -y

このとき、ディレクトリにpackageがあります.json.次に、ベクターとしてdistディレクトリに格納するHTMLファイルを新規作成します.

mkdir dist
cd dist
touch index.html

そのコードは次の通りです.



  
    webpack react app

ここでのidは、デフォルトではappであり、なにできます.main.jsもwebpack がしたもので、できます.

webpack

にwebpackのいくつかのをインストールします.

yarn add -D webpack webpack-dev-server webpack-cli

インストールがしたらpackage.jsonはコマンドをします.

...
"scripts": {
  "start": "webpack-dev-server --config ./webpack.config.js --mode development",
  ...
},
...

--modeはモードをするためにされ、するかするかをすることができ、パブリケーションであれば、のヒントなどのプラグインをします.--configはwebpackのプロファイルをし、デフォルトはディレクトリのwebpackである.config.js.

webpack

にwebpackをします.config.js.

touch webpack.config.js

コードはのとおりです.

module.exports = {
  entry: './src/index.js', //webpack     
  output: { //      
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'main.js'
  },
  devServer: { //         
    contentBase: './dist'
  }
};

によると、src/index.jsはたちのデフォルトのりです.パッケージがするとmainがされる.jsはdistディレクトリのにあります.DevSeverをした、ブラウザでdistののファイルにアクセスできます. にsrc/indexをするがある.js.

console.log('webpack test');

ターミナル

yarn start

くhttp://localhost:8080コンソールをします.Webpack testがにされました. にreactをします.

babel

reactはjsx をしており、ブラウザでにみるにはbabelをしてエスケープするがあります.babelとのインストール

yarn add -D babel-core babel-loader babel-preset-env babel-preset-react

しいbabelプロファイル

touch .babelrc

のようにされています.

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

なbabel-preset-env では、babelドキュメント-babel-preset-env をできます.インストールがしたら、しいwebpack.config.js は

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  ...
};

にreact をインストールできます.

yarn add -D react react-dom

index.jsをきします.

import React from 'react';
import ReactDOM from 'react-dom';

const title = 'Hello World!';

ReactDOM.render(
{title},
document.getElementById('app')
);

してください

yarn start

OK、なreact-appがされました. はreactのとについてします. んでくれてありがとう.