Membuat Project React
Kita membutuhkan Nodejs dan NPM untuk membuat project React. Nodejs dan NPM dapat diunduh di https://nodejs.org/en/. Disarankan untuk mengunduh versi LTS. Untuk memastikan Nodejs dan NPM sudah terinstall, jalankan:
$ node –version
*vXX.YY.ZZ
$ npm –version
*vXX.YY.ZZ
Kita membutuhkan Nodejs dan NPM untuk membuat project React. Nodejs dan NPM dapat diunduh di https://nodejs.org/en/. Disarankan untuk mengunduh versi LTS. Untuk memastikan Nodejs dan NPM sudah terinstall, jalankan:
$ node –version
*vXX.YY.ZZ
$ npm –version
*vXX.YY.ZZ
Membuat Project React
Untuk membuat project React, kita dapat menggunakan create-react-app melalui terminal
$ npx create-react-app belajar-react
Setelah pembuatan project selesai, kita dapat menuju folder React dengan perintah cd belajar-react atau membuka project menggunakan VS Code dengan perintah code belajar-react dari terminal.
Struktur Folder React
belajar-react/
--node_modules/
--public/
--src/
--node_modules/
--public/
--src/
----App.css
----App.js
----App.test.js
----index.css
----index.js
----logo.svg
--.gitignore
--package-lock.json
--package.json
--README.md
- ReadMe.md adalah markdown file yang berfungsi untuk mendeskripsikan project.
- node_modules adalah folder yang berisi semua package node yang diinstall melalui npm.
- package.json adalah file yang berisi list dari semua package yang terinstall dan beberapa konfigurasi projek.
- package-lock.json adalah file yang mengdefinisikan bagaimana node memetakan versi dari node package.
- .gitignore adalah file yang berisi list file dan folder yang tidak ditambahkan ke version control git.
- public/ adalah folder yang berisi file development yang akan ditampilkan saat projek dijalankan.
Struktur Folder React
Saat mengembangkan projek menggunakan React, semua yang dibutuhkan berada pada folder src/. Fokus utama berada pada file src/App.js yang akan digunakan untuk mengimplementasikan component. Namun, pada tahap selanjutnya, component tersebut dapat dipisah menjadi beberapa file yang berisi satu component atau lebih.
Saat mengembangkan projek menggunakan React, semua yang dibutuhkan berada pada folder src/. Fokus utama berada pada file src/App.js yang akan digunakan untuk mengimplementasikan component. Namun, pada tahap selanjutnya, component tersebut dapat dipisah menjadi beberapa file yang berisi satu component atau lebih.
src/index.js adalah entry point dari projek React. File ini berkaitan erat dengan file src/App.js. src/App.test.js adalah file yang akan digunakan untuk testing. src/App.css dan src/index.css adalah file untuk styling default pada projek.
Menjalankan Project React
Perintah yang dapat digunakan untuk menjalankan projek React terdapat pada file package.json bagian
Perintah yang dapat digunakan untuk menjalankan projek React terdapat pada file package.json bagian
script.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
# Menjalankan projek react di http://localhost:3000
npm start
# Mem-build React untuk production
npm run build
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
# Menjalankan projek react di http://localhost:3000
npm start
# Mem-build React untuk production
npm run build