Reactをローカル構築した場合、16.8の記法でsetStateは使えないのか？

質問は上記の通りで、Reactを学習中、より最新の記法に置き換えようとしたのですが、どうやってもsetStateが未定義になってしまいます。なお、テスト環境ですがBabelを使っています。

#Berore:正常に動作する方

html
1<!DOCTYPE html>
2<html dir="ltr" lang="ja" data-whatintent="keyboard">
3<head>
4	<meta charset="UTF-8">
5	<title>サンプル</title>
6	<link href="css/style.css" rel="stylesheet" type="text/css">
7	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
8	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
9	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
10	<script type="text/babel">
11	class App extends React.Component{
12		constructor(){
13			super();
14			this.state = {
15				mes: ''
16			};
17			this.changeText = this.changeText.bind(this);
18		}
19		changeText(e){
20			this.setState({ mes :e.target.value });
21		}
22		render(){
23			return(
24				<div>
25					<input type="text" onChange={this.changeText} />
26					<p>入力文字<span>{ this.state.mes }</span></p>
27				</div>
28			);
29		}
30	}
31	ReactDOM.render(
32		<App />,
33		document.getElementById("root")
34	);
35	</script>
36</head>
37<body>
38	<div id="root"></div>
39</body>
40</html>

この記法が古くなってきているというので、新たな記法を学習し、書き直したのがこれです。

##After:正常に動かない方
ただし、setStateをコメントアウトした場合、console.log(mes)の値は問題なく表示されます。

html
1<!DOCTYPE html>
2<html dir="ltr" lang="ja" data-whatintent="keyboard">
3
4    <head>
5        <meta charset="UTF-8">
6        <title>サンプル</title>
7        <link href="css/style.css" rel="stylesheet" type="text/css">
8<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
9<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
10<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
11<script type="text/babel">
12  //定義部分
13	function App(props){
14		const mes = ''
15		//処理部分
16		let changeText = (e)=>{
17			setState({mes: target.value});
18		}
19		console.log(changeText);
20		return <div>
21                         <input onChange={changeText} />
22			             <p>入力された文字<span>{ changeText.mes }</span></p>
23		        </div>;
24	}
25	
26	const elem = <App />;
27	//レンダリング処理
28	ReactDOM.render(
29		elem,
30		document.getElementById("root")
31	);
32</script>
33</head>
34<body>
35	<div id="root"></div>
36</body>
37</html>

なお、このエラーを調べてみたところ、アロー関数での記法なら、changeText.bind(this)は不要とあったので、記載の有無も試してみましたが、解決には至りませんでした。

このBabelでは対応していないのかどうかも調べられなかった（別の件のsetState is undefinedばかりヒットする）ので、解決法をご存じの方、ご教授いただければ幸いです。

行動規範の内容に同意します

回答3件

学習中という段階で手を出すべきではないレベルでトリッキーなやり方でReactを導入しているようですが、よほどの理由がない限り、create-react-appを使ってReactアプリケーションを作成することをおすすめします。

新しい React アプリを作る - React > Create React App

投稿2020/01/10 11:10

thyda.eiqau

総合スコア2982

FKM

2020/01/10 11:41

助言ありがとうございます。create-react-appもjsxでの記法も双方学習済ではあるのですが、肝心のレンダリングの記法が古いのを承知でいつまでも引きずるのも得策ではないという考えから、色々試しているところです。なお、ＪＳフレームワークはAngularJS、Vue.jsなどでシステム制作経験はあります。

thyda.eiqau

2020/01/10 11:54

百歩譲ってcreate-react-appを使わなかったとしても、npmを使わないというのは苦行に近く、どう考えても多数派ではありません。 create-react-appもnpmも、babelを使っているのにES6で書かないというのも、いずれもあえて険しい道を行かれているようですが、少数派を取るというのは問題が起きたときにgooglabilityが低い環境で戦わなければならないことを意味し、結局メンテ性が下がるので得策ではないです。

thyda.eiqau

2020/01/10 11:54

ES6での下りはimportのところについての言及です。言葉が足りない気がしたので。

FKM

2020/01/10 12:13

了解です。ただ、今回はimportが単純に使えないだけ（リンク先通りのエラーが表示されます）だったので、代用策を調べて利用しました。 npmも使用したことありますし、別に学習用のプロジェクトも既に用意、動作テストしていますが、今後はバックエンド側でもそっちメインで学習を続けていくべきですね。

行動規範の内容に同意します

アドバイスを参考に、正しい解決方法を記録しておきます（16.8時点）

html
1<script type="text/babel">
2  //定義部分
3	const { useState } = React; //useStateを使用するための定義
4	const App =()=>{
5		//処理部分
6		const [mes,setMes] = useState(true); //バインディング処理
7　　　　　　　　　//一度メソッドで準備する
8		const changeText = (e)=>{
9			setMes( e.target.value ); //値の比較
10		}
11		return(
12		<div>
13		    <input onChange={changeText} />
14		    <p>入力された文字<span>{ mes }</span></p>
15		</div>
16	        );
17	}
18        const elem = <App />; //ワンクッション置かないと警告が出る
19	//レンダリング処理
20	ReactDOM.render(
21		elem,
22		document.getElementById("root")
23	);
24</script>

ただ、このReact、どんどん記法が変わっていくので、これもあくまで参考程度、そして動作の学習程度にとどめておいてください。

thyda.eiqau氏曰く、上記の方法でフック（useSteteなど）を定義するのはかなり特殊（少数派）な記法だそうで、保守性を鑑みて現場での使用はやめた方がいいです（実験的なものなので、Qiitaに記事を移動させる予定）。

投稿2020/01/10 11:35

編集2020/01/10 13:12

FKM

総合スコア3633

ベストアンサー

新たな記法を学習し、書き直したのがこれです。

一言で言って、めちゃくちゃです。何をどう調べたらこんな書き方になってしまうのか理解できないレベルで成立していません。

クラスを使わない場合、React Hooksという手法で書く必要があります。setStateも関数を使って生成することになります。

投稿2020/01/10 10:05

maisumakun

総合スコア145183

FKM

2020/01/10 10:26

そのむちゃくちゃな記述を学習したのはここです。 https://ja.reactjs.org/docs/components-and-props.html たしかにレンダリングとエレメントがゴッチャゴチャになってたので、手直ししてます。今から、React HooksでsetState関数の生成方法を確認してきます。

FKM

2020/01/10 10:46 編集

ありがとうございます。React Hooks setStateで検索すると、ローカル環境における外部生成の方法がわかり、解決しました。そして本来使用したかったuseStateもエラーなく使用することができました。 import ...という記述ではなくて、 const { useState } = React; という定義が関数前に必要だったようです。 StackOverviewより ReactJS: Uncaught ReferenceError: require is not defined https://stackoverflow.com/questions/38219311/reactjs-uncaught-referenceerror-require-is-not-defined

FKM

2020/01/10 12:20 編集

追記、例の定義をすることで、 const { useState } = React; その、当初に書いた無茶苦茶な記述でも正常に動くことがわかりました。それが正しい記述方法だったのかは調査中です。その結果、かなり特殊な記法だったことがわかったので、元のメチャクチャ改は記載しません。

行動規範の内容に同意します

あなたの回答