3 asked

0

저도 같은 현상으로 기본 화면만 출력되고 있습니다만, 원인을 모르겠어서 질문 남겨봅니다.

import React from "react";

function Book(props){
    return (
        <div>
            <h1>{'이 책의 이르은 ${props.name}입니다.'}</h1>
            <h1>{'이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.'}</h1>       
            </div>
    );
}

export default Book;
 

import React from "react";
import book from "./Book";

function Library(props) {
    return(
        <div>
            <Book name="처음 만난 파이썬" numOfPage={300}/>
            <Book name="처음 만난 AWS" numOfPage={400}/>
            <Book name="처음 만난 리엑트" numOfPage={500}/>
        </div>
    );
}
export default Library;

import App from './App';

import reportWebVitals from './reportWebVitals';



import Libray from './chapter_03/Libray';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <Libray />

  </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 하면 안됩니다.
import book from "./Book";

// 아래처럼 대문자가 되어야 합니다.
import Book from "./Book";

<div>
    <h1>{'이 책의 이르은 ${props.name}입니다.'}</h1>
    <h1>{'이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.'}</h1>       
</div>

0

다시 처음부터 했더니 됬어요

이제 뭐가 문제였는지 찾아보려고요

function Library(props) { return( <div> <book name="처음 만난 파이썬" numOfPage={300}/> <book name="처음 만난 AWS" numOfPage={400}/> <book name="처음 만난 리엑트" numOfPage={500}/> </div> ); }

Book을 book으로 썻네요 ㅎㅎ

0

바로성공 했어요

ㅜㅜㅜㅜㅜㅜㅜ

0

네 첨부해들리겠습니다

그리고 제가 찾아보고 찐짜 모른다고 말할때까지 답을 알려주지 말아주세요]

제가 스스로 찾아보겠습니다

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

import Library from './C03/Library';
ReactDOM.render(
  <React.StrictMode>
    <Library />
  </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";

function Book(props){
    return(
        <div>
            <h1>{`이책의 이름은 ${props.name}입니다.`}</h1>
            <h2>{`이책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
        </div>
    );
}

export default Book;

import React from "react";
import book from "./Book";

function Library(props) {
    return(
        <div>
            <book name="처음 만난 파이썬" numOfPage={300}/>
            <book name="처음 만난 AWS" numOfPage={400}/>
            <book name="처음 만난 리엑트" numOfPage={500}/>
        </div>
    );
}
export default Library;


mport logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

0

여전히 작동이 안됩니다

0

아

고맙습니다

0

그릭고 ','이(가) 필요합니다.

다가 index.js 가 에서 뜸니다

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './C03/Library'; ReactDOM.render( <React.StrictMode> <Library /> </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();

0

실행을 시키면 글자가 낱아나야 되는데 그 기본 화면이 나타나고요

모든 코드엔 문제가 없는듯 합니다

다똑같이 따라 했습니다

0

안녕하세요, 유승호님.

막히시는 부분에 대해서 조금 더 자세하게 설명해주시면 정확한 답변이 가능할 것 같습니다!