#4 .stateの設計とクラスコンポーネントの作成

トラハックさんの講座を受けての自分用メモになります。

■App.js
・Appクラスコンポーネントを作成

■dataset.js
・中身はgithubから追加

■style,.css
・中身はgithubから追加

■srcフォルダの中に追加

>assets >styles

・style.css
・index.css(これは移動してきた)

■app.cssの消去

import React from "react";
import defaultDataset from "./dataset"
import './assets/styles/style.css';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      answer: [],
      chats: [],
      currentId: "init",
      dataset:defaultDataset,
      open:false
    }
  }
  
  render() {
    return (
      <div>
        <section className="c-section">
          <div className="c-box">
            {this.state.currentId}
          </div>
      </section>
      </div>
    );
  }
}

import React from "react";

import defaultDataset from "./dataset"

import './assets/styles/style.css';

export default class App extends React.Component {

constructor(props) {

super(props);

this.state = {

answer: [],

chats: [],

currentId: "init",

dataset:defaultDataset,

open:false

}

render() {

return (

<div>

{this.state.currentId}

</div>

</section>

</div>

);

}

import React from 'react';
import ReactDOM from 'react-dom';
import './assets/styles/index.css';
import App from './App.jsx';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

import React from 'react';

import ReactDOM from 'react-dom';

import './assets/styles/index.css';

import App from './App.jsx';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();