따라하며 만드는 웹사이트 E02-3 : 이미지, 댓글창 껍데기

이제 네번째 시간인가. 이 시간에는 이미지 + 댓글란 껍데기를 만들었음.

자세한 강의는 아래 영상을 참고.

www.youtube.com/watch?v=lNZrHnO0L5I&list=PLEzWjQvavJSoI1gF7cP-uxFyJQD2l47O3&index=4

 

따라가기 버겁다ㅋㅋㅋ

오늘의 결과물은 다음과 같다. 그래도 뿌듯하다.

 

 

소스코드

App.js 

import React from 'react';
import {Image, Input, Header, Container} from 'semantic-ui-react'
import { } from 'semantic-ui-react'

import Comments from './comments.js'
import Jenny from "./jenny.jpg"

function App() {
  return (
    <div>
    <Header as='h1' dividing>
    <Container textAlign='center'>제니의 첫 솔로곡 SOLO</Container>
    </Header>

<Image src = {Jenny} size='medium' rounded centered />

<Comments />


)

</div>
);
}

export default App;

 

comments.js

import React from 'react';
import {Button, Input, Comment, Form, Header} from 'semantic-ui-react'

import avatar from "./avatar.png"
import avatar2 from "./avatar2.png"


class Comments extends React.Component{
  render(){
    return(
    <Comment.Group>
      <Header as='h3' dividing>
        Comments
      </Header>

      <Comment>
        <Comment.Avatar src= {avatar} />
        <Comment.Content>
          <Comment.Author as='a'>Matt</Comment.Author>
          <Comment.Metadata>
            <div>Today at 5:42PM</div>
          </Comment.Metadata>
          <Comment.Text>How artistic!</Comment.Text>
          <Comment.Actions>
            <Comment.Action>Reply</Comment.Action>
          </Comment.Actions>
        </Comment.Content>
      </Comment>

      <Comment>
        <Comment.Avatar src= {avatar2} />
        <Comment.Content>
          <Comment.Author as='a'>Elliot Fu</Comment.Author>
          <Comment.Metadata>
            <div>Yesterday at 12:30AM</div>
          </Comment.Metadata>
          <Comment.Text>
            <p>This has been very useful for my research. Thanks as well!</p>
          </Comment.Text>
          <Comment.Actions>
            <Comment.Action>Reply</Comment.Action>
          </Comment.Actions>
        </Comment.Content>
        <Comment.Group>
          <Comment>
            <Comment.Avatar src= {avatar} />
            <Comment.Content>
              <Comment.Author as='a'>Jenny Hess</Comment.Author>
              <Comment.Metadata>
                <div>Just now</div>
              </Comment.Metadata>
              <Comment.Text>Elliot you are always so right :)</Comment.Text>
              <Comment.Actions>
                <Comment.Action>Reply</Comment.Action>
              </Comment.Actions>
            </Comment.Content>
          </Comment>
        </Comment.Group>
      </Comment>

      <Comment>
        <Comment.Avatar src= {avatar2} />
        <Comment.Content>
          <Comment.Author as='a'>Joe Henderson</Comment.Author>
          <Comment.Metadata>
            <div>5 days ago</div>
          </Comment.Metadata>
          <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
          <Comment.Actions>
            <Comment.Action>Reply</Comment.Action>
          </Comment.Actions>
        </Comment.Content>
      </Comment>

      <Form reply>
        <Form.TextArea />
        <Button content='Add Reply' labelPosition='left' icon='edit' primary />
      </Form>
    </Comment.Group>
    )
    }
}

export default Comments

 

 

다음강의 보기

2021.03.26 - [분류 전체보기] - 따라하며 만드는 웹사이트 E03-1 : margin, 구분선, 좋아요 버튼

따라하며 만드는 웹사이트 E03-1 : margin, 구분선, 좋아요 버튼