React.js +node/express の設定編 #React.js #javascript #node.js

index:

概要:
環境
参考
参考の設定
React 追加
Hello world 的な画面
参考のページ

概要:

React.js+ express　で、DBアプリの作成となりますが。
初期設定的な、内容となります。

・今回は、webpack等使用せずに。
　バックエンドはexpress で、
　db以外サービスは、expressのみ立ち上げて
　シンプルな構成としています。

環境

node.js 10.16.0
express : 4.16.1

React
react-dom

・ejs親テンプレに、べた書きです

	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

Hello world 的な画面

https://github.com/kuc-arc-f/app6_react1/blob/master/views/tasks/test3.ejs

class HelloMessage extends React.Component {
    render() {
        return (
            <div>
                <h1>AAA</h1>
                <p>Hello World, 123bbb</p>
            </div>
        );
    }
}
ReactDOM.render(<HelloMessage />, document.getElementById('app'));

・prop使用した例

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor-Fuga" />,
  document.getElementById('app')
);