前提・実現したいこと
以下の記事を参考にして、ReactでToDoアプリを作成しようとしています。
https://qiita.com/sayama0402/items/6364cef848e2c2d1cf7d
そうしたところ、上記の記事の「4. Formコンポーネントを作成する」という項目において、viewの作成をして、ブラウザ上で確認してみたところ、以下のようにReactのデフォルト画面らしき画面しか映りませんでした。
https://gyazo.com/9b585fd92d13b65e3b66cd9c79cca6b6
上記記事のように画面が映るためには、どうすれば良いでしょうか。
解決策をご提示いただけると、幸いでございます。
発生している問題・エラーメッセージ
エラーメッセージは特になし
該当のソースコード
基本的には、App.jsxおよびForm.jsxの二つのファイルしか触っておりません。
以下は、App.jsxの中のコードです。
js
1import React, { Component } from 'react'; 2import Form from './Form'; 3 4export default class App extends Component { 5 render() { 6 return ( 7 <div className="siimple-box siimple--bg-dark"> 8 <h1 className="siimple-box-title siimple--color-white">React Todo App</h1> 9 <Form/> 10 </div> 11 ); 12 } 13} 14
以下は、Form.jsxの中のコードです。
import React, {Component} from 'react'; const Form = (props) => ( <form className="siimple-form"> <div className="siimple-form-field"> <label className="siimple-label siimple--color-white">Your todo:</label> <input name="title" type="text" className="siimple"/> <input type="submit" value="Add" className="siimple-btn siimple-btn--teal"/> </div> </form> ); export default Form;
試したこと
最初は記事の内容コードをそのままコピペしていたので、一度1から自分でコードを打って、サイド確認をしました。しかし、相変わらず、ブラウザ上の画面に変化はないです。
補足情報(FW/ツールのバージョンなど)
React
node -v12.11.1
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。