[[oktatas:web:react|< React]]

====== React - Komponensek ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Projekt készítése =====

<code>
npx create-react-app app01
code app01
</code>

<code>
app01/
  |-public/
  |-src/
  |-pages/
  |  |-Welcome.css
  |  `-Welcome.js
  |-App.css
  |-App.js
  |-App.test.js
  |-index.css
  |-index.js
  |-logo.svg
  |-reportWebVitals.js
  |-setupTests.js
  |-.gitignore
  |-package-lock.json
  |-package.json
  `-README.md
</code>


===== Kezdőlap =====

<code javascript src/App.js>
import './App.css';

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

export default App;
</code>

<code javascript src/App.css>
.App {
  text-align: center;
}
</code>

===== Az Msg lap =====


<code javascript src/pages/Msg.js>
import './Msg.css'
export default function Msg(props) {
    return <h1>Helló {props.name}</h1>
}
</code>

<code javascript src/pages/Msg.css>
h1 {
    background-color: aqua;
}
</code>

===== A lap használata =====

<code javascript src/App.js>
import Msg from './pages/Msg';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Valami</h1>
      <Msg name='János' />
    </div>
  );
}

export default App;
</code>