Learning React(8.React開発環境の構成)

5344 ワード

テキストリンク

1.React開発環境の構成

反応アプリケーションを開発する環境構成

にはこれまでスクリプトファイルが含まれていましたが、このスクリプト構文はレスポンスライブラリだけでなく、ブラウザがJSXに遭遇したときに何をすべきかを示すラベルライブラリもロードされています.

この方式の問題はパフォーマンスの問題であり、ブラウザはページロードに関連するすべてのタスクを完了するほか、JSXを実際のJavaScriptに変換する役割を果たさなければならない.

JSXに移行するJavaScriptは、開発段階では大きな問題ではありませんが、アプリケーションが発売された場合、すべての実際のユーザーがパフォーマンスに損害を受けなければならないため、大きな問題になる可能性があります.

の解決策は、ページロード前にJSXをJSに変換して開発環境

を構成することである.

このようにブラウザは、変換され、最適化されたJSファイルを使用するだけで

になります.

Node、Babel、Webpackの組み合わせ

が使用されます.

01.Create Reactとの初対面

create react app github : https://github.com/facebook/create-react-app
node : https://nodejs.org/ko/

ノードインストール確認

-1. npm install -g create-react-app

-2.レスポンス項目の作成

create-react-app helloworld

-3.反応項目の実行

プロジェクト内部に入るとnpm start

糸を装備している場合は、紡績を開始することをお勧めします

-4、反応項目の配置

02.HelloWorldアプリケーションの開発

反応開発環境も作られたでしょう画面上でHelloworld!プリントアウトしましょう!

最初からきれいに始めるために、srcディレクトリのすべてのファイルを削除して再開します!

-1. src / index.jsの作成

import React from "react";
import ReactDom from "react-dom";
import HelloWorld from "./HelloWorld";

ReactDom.render(
  <HelloWorld />
  , document.getElementById("root")
);

-2. src / HelloWorld.jsの作成

import React, { Component } from "react";

class HelloWorld extends Component {
  render() {
    return (
      <div className="helloContainer">
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default HelloWorld;

-3.styleを適用してみます!

src/css/index.css

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

src/css/HelloWorld.css

h1 {
  font-family: sans-serif;
  font-size: 56px;
  padding: 5px 15px;
  margin: 0;
  background: linear-gradient(to bottom, white 0%, white 62%, gold 62%, gold 100%);
}