Table of Contents
Kebutuhan
- NodeJs install disini
- IDE, yang paling populer adalah VSCode (gratis).
Memulai Project
npx create-react-app my-app
cd my-app
npm start
Browser Aplikasi http://localhost:3000 akan otomatis terbuka dan tampil halaman seperti berikut.
Buka Visual Studio Code
Terminate server dengan menekan tombol Ctrl+D, tetap pada direktori my-app buka Visual Studio Code
code .
Stukturnya akan terlihat seperti berikut.
Hello World
Jika dilihat dari struktur direktori, file yang pertama dipanggil yaitu :
- public/index.html
- index.js
- App.js
Dimana App.js merupakan sebuah Component yang dipanggil ole index.js.
Buat Component HelloWorld.jsx
Buat file baru src HelloWorld.js
function App() {
return (
<div className="App" style={{textAlign: 'center'}}>
<header className="App-header">
Header
</header>
<main>
<h1>Hello World</h1>
</main>
<footer>
Footer
</footer>
</div>
);
}
export default App;
Edit index.js
Edit file src/index.js. Ubah baris yang diberi tanda seperti berikut.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//import App from './App';
import HelloWorld from './HelloWorld';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
{/*<App />*/}
<HelloWorld />
</React.StrictMode>
);
// 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();
Menambahkan CSS
Buat file baru src/css/custom.css. lalu tambahkan baris berikut pada src/index.js.
...
import './index.css';
import './css/custom.css'
//import App from './App';
...
Hasilnya seperti berikut.
Pemanggilan *.css juga bisa ditempatkan di dalam Component. Misal baris import ‘./css/custom.css’ ditambahkan ke dalam file HelloWorld.js maka hasilnya akan sama seperti tampilan di atas namun css tidak akan berpengaruh pada Component lain.
Memanggil Gambar
Konsepnya sama dengan css. Sebelumnya sudah ada file src/logo.svg pada direktori reactjs anda panggil logo tersebut pada file src/HelloWorld.js
import logo from './logo.svg';
import './css/custom.css'
function App() {
return (
<div className="App" style={{textAlign: 'center'}}>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" style={{width:'200px'}} />
</header>
<main>
<h1>Hello World</h1>
</main>
<footer>
Footer
</footer>
</div>
);
}
export default App;
Hasilnya seperti berikut ini.
