Reactの基礎

Reactの基礎

コンポーネントの呼び出し

//Title.js
function Title() {
    return (
        <h1>Hello World</h1>
    )
}
export default Title

//App.js
import Title from './components/title'　//コンポーネントがあるディレクトリ/ファイル名で指定してください。
import './App.css' //もともとimportされていますので無視してください。

function App() {
    return (
        <div className="App"> {/* classではなくclassNameとする　*/}
          <Title/> 
        </div>
    )
}

Props

//Title.js
function Title(props) { //({msg})という風にpropsを省略が可能
    return (
        <h1>{ props.msg }</h1> {/* <h1>{ msg }</h1> */}
    )
}
export default Title

//App.js
import Title from './components/title'　//コンポーネントがあるディレクトリ/ファイル名で指定してください。
import './App.css' //もともとimportされていますので無視してください。

function App() {
    return (
        <div className="App"> {/* classではなくclassNameとする　*/}
          <Title msg="Hello World"/> 
        </div>
    )
}