反応開始＃1

#1スタート！

反応とは?

ReactionはJavaScriptベースのプログラムで、2013年にFacebookで初めて発表された.

作業環境の準備完了)

コードエディタがあると仮定すると、まずノードです.jsからLTSバージョンファイルをダウンロードします.
https://nodejs.org/en/
一般化されたVisual Studioをコードエディタとして使用します.
エディタを開き、端末をクリックして次のコマンドを実行します.

$ npx create-react-app begin-react

begin-reactはディレクトリ名で、希望する名前を指定できます.
そして次のコマンドを実行すればいいです.

$ cd begin-react
$ npm start

npm startを入力すると、ブラウザはhttp://localhost:3000/を開き、最初の応答ページを生成します.

最初の反応素子

srcディレクトリでHello.jsという名前のファイルを生成します.
次に、次のコードを作成します.

Hello.js

import React from "react";

function Hello() {
    return <div>안녕하세요</div>
}

export default Hello;

大事なのは.

import React from 'react';

反応素子を使用するには、上記のコードを記述する必要があります.
そして.

export default Hello;

最後に、コンポーネントを他のファイルにエクスポートするには、上記のコードを記述する必要があります.
反応素子は関数形式だけでなくクラス形式にも書くことができる.
例)class形状構成部品

class Welcome extends React.Component {
    render() {
      return <h1>Hello</h1>;
    }
}

Helloコンポーネントを適用します.私はあなたをjsに呼びます.

App.js

import React from 'react';
import Hello from './Hello';

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

export default App;

結果:

参考までに!

構成部品を作成するときは、大文字で始まる必要があります。

小文字はマークとして認識されます。

index.js

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

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

不要なコードが削除されました.
上記のコードのRealtDOM.renderはブラウザのDOM内部で反応素子をレンダリングするという意味です.
そして知りたいのは.
ReactDOM.render(子、親)
1番目の因子は、保護する子供のラベルを表し、2番目の因子は、1番目のラベルを保護する親のラベルです.
そしてIDがrootのタグを上から選び、
共通ディレクトリにインデックスを付けます.htmlで

意味
ではJSXは?

JavaScript拡張構文(JavaScript+XML)

簡単に言えば、HTML構文は反応で使用できます.
例)

注:ベロフォードとのモダン反応
感じ:

今でも反応を学んでいますが、よくわからないこともたくさんあります.

新しい気持ちで勉強して、それを完全に私のものにしたいと思っています.

がんばって！