単純な翻訳アプリを構築することによって反応文脈システムを理解すること

ブランドの新しいシリーズへようこそ.ここでは、reactjsの新しいコンテキストシステムを使用して小さな翻訳アプリを作成します.
このシリーズは、udemyにスティーブンGriderによって「ReadXによるReadX」シリーズの例からインスピレーションを受けました.
だから、あなたの端末を開き、新しい反応アプリの翻訳を作成します.
翻訳アプリ
次のCDの翻訳には、そのフォルダにコードエディターを開き、NPMの起動を行う
その後、コードエディターでSRCディレクトリに移動し、その中のすべてを削除します.
全部で削除
次にインデックスを作成します.Srcディレクトリ内のJSと、Boilerplateコードを追加します.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

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

次に、srcディレクトリ内のコンポーネントフォルダを作成します.ここでは、アプリケーションを作成します.jsファイル.
コンポーネントフォーラー
アプリの内容.JSは以下です.

import React, { Component } from 'react'

class App extends Component {
    render() {
        return (
            <div>
               App is rendered
            </div>
        )
    }
}

export default App;

この後、ブラウザでチェックインするだけで基本的なセットアップが行われます.
アプリがレンダリングされます
次に、我々は我々のアプリを更新します.基本言語セレクタを含むJS

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    state = { language: 'english' };

    onLangChange = (lang) => {
        this.setState({ language: lang });
    }

    render() {
        return (
            <div className="main__container">
               <div className="lang__flags">
                <span>Select a language :</span>
                <span onClick={() =>  this.onLangChange('english')}>🇺🇸</span>
                <span onClick={() => this.onLangChange('hindi')}>🇮🇳</span>
               </div>
               {this.state.language}
            </div>
        )
    }
}

export default App;

また、ファイルアプリケーションを作成します.同じディレクトリのCSSと以下のコードを追加します.

.main__container {
    display: grid;
    place-content: center;
    grid-gap: 10px;
}

.lang__flags {
    font-size: 1.5rem;
    font-weight: bold;
}

我々のアプリは現在、下のように、2つのクリック可能なフラグは、テキストを変更します.
基本的なレイアウト
次に、3つの新しいファイルを作成します.JSボタン.JSとフィールド.js
新しいファイル
今、我々はすぐに入力ボックスと送信ボタンを含む基本的なフォームを表示するには、これらのファイルの中にコードを追加します.
以下のコードをUserCreateに置きます.js

import React from 'react';
import Field from './Field';
import Button from './Button';

const UserCreate = () => {
    return (
        <div className="ui__form">
            <Field />
            <Button />
        </div>
    )
}

export default UserCreate

その後、フィールド.JSはこのコードを入れました.

import React, { Component } from 'react'

class Field extends Component {
    render() {
        return (
            <div>
                <label>Name </label>
                <input />
            </div>
        )
    }
}

export default Field;

ボタンで.JSは次のコードを入れました.

import React, { Component } from 'react';

class Button extends Component {
  render() {
    return (
      <button>Submit</button>
    )
  }
}

export default Button;

また、アプリケーションでこのフォームのいくつかのスタイルを配置します.CSS

…
…

.ui__form {
    display: grid;
    grid-gap: 10px;
    background: #f9f9f9;
    border: 1px solid #c1c1c1;
    margin: 2rem auto 0 auto;
    width: 600px;
    padding: 1em;
  }

  .ui__form input {
    background: #fff;
    border: 1px solid #9c9c9c;
    font-size:1rem;
    padding: 0.7em;
  }
  .ui__form input:focus {
    outline: 3px solid gold;
    width:80%;
  }
  .ui__form label {
      font-size:1.2rem;
      font-weight: 900;
  }
  .ui__form button {
    background: lightgrey;
    border-radius: 2%;
    font-size:1.2rem;
    padding: 0.7em;
    width: 30%;
    border: 0;
  }
  .ui__form button:hover {
    background: gold;
  }
  .err__msg{
      font-size: 1rem;
      color:red;
  }

  h3{
    text-align: center;
  }

今、アプリに移動します.JSは、ユーザーのコンポーネントをフックする.

render() {
        return (
            <div className="main__container">
               <div className="lang__flags">
                <span>Select a language :</span>
                <span onClick={() => this.onLangChange('english')}>🇺🇸</span>
                <span onClick={() => this.onLangChange('hindi')}>🇮🇳</span>
               </div>
               **<UserCreate />**
            </div>
        )
    }

さて、我々のアプリは、この美しい形を示しています.
ビューティフルフォーム
ここでは、コンテキストコンポーネントを使用して、appコンポーネントから「データ」ボタンを「フィールド」コンポーネントに渡します.
コンテキストシステムがなければ、我々はアプリからユーザーに作成し、そこからボタンとフィールドのコンポーネントに渡す必要があります.
ここで、srcディレクトリ内の新しいフォルダコンテキストとファイル言語のテキストを作成します.内部のJS.
言葉
次に、ファイル言語の内部にコンテキストオブジェクトを作成します.JSとデフォルト値として英語を渡す.

import React from 'react';

export default React.createContext('english');

次に、このコンテキストオブジェクトをボタンに使用します.jsファイル.

import React, { Component } from 'react';
import LanguageContext from '../contexts/LanguageContext';

class Button extends Component {
  static contextType = LanguageContext;

  render() {
    const text = this.context === 'english' ? 'Submit' : 'जमा करें';
    return (
      <button>{text}</button>
    )
  }
}

export default Button;

今、我々のフィールドを更新する時間.このコンテキストオブジェクトを使用するJSファイル.

import React, { Component } from 'react';
import LanguageContext from '../contexts/LanguageContext';

class Field extends Component {
    static contextType = LanguageContext;

    render() {
        const text = this.context === 'english' ? 'Name' : 'नाम';

        return (
            <div>
                <label>{text}</label>
                <input />
            </div>
        )
    }
}

export default Field;

声明static contextType = LanguageContextは、コンテクストオブジェクトを使用するためのボイラー板である.
次は、我々のアプリに戻ります.JSファイルを使用してLanguageContextオブジェクトを使用します.我々のコンポーネントをプロバイダーで作成し、値を渡す必要があります.

import React, { Component } from 'react';
import UserCreate from './UserCreate';
import LanguageContext from '../contexts/LanguageContext';
import './App.css';

class App extends Component {
    state = { language: 'english' };

    onLangChange = (lang) => {
        this.setState({ language: lang });
    }

    render() {
        return (
            <div className="main__container">
               <div className="lang__flags">
                <span>Select a language :</span>
                <span onClick={() => this.onLangChange('english')}>🇺🇸</span>
                <span onClick={() => this.onLangChange('hindi')}>🇮🇳</span>
               </div>
               <LanguageContext.Provider value={this.state.language}>
                <UserCreate />
               </LanguageContext.Provider>
            </div>
        )
    }
}

export default App;

私たちの子コンポーネント(我々のケースのフィールドとボタン)でデータを消費するか、示すもう一つの方法があります、そして、それは文脈オブジェクトの代わりに消費者を通しています.我々はここでそれを調査していません.
我々のアプリは今完了しているので、に頭をインドのフラグとヒンディー語へのテキストの変更をクリックします.
翻訳されるテキスト.
これは私たちの小さなアプリケーションを完了し、ソースコードhttp://localhost:3000/を見つけることができます.