Tartalomjegyzék

< React

React - Komponensek

Projekt készítése

npx create-react-app app01
code app01
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

Kezdőlap

src/App.js
import './App.css';
 
function App() {
  return (
    <div className="App">
      <h1>Valami</h1>
    </div>
  );
}
 
export default App;
src/App.css
.App {
  text-align: center;
}

Az Msg lap

src/pages/Msg.js
import './Msg.css'
export default function Msg(props) {
    return <h1>Helló {props.name}</h1>
}
src/pages/Msg.css
h1 {
    background-color: aqua;
}

A lap használata

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;