8/4 수업중에 남긴 메모

 

React

리엑트는 사용자 정의 태그를 만드는 기술이다.

리턴값은 반드시 하나의 태그여야 한다.

대문자로 시작한다는 것은 리엑스 컴포넌트라는 뜻

 

@uiw/react-md-editor

 

import React from "react";
import "./style.css";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Grid from '@mui/material/Grid';
import MDEditor from '@uiw/react-md-editor';

function Header(){
  return <h1><a>WEB</a></h1>
}
function Nav(){
  return <ol>
    <li><a href="1.html">html5</a></li>
    <li><a href="2.html">css</a></li>
    <li><a href="3.html">javascript</a></li>
  </ol>
}
function Article(){
  return <div>
    <MDEditor></MDEditor>
    <h2>Welcome</h2>
    Hello, WEB! - 화이팅!<br></br><br></br>
    <ButtonGroup style={{marginRight:'6px'}} variant="contained" aria-label="outlined primary button group">
      <Button variant="contained">Create</Button>
      <Button variant="contained">UPDATE</Button>
    </ButtonGroup>
    <Button variant="contained" color="error">DELETE</Button>
  </div>
}
export default function App() { 
  return (
    <div>
        <Header></Header>
        <Grid container>
          <Grid item xs={3}><Nav></Nav></Grid>
          <Grid item xs={9}><Article></Article></Grid>
        </Grid>
    </div>
  );
}

https://stackblitz.com/edit/react-kfqtat?file=src%2FApp.js 

React (forked) - StackBlitz

https://mui.com/material-ui/react-grid/

React Grid component - Material UI

 

https://streamlit.io/

Streamlit • The fastest way to build and share data apps