Untuk menyajikan file statis seperti gambar, file CSS, dan file JavaScript, gunakan fungsi middleware bawaan express.static di Express
Tanda tangan fungsi adalah
express.static(root, [options])Argumen root_ menentukan direktori root untuk melayani aset statis. Untuk informasi lebih lanjut tentang argumen options, lihat
Misalnya, gunakan kode berikut untuk menyajikan gambar, file CSS, dan file JavaScript di direktori bernama app.use(express.static('public')) 0
app.use(express.static('public')) _Sekarang, Anda dapat memuat file yang ada di direktori app.use(express.static('public')) 0
//localhost:3000/images/kitten.jpg //localhost:3000/css/style.css //localhost:3000/js/app.js //localhost:3000/images/bg.png //localhost:3000/hello.html _Express mencari file relatif terhadap direktori statis, jadi nama direktori statis bukan bagian dari URL
Untuk menggunakan beberapa direktori aset statis, panggil fungsi middleware express.static beberapa kali
app.use(express.static('public')) app.use(express.static('files'))Express mencari file sesuai urutan Anda menyetel direktori statis dengan fungsi middleware express.static
CATATAN. Untuk hasil terbaik, cache untuk meningkatkan kinerja penyajian aset statis
Untuk membuat awalan jalur virtual (di mana jalur sebenarnya tidak ada di sistem file) untuk file yang dilayani oleh fungsi express.static, untuk direktori statis, seperti yang ditunjukkan di bawah ini
app.use('/static', express.static('public')) _Sekarang, Anda dapat memuat file yang ada di direktori app.use(express.static('public')) 0 dari awalan jalur app.use(express.static('public')) 6
//localhost:3000/static/images/kitten.jpg //localhost:3000/static/css/style.css //localhost:3000/static/js/app.js //localhost:3000/static/images/bg.png //localhost:3000/static/hello.html _Namun, jalur yang Anda berikan ke fungsi express.static relatif terhadap direktori tempat Anda meluncurkan proses app.use(express.static('public')) 8 Anda. Jika Anda menjalankan aplikasi ekspres dari direktori lain, lebih aman menggunakan jalur absolut dari direktori yang ingin Anda layani
React adalah pustaka JavaScript populer yang dikembangkan oleh Facebook untuk membangun antarmuka pengguna. Editor Visual Studio Code mendukung React. js IntelliSense dan navigasi kode di luar kotak
Selamat datang di Bereaksi
Kami akan menggunakan __create-react-app untuk tutorial ini. Untuk menggunakan generator sekaligus menjalankan server aplikasi React, Anda memerlukan Node. js runtime JavaScript dan npm (Node. manajer paket js) diinstal. npm disertakan dengan Node. js yang dapat Anda unduh dan instal dari Node. unduhan js
tip. Untuk menguji apakah Anda memiliki Node. js dan npm terinstal dengan benar di mesin Anda, Anda dapat mengetik cd my-app npm start 0 dan cd my-app npm start 1 di terminal atau prompt perintah
Anda sekarang dapat membuat aplikasi React baru dengan mengetik
npx create-react-app my-appdi mana cd my-app npm start _2 adalah nama folder untuk aplikasi Anda. Ini mungkin memakan waktu beberapa menit untuk membuat aplikasi React dan menginstal dependensinya
catatan. Jika sebelumnya Anda telah menginstal create-react-app secara global melalui cd my-app npm start 4, kami sarankan Anda menghapus paket menggunakan cd my-app npm start 5 untuk memastikan bahwa npx selalu menggunakan versi terbaru
Ayo segera jalankan aplikasi React kita dengan menavigasi ke folder baru dan mengetik cd my-app npm start 6 untuk memulai server web dan membuka aplikasi di browser
________sebelas_______Anda akan melihat logo React dan tautan ke "Learn React" di http. // localhost. 3000 di browser Anda. Kami akan membiarkan server web berjalan sementara kami melihat aplikasi dengan VS Code
Untuk membuka aplikasi React Anda di VS Code, buka terminal lain atau jendela command prompt, arahkan ke folder cd my-app npm start 2 dan ketik cd my-app npm start 8
________dua puluh satu_______Pratinjau penurunan harga
Di File Explorer, satu file yang akan Anda lihat adalah aplikasi cd my-app npm start 9 Markdown file. Ini memiliki banyak informasi hebat tentang aplikasi dan Bereaksi secara umum. Cara yang bagus untuk meninjau README adalah dengan menggunakan Kode VS. Anda dapat membuka pratinjau di grup editor saat ini (Markdown. Buka Pratinjau ⇧⌘V (Windows, Linux Ctrl+Shift+V ) ) atau di grup editor baru di samping (Markdown. Buka Pratinjau ke Samping ⌘K V (Windows, Linux Ctrl+K V ) ). Anda akan mendapatkan pemformatan yang bagus, navigasi hyperlink ke header, dan penyorotan sintaks dalam blok kode.
Penyorotan sintaksis dan pencocokan braket
Sekarang perluas folder cd my-app code . _0 dan pilih file cd my-app code . 1. Anda akan melihat bahwa VS Code memiliki penyorotan sintaks untuk berbagai elemen kode sumber dan, jika Anda meletakkan kursor pada tanda kurung, braket yang cocok juga dipilih
IntelliSense
Saat mulai mengetik cd my-app code . _1, Anda akan melihat saran atau penyelesaian cerdas
Setelah Anda memilih saran dan mengetik cd my-app code . _3, Anda melihat jenis dan metode pada objek melalui IntelliSense
VS Code menggunakan layanan bahasa TypeScript untuk kecerdasan kode JavaScript dan memiliki fitur yang disebut (ATA). ATA menarik file Deklarasi Tipe npm (cd my-app code . _4) untuk modul npm yang dirujuk dalam cd my-app code . 5
Jika memilih metode, Anda juga akan mendapatkan bantuan parameter
Pergi ke Definisi, Intip definisi
Melalui layanan bahasa TypeScript, VS Code juga dapat memberikan informasi definisi tipe di editor melalui Go to Definition ( F12 ) atau Peek Definition ( ⌥F12 (Windows Alt+F12 , Linux Ctrl+Shift+F10 ) ). Letakkan kursor di atas cd my-app code . _6, klik kanan dan pilih Peek Definition. A akan terbuka menunjukkan definisi cd my-app code . _6 dari cd my-app code . 8.
Tekan Escape untuk menutup jendela Peek.
Halo Dunia
Mari perbarui aplikasi sampel ke "Hello World. ". Buat header H1 baru dengan "Halo, dunia. " dan ganti tag cd my-app code . _9 di import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); reportWebVitals(); 0 dengan import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); reportWebVitals(); 1
Setelah Anda menyimpan file cd my-app code . _1, instance server yang sedang berjalan akan memperbarui halaman web dan Anda akan melihat "Hello World. "ketika Anda me-refresh browser Anda
tip. VS Code mendukung Penyimpanan Otomatis, yang secara default menyimpan file Anda setelah penundaan. Periksa opsi Simpan Otomatis di menu File untuk mengaktifkan Simpan Otomatis atau langsung mengonfigurasi pengaturan pengguna import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); reportWebVitals(); 3
Men-debug Bereaksi
Untuk men-debug kode React sisi klien, kami akan menggunakan debugger JavaScript bawaan
catatan. Tutorial ini menganggap Anda telah menginstal browser Edge. Jika Anda ingin men-debug menggunakan Chrome, ganti peluncuran import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); reportWebVitals(); 4 dengan import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); reportWebVitals(); 5. Ada juga debugger untuk browser Firefox
Tetapkan titik istirahat
Untuk menyetel breakpoint di cd my-app code . _1, klik talang di sebelah kiri nomor baris. Ini akan mengatur breakpoint yang akan terlihat sebagai lingkaran merah
Konfigurasikan debugger
Awalnya kita perlu mengonfigurasi debugger. Untuk melakukannya, buka tampilan Jalankan dan Debug ( ⇧⌘D (Windows, Linux Ctrl+Shift+ D ) ) dan pilih buat peluncuran. tautan file json untuk membuat import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); reportWebVitals(); 7 file konfigurasi debugger. Pilih Aplikasi Web (Edge) dari daftar dropdown Select debugger. Ini akan membuat file import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); reportWebVitals(); _7 di folder import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); reportWebVitals(); 9 baru di proyek Anda yang menyertakan konfigurasi untuk meluncurkan situs web.
Kita perlu membuat satu perubahan untuk contoh kita. ubah port { "version": "0.2.0", "configurations": [ { "type": "msedge", "request": "launch", "name": "Launch Edge against localhost", "url": "//localhost:3000", "webRoot": "${workspaceFolder}" } ] } 0 dari { "version": "0.2.0", "configurations": [ { "type": "msedge", "request": "launch", "name": "Launch Edge against localhost", "url": "//localhost:3000", "webRoot": "${workspaceFolder}" } ] } 1 ke { "version": "0.2.0", "configurations": [ { "type": "msedge", "request": "launch", "name": "Launch Edge against localhost", "url": "//localhost:3000", "webRoot": "${workspaceFolder}" } ] } 2. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); reportWebVitals(); _7 Anda akan terlihat seperti ini
{ "version": "0.2.0", "configurations": [ { "type": "msedge", "request": "launch", "name": "Launch Edge against localhost", "url": "//localhost:3000", "webRoot": "${workspaceFolder}" } ] }Pastikan server pengembangan Anda berjalan (cd my-app npm start 6). Kemudian tekan F5 atau panah hijau untuk meluncurkan debugger dan membuka instance browser baru. Kode sumber tempat breakpoint disetel berjalan saat startup sebelum debugger dipasang, jadi kami tidak akan mencapai breakpoint hingga kami menyegarkan halaman web. Refresh halaman dan Anda harus mencapai breakpoint Anda.
Anda dapat menelusuri kode sumber Anda ( F10 ), memeriksa variabel seperti import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); reportWebVitals(); 1, dan melihat tumpukan panggilan dari sisi klien Bereaksi aplikasi.
Untuk informasi selengkapnya tentang debugger dan opsi yang tersedia, lihat dokumentasi kami tentang debugging browser
Pengeditan langsung dan debugging
Jika Anda menggunakan webpack bersama dengan aplikasi React, Anda dapat memiliki alur kerja yang lebih efisien dengan memanfaatkan mekanisme HMR webpack yang memungkinkan Anda melakukan pengeditan langsung dan debug langsung dari VS Code. Anda dapat mempelajari lebih lanjut di Live edit ini dan men-debug aplikasi React Anda langsung dari postingan blog VS Code dan dokumentasi Hot Module Replacement webpack
Linting
Linter menganalisis kode sumber Anda dan dapat memperingatkan Anda tentang potensi masalah sebelum Anda menjalankan aplikasi. Layanan bahasa JavaScript yang disertakan dengan VS Code memiliki dukungan pemeriksaan kesalahan sintaks secara default, yang dapat Anda lihat beraksi di panel Masalah (View > Problems ⇧⌘M (Windows, Linux Ctrl+Shift+M ) ).
Coba buat kesalahan kecil di kode sumber React Anda dan Anda akan melihat coretan merah dan kesalahan di panel Masalah
Linters dapat memberikan analisis yang lebih canggih, menegakkan konvensi pengkodean dan mendeteksi anti-pola. Linter JavaScript yang populer adalah ESLint. ESLint, bila digabungkan dengan ekstensi ESLint VS Code, memberikan pengalaman linting dalam produk yang luar biasa
Pertama, instal alat baris perintah ESLint
npm install -g eslintKemudian instal ekstensi ESLint dengan masuk ke tampilan Extensions dan ketik 'eslint'
Setelah ekstensi ESLint diinstal dan Kode VS dimuat ulang, Anda akan ingin membuat file konfigurasi ESLint, { "version": "0.2.0", "configurations": [ { "type": "msedge", "request": "launch", "name": "Launch Edge against localhost", "url": "//localhost:3000", "webRoot": "${workspaceFolder}" } ] } 6. Anda dapat membuatnya menggunakan ekstensi ESLint. Buat perintah konfigurasi ESLint dari Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ).
Perintah tersebut akan meminta Anda untuk menjawab serangkaian pertanyaan di panel Terminal. Ambil defaultnya, dan itu akan membuat file { "version": "0.2.0", "configurations": [ { "type": "msedge", "request": "launch", "name": "Launch Edge against localhost", "url": "//localhost:3000", "webRoot": "${workspaceFolder}" } ] } 6 di root proyek Anda yang terlihat seperti ini
module.exports = { env: { browser: true, es2020: true }, extends: ['eslint:recommended', 'plugin:react/recommended'], parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 11, sourceType: 'module' }, plugins: ['react'], rules: {} };ESLint sekarang akan menganalisis file terbuka dan menampilkan peringatan di cd my-app code . 1 tentang 'Aplikasi' yang ditentukan tetapi tidak pernah digunakan
Anda dapat mengubah aturan ESLint di file { "version": "0.2.0", "configurations": [ { "type": "msedge", "request": "launch", "name": "Launch Edge against localhost", "url": "//localhost:3000", "webRoot": "${workspaceFolder}" } ] } 6
Mari tambahkan aturan kesalahan untuk titik koma tambahan
"rules": { "no-extra-semi":"error" }Sekarang ketika Anda secara keliru memiliki beberapa titik koma pada satu baris, Anda akan melihat kesalahan (coretan merah) di editor dan entri kesalahan di panel Masalah
Kit Pemula Populer
Dalam tutorial ini, kami menggunakan generator _create-react-app untuk membuat aplikasi React sederhana. Ada banyak sampel bagus dan starter kit yang tersedia untuk membantu membangun aplikasi React pertama Anda.
Contoh Reaksi Kode VS
Ini adalah contoh aplikasi React, yang membuat aplikasi TODO sederhana dan menyertakan kode sumber untuk Node. server js ekspres. Ini juga menunjukkan cara menggunakan transpiler Babel ES6 dan kemudian menggunakan webpack untuk memaketkan aset situs
Reaksi TypeScript
Jika Anda ingin tahu tentang TypeScript dan React, Anda juga dapat membuat versi TypeScript dari aplikasi create-react-app dengan menentukan bahwa Anda ingin menggunakan template TypeScript
npx create-react-app my-app --template typescriptLihat detailnya di Menambahkan TypeScript di situs Create React App
Sudut
Angular adalah framework web populer lainnya. Jika Anda ingin melihat contoh Angular bekerja dengan VS Code, lihat resep Debugging dengan Angular CLI. Ini akan memandu Anda membuat aplikasi Angular dan mengonfigurasi file import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!'); ReactDOM.render(element, document.getElementById('root')); reportWebVitals(); _7 untuk debugger JavaScript
pertanyaan umum
Bisakah saya mendapatkan IntelliSense dalam JSX deklaratif?
Garpu. Misalnya, jika Anda membuka file create-react-app_ proyek cd my-app code . 8, Anda dapat melihat IntelliSense di dalam React JSX dalam metode npm install -g eslint 5