[ 노 젓기 3주차 ] 설레이는 React

내가 쓴 코드

 

 

app.js

// import logo from './logo.svg';
import Today from './Today';
import React from 'react';
import "./style.css";
import { Route } from 'react-router-dom';
import Mon from './Mon';
// import { render } from 'react-dom';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      list: ["월","화","수","목","금","토","일"],
      
    }
  }
  render () {
    console.log(this.state.list);
    return (

      <div className="App">
      <Route path="/Mon" component={Mon}>
        {/* <Mon /> */}
      </Route>
      <Route path="/" exact>
        <div className="container">
          <h1>내 일주일은?</h1>
          <hr className="line"/>
          <Today list={this.state.list} />
          <div className="circle"></div>
          <div className="circle"></div>
          <div className="circle"></div>
          <div className="circle"></div>
          <div className="circle"></div>
          <div class="triangle" onClick={() => {
            props.history.push("/mon");
          }}></div>

        </div>
        </Route>
      </div>
    );
  }
}


// function App() {
//   return (
//     <div className="App">
//       <Today />
//     </div>
//   );
// }



export default App;

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  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();

 

 

 

드디어 리액트 1주차에 들어섰다

 

뭔가 걱정이 되면서도 설레인다

 

앞으로 더 열심히 해야겠다