【やってみよう！React.js】: React.js やってみませんか？

スクショして学ぶ、React.js

今回の記事の内容を、一枚にまとめてみました。

React.js で、サクッといい感じの UI を作ろう！

React.js をご存知ですか？

React – ユーザインターフェース構築のための JavaScript ライブラリ

公式HPに書いてあるように、React.js は、ユーザーインターフェース（UI）を構築するための Javascript ライブラリです！

UIって？

インターフェース =  接点ということから、「ユーザーとの接点」と訳すことができますが、とりあえずはユーザーに見せる画面と理解しておけばよいです。

「ライブラリ」って？

便利な部品が色々詰まった道具箱のようなものです。

それを使えばどうなるの？

ライブラリが後押ししてくれるので、開発が楽になります！
なかでも、React.js はコンポーネントという「部品」を作り、それらを組み合わせる、そんな開発スタイルを後押ししてくれます！

どんな書き方をするの？

React.js は、Javascript の中に HTML を書くような、少し変わった書き方をします。

export default function App() {
 return (
   <div className="App">
     <h1>やってみよう！</h1>
     <h2>React.js</h2>
     <h3>まずは「できる」を集めよう。</h3>
   </div>
 );
}

HTML を書いているようですが、実のところ、これは HTML ではなく JSX というものです。

JSX の導入 – React

ここに書いてあることを今すべて理解する必要はありませんが、以下の３点は頭の片隅に置いておくとよいでしょう。

１．JSX に変数とか式を埋め込めるんだな〜
２．JSX に属性や子要素を指定できるんだな〜
３．JSX って結局のところ Javascript のオブジェクトなんだな〜

はじめてのコンポーネントを作ろう！

なにはともあれ、まずは実際に使ってみて、どんなことができるのかを体験してみましょう！
以下の URL をクリックしてください。
Codesandbox という、Web上のエディターが開きます。

try_reactjs - CodeSandbox

Codesandbox については、以下の記事も参考にしてみてください。

何かしら入力してボタンを押す MyForm コンポーネントを作る

try_reactjs を開いたら、App.js に以下のコードを追加してください。

function MyForm(){
 return (
   <div>
     <p>please enter some text!!</p>
     <input type="text"></input>
     <button type="button">click me</button>
   </div>
 )
}

これで MyForm コンポーネントが作れました！
コンポーネントを作ったら、早速呼び出してみましょう。

関数 App() を以下のように修正してください。
（もちろん、関数 App() もコンポーネントです）

export default function App() {
 return (
   <div className="App">
     <h1 className={"margin-off"}>やってみよう！</h1>
     <h2 className={"margin-off"}>React.js</h2>
     <h3>まずは「できる」を集めよう。</h3>
     <MyForm /> // <関数名></関数名>でコンポーネントを呼び出すことができる
   </div>
 );
}

即席ですが、ちょっとした入力フォームが表示されたと思います。

まずは「やってみよう！」

いまのところ登場した技術は、Javascript の関数の定義と少し毛の生えたHTML です。

実際にやってみると、意外と簡単にできたと思いませんか？
もちろんこの先には props やら state やら hook やら、新しいことが控えてはいるのですが、まずは一つずつ「できること」を集めていきましょう！