Muka menggunakan javascript buka folder lokal

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'))

app.use(express.static('public'))

Sekarang, Anda dapat memuat file yang ada di direktori

app.use(express.static('public'))

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://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'))

app.use(express.static('public'))

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://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'))

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-app

di mana

cd my-app
npm start

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

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

cd my-app
npm start

Pratinjau penurunan harga

Di File Explorer, satu file yang akan Anda lihat adalah aplikasi

cd my-app
npm start

Penyorotan sintaksis dan pencocokan braket

Sekarang perluas folder

cd my-app
code .

cd my-app
code .

IntelliSense

Saat mulai mengetik

cd my-app
code .

Setelah Anda memilih saran dan mengetik

cd my-app
code .

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 .

cd my-app
code .

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 .

cd my-app
code .

cd my-app
code .

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 .

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();

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();

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();

Setelah Anda menyimpan file

cd my-app
code .

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 .

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();

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();

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();

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": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

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();

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Pastikan server pengembangan Anda berjalan (

cd my-app
npm start

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();

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 eslint

Kemudian 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": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

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": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

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 .

Anda dapat mengubah aturan ESLint di file

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

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 typescript

Lihat 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();

pertanyaan umum

Bisakah saya mendapatkan IntelliSense dalam JSX deklaratif?

Garpu. Misalnya, jika Anda membuka file create-react-app_ proyek

cd my-app
code .

npm install -g eslint