react chat
1.0.0
Proyek ini di-bootstrap dengan Create React App.
Di bawah ini Anda akan menemukan beberapa informasi tentang cara melakukan tugas-tugas umum.
Anda dapat menemukan versi terbaru dari panduan ini di sini.
<title>publicpublic.env<meta> Dinamis di Servernpm start tidak mendeteksi perubahannpm test hang di macOS Sierranpm run build keluar terlalu dininpm run build gagal di Herokunpm run build gagal diperkecilBuat Aplikasi React dibagi menjadi dua paket:
create-react-app adalah utilitas baris perintah global yang Anda gunakan untuk membuat proyek baru.react-scripts adalah ketergantungan pengembangan pada proyek yang dihasilkan (termasuk yang ini). Anda hampir tidak perlu memperbarui create-react-app itu sendiri: ini mendelegasikan semua pengaturan ke react-scripts .
Saat Anda menjalankan create-react-app , proyek selalu dibuat dengan react-scripts versi terbaru sehingga Anda akan mendapatkan semua fitur baru dan peningkatan di aplikasi yang baru dibuat secara otomatis.
Untuk memperbarui proyek yang ada ke versi baru react-scripts , buka log perubahan, temukan versi yang Anda gunakan saat ini (periksa package.json di folder ini jika Anda tidak yakin), dan terapkan instruksi migrasi untuk proyek yang lebih baru. versi.
Dalam kebanyakan kasus, menambahkan versi react-scripts di package.json dan menjalankan npm install di folder ini sudah cukup, tetapi ada baiknya untuk memeriksa log perubahan untuk mengetahui potensi perubahan yang dapat menyebabkan gangguan.
Kami berkomitmen untuk meminimalkan perubahan yang dapat menyebabkan gangguan sehingga Anda dapat mengupgrade react-scripts tanpa kesulitan.
Kami selalu terbuka untuk tanggapan Anda.
Setelah dibuat, proyek Anda akan terlihat seperti ini:
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
Agar proyek dapat dibangun, file-file ini harus ada dengan nama file yang sama persis :
public/index.html adalah templat halaman;src/index.js adalah titik masuk JavaScript.Anda dapat menghapus atau mengganti nama file lainnya.
Anda dapat membuat subdirektori di dalam src . Untuk pembangunan kembali yang lebih cepat, hanya file di dalam src yang diproses oleh Webpack.
Anda perlu memasukkan file JS dan CSS apa pun ke dalam src , jika tidak, Webpack tidak akan melihatnya.
Hanya file di dalam public yang dapat digunakan dari public/index.html .
Baca petunjuk di bawah untuk menggunakan aset dari JavaScript dan HTML.
Namun, Anda dapat membuat lebih banyak direktori tingkat atas.
Mereka tidak akan disertakan dalam versi produksi sehingga Anda dapat menggunakannya untuk hal-hal seperti dokumentasi.
Di direktori proyek, Anda dapat menjalankan:
npm start Menjalankan aplikasi dalam mode pengembangan.
Buka http://localhost:3000 untuk melihatnya di browser.
Halaman akan dimuat ulang jika Anda melakukan pengeditan.
Anda juga akan melihat kesalahan lint apa pun di konsol.
npm test Meluncurkan test runner dalam mode jam tangan interaktif.
Lihat bagian tentang menjalankan pengujian untuk informasi lebih lanjut.
npm run build Membangun aplikasi untuk produksi ke folder build .
Ini menggabungkan React dengan benar dalam mode produksi dan mengoptimalkan build untuk kinerja terbaik.
Build diperkecil dan nama file menyertakan hash.
Aplikasi Anda siap untuk diterapkan!
Lihat bagian tentang penerapan untuk informasi selengkapnya.
npm run eject Catatan: ini adalah operasi satu arah. Sekali Anda eject , Anda tidak dapat kembali!
Jika Anda tidak puas dengan alat build dan pilihan konfigurasi, Anda dapat eject kapan saja. Perintah ini akan menghapus ketergantungan build tunggal dari proyek Anda.
Sebaliknya, ini akan menyalin semua file konfigurasi dan dependensi transitif (Webpack, Babel, ESLint, dll) langsung ke proyek Anda sehingga Anda memiliki kendali penuh atas semuanya. Semua perintah kecuali eject akan tetap berfungsi, tetapi perintah tersebut akan mengarah ke skrip yang disalin sehingga Anda dapat mengubahnya. Pada titik ini Anda sendirian.
Anda tidak perlu pernah menggunakan eject . Kumpulan fitur yang dikurasi cocok untuk penerapan kecil dan menengah, dan Anda tidak merasa berkewajiban untuk menggunakan fitur ini. Namun kami memahami bahwa alat ini tidak akan berguna jika Anda tidak dapat menyesuaikannya saat Anda siap menggunakannya.
Secara default, proyek yang dihasilkan menggunakan React versi terbaru.
Anda dapat merujuk ke dokumentasi React untuk informasi lebih lanjut tentang browser yang didukung.
Proyek ini mendukung superset standar JavaScript terbaru.
Selain fitur sintaksis ES6, ia juga mendukung:
Pelajari lebih lanjut tentang tahapan proposal yang berbeda.
Meskipun kami merekomendasikan penggunaan proposal eksperimental dengan hati-hati, Facebook banyak menggunakan fitur ini dalam kode produk, jadi kami bermaksud menyediakan codemod jika ada proposal yang berubah di masa mendatang.
Perhatikan bahwa proyek ini hanya mencakup beberapa polyfill ES6 :
Object.assign() melalui object-assign .Promise melalui promise .fetch() melalui whatwg-fetch . Jika Anda menggunakan fitur ES6+ lainnya yang memerlukan dukungan runtime (seperti Array.from() atau Symbol ), pastikan Anda menyertakan polyfill yang sesuai secara manual, atau browser yang Anda targetkan sudah mendukungnya.
Perhatikan juga bahwa penggunaan beberapa fitur sintaksis baru seperti for...of atau [...nonArrayValue] menyebabkan Babel mengeluarkan kode yang bergantung pada fitur runtime ES6 dan mungkin tidak berfungsi tanpa polyfill. Jika ragu, gunakan Babel REPL untuk melihat sintaks spesifik apa yang dikompilasi.
Untuk mengonfigurasi penyorotan sintaksis di editor teks favorit Anda, buka halaman dokumentasi Babel yang relevan dan ikuti petunjuknya. Beberapa editor paling populer tercakup.
Catatan: fitur ini tersedia dengan
[email protected]dan lebih tinggi.
Ini juga hanya berfungsi dengan npm 3 atau lebih tinggi.
Beberapa editor, termasuk Sublime Text, Atom, dan Visual Studio Code, menyediakan plugin untuk ESLint.
Mereka tidak diperlukan untuk linting. Anda akan melihat keluaran linter langsung di terminal Anda dan juga di konsol browser. Namun, jika Anda lebih suka hasil lint muncul langsung di editor Anda, ada beberapa langkah tambahan yang dapat Anda lakukan.
Anda perlu menginstal plugin ESLint untuk editor Anda terlebih dahulu. Lalu, tambahkan file bernama .eslintrc ke root proyek:
{
"extends" : "react-app"
}Sekarang editor Anda harus melaporkan peringatan linting.
Perhatikan bahwa meskipun Anda mengedit file .eslintrc lebih lanjut, perubahan ini hanya akan memengaruhi integrasi editor . Mereka tidak akan memengaruhi output lint terminal dan dalam browser. Ini karena Create React App sengaja memberikan seperangkat aturan minimal yang menemukan kesalahan umum.
Jika Anda ingin menerapkan gaya pengkodean untuk proyek Anda, pertimbangkan untuk menggunakan aturan gaya Prettier daripada ESLint.
Fitur ini saat ini hanya didukung oleh Visual Studio Code dan WebStorm.
Visual Studio Code dan WebStorm mendukung proses debug langsung dengan Create React App. Hal ini memungkinkan Anda sebagai pengembang untuk menulis dan men-debug kode React Anda tanpa meninggalkan editor, dan yang terpenting, hal ini memungkinkan Anda memiliki alur kerja pengembangan berkelanjutan, dengan peralihan konteks yang minimal, karena Anda tidak perlu berpindah antar alat.
Anda harus menginstal VS Code dan Ekstensi Debugger Chrome VS Code versi terbaru.
Kemudian tambahkan blok di bawah ini ke file launch.json Anda dan letakkan di dalam folder .vscode di direktori root aplikasi Anda.
{
"version" : " 0.2.0 " ,
"configurations" : [{
"name" : " Chrome " ,
"type" : " chrome " ,
"request" : " launch " ,
"url" : " http://localhost:3000 " ,
"webRoot" : " ${workspaceRoot}/src " ,
"sourceMapPathOverrides" : {
"webpack:///src/*" : " ${webRoot}/* "
}
}]
}Catatan: URL mungkin berbeda jika Anda melakukan penyesuaian melalui variabel lingkungan HOST atau PORT.
Mulai aplikasi Anda dengan menjalankan npm start , dan mulai debugging di VS Code dengan menekan F5 atau dengan mengklik ikon debug hijau. Anda sekarang dapat menulis kode, mengatur breakpoint, membuat perubahan pada kode, dan men-debug kode yang baru Anda modifikasi—semuanya dari editor Anda.
Mengalami masalah dengan Debugging VS Code? Silakan lihat panduan pemecahan masalah mereka.
Anda harus menginstal ekstensi Chrome Dukungan WebStorm dan JetBrains IDE.
Di menu WebStorm Run pilih Edit Configurations... . Kemudian klik + dan pilih JavaScript Debug . Rekatkan http://localhost:3000 ke dalam kolom URL dan simpan konfigurasinya.
Catatan: URL mungkin berbeda jika Anda melakukan penyesuaian melalui variabel lingkungan HOST atau PORT.
Mulai aplikasi Anda dengan menjalankan npm start , lalu tekan ^D di macOS atau F9 di Windows dan Linux atau klik ikon debug hijau untuk mulai melakukan debug di WebStorm.
Dengan cara yang sama Anda dapat men-debug aplikasi Anda di IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, dan RubyMine.
Prettier adalah pemformat kode berpendirian keras dengan dukungan untuk JavaScript, CSS, dan JSON. Dengan Prettier Anda dapat memformat kode yang Anda tulis secara otomatis untuk memastikan gaya kode dalam proyek Anda. Lihat halaman GitHub Prettier untuk informasi lebih lanjut, dan lihat halaman ini untuk melihatnya beraksi.
Untuk memformat kode kita setiap kali kita membuat komit di git, kita perlu menginstal dependensi berikut:
npm install --save husky lint-staged prettier Alternatifnya, Anda dapat menggunakan yarn :
yarn add husky lint-staged prettierhusky memudahkan penggunaan githooks seolah-olah itu adalah skrip npm.lint-staged memungkinkan kita menjalankan skrip pada file bertahap di git. Lihat postingan blog ini tentang lint-staged untuk mempelajarinya lebih lanjut.prettier adalah pemformat JavaScript yang akan kita jalankan sebelum dikomit. Sekarang kita dapat memastikan setiap file diformat dengan benar dengan menambahkan beberapa baris ke package.json di root proyek.
Tambahkan baris berikut ke bagian scripts :
"scripts": {
+ "precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build", Selanjutnya kita menambahkan field 'lint-staged' ke package.json , misalnya:
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": { Sekarang, setiap kali Anda melakukan commit, Prettier akan memformat file yang diubah secara otomatis. Anda juga dapat menjalankan ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}" untuk memformat seluruh proyek Anda untuk pertama kalinya.
Selanjutnya Anda mungkin ingin mengintegrasikan Prettier di editor favorit Anda. Baca bagian Integrasi Editor di halaman GitHub yang Lebih Cantik.
<title> Anda dapat menemukan file HTML sumber di folder public proyek yang dihasilkan. Anda dapat mengedit tag <title> di dalamnya untuk mengubah judul dari “React App” menjadi yang lain.
Perhatikan bahwa biasanya Anda tidak akan terlalu sering mengedit file di folder public . Misalnya, penambahan stylesheet dilakukan tanpa menyentuh HTML.
Jika Anda perlu memperbarui judul halaman secara dinamis berdasarkan konten, Anda dapat menggunakan API document.title browser. Untuk skenario yang lebih kompleks ketika Anda ingin mengubah judul dari komponen React, Anda dapat menggunakan React Helm, perpustakaan pihak ketiga.
Jika Anda menggunakan server khusus untuk aplikasi Anda dalam produksi dan ingin mengubah judul sebelum dikirim ke browser, Anda dapat mengikuti saran di bagian ini. Alternatifnya, Anda dapat membuat terlebih dahulu setiap halaman sebagai file HTML statis yang kemudian memuat bundel JavaScript, yang dibahas di sini.
Proyek yang dihasilkan menyertakan React dan ReactDOM sebagai dependensi. Ini juga mencakup serangkaian skrip yang digunakan oleh Create React App sebagai ketergantungan pengembangan. Anda dapat menginstal dependensi lain (misalnya, React Router) dengan npm :
npm install --save react-router Alternatifnya, Anda dapat menggunakan yarn :
yarn add react-router Ini berfungsi untuk perpustakaan apa pun, bukan hanya react-router .
Pengaturan proyek ini mendukung modul ES6 berkat Babel.
Meskipun Anda masih dapat menggunakan require() dan module.exports , sebaiknya gunakan import dan export saja.
Misalnya:
Button.js import React , { Component } from 'react' ;
class Button extends Component {
render ( ) {
// ...
}
}
export default Button ; // Don’t forget to use export default!DangerButton.js import React , { Component } from 'react' ;
import Button from './Button' ; // Import a component from another file
class DangerButton extends Component {
render ( ) {
return < Button color = "red" /> ;
}
}
export default DangerButton ;Waspadai perbedaan antara ekspor default dan ekspor bernama. Ini adalah sumber kesalahan yang umum.
Kami menyarankan agar Anda tetap menggunakan impor dan ekspor default ketika modul hanya mengekspor satu hal (misalnya, komponen). Itulah yang Anda dapatkan saat menggunakan export default Button dan import Button from './Button' .
Ekspor bernama berguna untuk modul utilitas yang mengekspor beberapa fungsi. Sebuah modul dapat memiliki paling banyak satu ekspor default dan ekspor bernama sebanyak yang Anda inginkan.
Pelajari lebih lanjut tentang modul ES6:
Daripada mengunduh seluruh aplikasi sebelum pengguna dapat menggunakannya, pemisahan kode memungkinkan Anda membagi kode menjadi bagian-bagian kecil yang kemudian dapat dimuat sesuai permintaan.
Penyiapan proyek ini mendukung pemisahan kode melalui import() dinamis. Proposalnya ada di tahap 3. Bentuk seperti fungsi import() mengambil nama modul sebagai argumen dan mengembalikan Promise yang selalu ditentukan ke objek namespace modul.
Berikut ini contohnya:
moduleA.js const moduleA = 'Hello' ;
export { moduleA } ;App.js import React , { Component } from 'react' ;
class App extends Component {
handleClick = ( ) => {
import ( './moduleA' )
. then ( ( { moduleA } ) => {
// Use moduleA
} )
. catch ( err => {
// Handle failure
} ) ;
} ;
render ( ) {
return (
< div >
< button onClick = { this . handleClick } > Load </ button >
</ div >
) ;
}
}
export default App ; Ini akan menjadikan moduleA.js dan semua dependensi uniknya sebagai bagian terpisah yang hanya dimuat setelah pengguna mengklik tombol 'Muat'.
Anda juga dapat menggunakannya dengan sintaks async / await jika Anda menginginkannya.
Jika Anda menggunakan React Router, lihat tutorial ini tentang cara menggunakan pemisahan kode dengannya. Anda dapat menemukan repositori GitHub pendamping di sini.
Lihat juga bagian Pemisahan Kode di dokumentasi React.
Penyiapan proyek ini menggunakan Webpack untuk menangani semua aset. Webpack menawarkan cara khusus untuk “memperluas” konsep import di luar JavaScript. Untuk menyatakan bahwa file JavaScript bergantung pada file CSS, Anda perlu mengimpor CSS dari file JavaScript :
Button.css. Button {
padding : 20 px ;
}Button.js import React , { Component } from 'react' ;
import './Button.css' ; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render ( ) {
// You can use them as regular CSS styles
return < div className = "Button" /> ;
}
}Ini tidak diperlukan untuk React tetapi banyak orang menganggap fitur ini nyaman. Anda dapat membaca tentang manfaat pendekatan ini di sini. Namun Anda harus menyadari bahwa ini membuat kode Anda kurang portabel untuk alat dan lingkungan build lain dibandingkan Webpack.
Dalam pengembangannya, mengekspresikan dependensi dengan cara ini memungkinkan gaya Anda dimuat ulang dengan cepat saat Anda mengeditnya. Dalam produksi, semua file CSS akan digabungkan menjadi satu file .css yang diperkecil dalam keluaran build.
Jika Anda khawatir tentang penggunaan semantik khusus Webpack, Anda dapat memasukkan semua CSS Anda langsung ke src/index.css . Impor tersebut masih akan diimpor dari src/index.js , tetapi Anda selalu dapat menghapus impor tersebut jika nanti Anda bermigrasi ke alat build lain.
Penyiapan proyek ini mengecilkan CSS Anda dan menambahkan awalan vendor ke dalamnya secara otomatis melalui Autoprefixer sehingga Anda tidak perlu mengkhawatirkannya.
Misalnya, ini:
. App {
display : flex;
flex-direction : row;
align-items : center;
}menjadi ini:
. App {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : horizontal;
-webkit-box-direction : normal;
-ms-flex-direction : row;
flex-direction : row;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
}Jika Anda perlu menonaktifkan pengaturan awal otomatis karena alasan tertentu, ikuti bagian ini.
Secara umum, kami menyarankan Anda untuk tidak menggunakan kembali kelas CSS yang sama di berbagai komponen. Misalnya, daripada menggunakan kelas .Button CSS dalam komponen <AcceptButton> dan <RejectButton> , sebaiknya buat komponen <Button> dengan gaya .Button -nya sendiri, yang dapat dirender oleh <AcceptButton> dan <RejectButton> (tetapi tidak mewarisi).
Mengikuti aturan ini sering kali membuat praprosesor CSS kurang berguna, karena fitur seperti mixin dan nesting digantikan oleh komposisi komponen. Namun, Anda dapat mengintegrasikan praprosesor CSS jika Anda menganggapnya berharga. Dalam panduan ini, kami akan menggunakan Sass, tetapi Anda juga dapat menggunakan Less, atau alternatif lain.
Pertama, mari kita instal antarmuka baris perintah untuk Sass:
npm install --save node-sass-chokidar Alternatifnya, Anda dapat menggunakan yarn :
yarn add node-sass-chokidar Kemudian di package.json , tambahkan baris berikut ke scripts :
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",Catatan: Untuk menggunakan praprosesor yang berbeda, ganti perintah
build-cssdanwatch-csssesuai dengan dokumentasi praprosesor Anda.
Sekarang Anda dapat mengganti nama src/App.css menjadi src/App.scss dan menjalankan npm run watch-css . Pengamat akan menemukan setiap file Sass di subdirektori src , dan membuat file CSS yang sesuai di sebelahnya, dalam kasus kami menimpa src/App.css . Karena src/App.js masih mengimpor src/App.css , gaya menjadi bagian dari aplikasi Anda. Anda sekarang dapat mengedit src/App.scss , dan src/App.css akan dibuat ulang.
Untuk berbagi variabel antar file Sass, Anda dapat menggunakan impor Sass. Misalnya, src/App.scss dan file gaya komponen lainnya dapat menyertakan @import "./shared.scss"; dengan definisi variabel.
Untuk mengaktifkan impor file tanpa menggunakan jalur relatif, Anda dapat menambahkan opsi --include-path ke perintah di package.json .
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
Ini akan memungkinkan Anda melakukan impor seperti
@import ' styles/_colors.scss ' ; // assuming a styles directory under src/
@import ' nprogress/nprogress ' ; // importing a css file from the nprogress node module Pada titik ini Anda mungkin ingin menghapus semua file CSS dari kontrol sumber, dan menambahkan src/**/*.css ke file .gitignore Anda. Biasanya merupakan praktik yang baik untuk menjaga produk build di luar kendali sumber.
Sebagai langkah terakhir, Anda mungkin merasa nyaman menjalankan watch-css secara otomatis dengan npm start , dan menjalankan build-css sebagai bagian dari npm run build . Anda dapat menggunakan operator && untuk menjalankan dua skrip secara berurutan. Namun, tidak ada cara lintas platform untuk menjalankan dua skrip secara paralel, jadi kami akan menginstal paket untuk ini:
npm install --save npm-run-all Alternatifnya, Anda dapat menggunakan yarn :
yarn add npm-run-all Kemudian kita dapat mengubah skrip start dan build untuk menyertakan perintah praprosesor CSS:
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
} Sekarang menjalankan npm start dan npm run build juga membuat file Sass.
Mengapa node-sass-chokidar ?
node-sass telah dilaporkan mengalami masalah berikut:
node-sass --watch telah dilaporkan mengalami masalah kinerja dalam kondisi tertentu saat digunakan di mesin virtual atau dengan buruh pelabuhan.
Kompilasi gaya tak terbatas #1939
node-sass telah dilaporkan mengalami masalah dalam mendeteksi file baru di direktori #1891
node-sass-chokidar digunakan di sini untuk mengatasi masalah ini.
Dengan Webpack, penggunaan aset statis seperti gambar dan font bekerja mirip dengan CSS.
Anda dapat import file langsung di modul JavaScript . Ini memberitahu Webpack untuk memasukkan file itu ke dalam bundel. Tidak seperti impor CSS, mengimpor file memberi Anda nilai string. Nilai ini adalah jalur terakhir yang dapat Anda referensikan dalam kode Anda, misalnya sebagai atribut src pada gambar atau href pada link ke PDF.
Untuk mengurangi jumlah permintaan ke server, mengimpor gambar yang berukuran kurang dari 10.000 byte akan mengembalikan URI data, bukan jalur. Ini berlaku untuk ekstensi file berikut: bmp, gif, jpg, jpeg, dan png. File SVG dikecualikan karena #1153.
Berikut ini contohnya:
import React from 'react' ;
import logo from './logo.png' ; // Tell Webpack this JS file uses this image
console . log ( logo ) ; // /logo.84287d09.png
function Header ( ) {
// Import result is the URL of your image
return < img src = { logo } alt = "Logo" /> ;
}
export default Header ;Hal ini memastikan bahwa ketika proyek dibuat, Webpack akan memindahkan gambar dengan benar ke dalam folder build, dan memberi kami jalur yang benar.
Ini juga berfungsi di CSS:
. Logo {
background-image : url (. / logo.png);
} Webpack menemukan semua referensi modul relatif dalam CSS (dimulai dengan ./ ) dan menggantinya dengan jalur terakhir dari bundel yang dikompilasi. Jika Anda salah ketik atau tidak sengaja menghapus file penting, Anda akan melihat kesalahan kompilasi, sama seperti saat Anda mengimpor modul JavaScript yang tidak ada. Nama file akhir dalam bundel yang dikompilasi dihasilkan oleh Webpack dari hash konten. Jika konten file berubah di masa mendatang, Webpack akan memberinya nama berbeda dalam produksi sehingga Anda tidak perlu khawatir tentang penyimpanan aset dalam cache dalam jangka panjang.
Harap diperhatikan bahwa ini juga merupakan fitur khusus Webpack.
Ini tidak diperlukan untuk React tetapi banyak orang menikmatinya (dan React Native menggunakan mekanisme serupa untuk gambar).
Cara alternatif menangani aset statis dijelaskan di bagian berikutnya.
publicCatatan: fitur ini tersedia dengan
[email protected]dan lebih tinggi.
Folder public berisi file HTML sehingga Anda dapat mengubahnya, misalnya untuk mengatur judul halaman. Tag <script> dengan kode yang dikompilasi akan ditambahkan secara otomatis selama proses pembuatan.
Anda juga dapat menambahkan aset lain ke folder public .
Perhatikan bahwa kami biasanya menganjurkan Anda untuk import aset dalam file JavaScript. Misalnya, lihat bagian tentang menambahkan stylesheet serta menambahkan gambar dan font. Mekanisme ini memberikan sejumlah manfaat:
Namun ada jalan keluar yang dapat Anda gunakan untuk menambahkan aset di luar sistem modul.
Jika Anda memasukkan file ke folder public , file tersebut tidak akan diproses oleh Webpack. Sebaliknya itu akan disalin ke folder build tanpa disentuh. Untuk mereferensikan aset di folder public , Anda perlu menggunakan variabel khusus bernama PUBLIC_URL .
Di dalam index.html , Anda dapat menggunakannya seperti ini:
< link rel =" shortcut icon " href =" %PUBLIC_URL%/favicon.ico " > Hanya file di dalam folder public yang dapat diakses dengan awalan %PUBLIC_URL% . Jika Anda perlu menggunakan file dari src atau node_modules , Anda harus menyalinnya di sana untuk secara eksplisit menentukan niat Anda menjadikan file ini sebagai bagian dari build.
Saat Anda menjalankan npm run build , Create React App akan menggantikan %PUBLIC_URL% dengan jalur absolut yang benar sehingga proyek Anda tetap berfungsi meskipun Anda menggunakan perutean sisi klien atau menghostingnya di URL non-root.
Dalam kode JavaScript, Anda dapat menggunakan process.env.PUBLIC_URL untuk tujuan serupa:
render ( ) {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return < img src = { process . env . PUBLIC_URL + '/img/logo.png' } /> ;
}Ingatlah kelemahan dari pendekatan ini:
public yang diproses atau diperkecil.public Biasanya kami menyarankan untuk mengimpor stylesheet, gambar, dan font dari JavaScript. Folder public berguna sebagai solusi untuk sejumlah kasus yang kurang umum:
manifest.webmanifest .pace.js di luar kode yang dibundel.<script> . Perhatikan bahwa jika Anda menambahkan <script> yang mendeklarasikan variabel global, Anda juga perlu membaca bagian selanjutnya tentang cara menggunakannya.
Saat Anda menyertakan skrip dalam file HTML yang mendefinisikan variabel global dan mencoba menggunakan salah satu variabel tersebut dalam kode, linter akan mengeluh karena tidak dapat melihat definisi variabel.
Anda dapat menghindari hal ini dengan membaca variabel global secara eksplisit dari objek window , misalnya:
const $ = window . $ ;Ini memperjelas bahwa Anda menggunakan variabel global dengan sengaja, bukan karena kesalahan ketik.
Alternatifnya, Anda dapat memaksa linter mengabaikan baris mana pun dengan menambahkan // eslint-disable-line setelahnya.
Anda tidak harus menggunakan React Bootstrap bersamaan dengan React tetapi ini adalah perpustakaan populer untuk mengintegrasikan Bootstrap dengan aplikasi React. Jika Anda membutuhkannya, Anda dapat mengintegrasikannya dengan Create React App dengan mengikuti langkah-langkah berikut:
Instal React Bootstrap dan Bootstrap dari npm. React Bootstrap tidak menyertakan Bootstrap CSS jadi ini perlu diinstal juga:
npm install --save react-bootstrap bootstrap@3 Alternatifnya, Anda dapat menggunakan yarn :
yarn add react-bootstrap bootstrap@3 Impor Bootstrap CSS dan opsional CSS tema Bootstrap di awal file src/index.js Anda:
import 'bootstrap/dist/css/bootstrap.css' ;
import 'bootstrap/dist/css/bootstrap-theme.css' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles. Impor komponen React Bootstrap yang diperlukan dalam file src/App.js atau file komponen khusus Anda:
import { Navbar , Jumbotron , Button } from 'react-bootstrap' ; Sekarang Anda siap untuk menggunakan komponen React Bootstrap yang diimpor dalam hierarki komponen Anda yang ditentukan dalam metode render. Berikut adalah contoh App.js yang dibuat ulang menggunakan React Bootstrap.
Terkadang Anda mungkin perlu mengubah gaya visual Bootstrap (atau paket setara).
Kami menyarankan pendekatan berikut:
Berikut adalah contoh penambahan Bootstrap yang disesuaikan dengan mengikuti langkah-langkah berikut.
Flow adalah pemeriksa tipe statis yang membantu Anda menulis kode dengan lebih sedikit bug. Lihat pengantar penggunaan tipe statis dalam JavaScript jika Anda baru mengenal konsep ini.
Versi terbaru Flow dapat langsung digunakan dengan proyek Create React App.
Untuk menambahkan Flow ke proyek Create React App, ikuti langkah-langkah berikut:
npm install --save flow-bin (atau yarn add flow-bin )."flow": "flow" ke bagian scripts package.json Anda.npm run flow init (atau yarn flow init ) untuk membuat file .flowconfig di direktori root.// @flow ke file apa pun yang ingin Anda ketikkan check (misalnya, ke src/App.js ). Sekarang Anda dapat menjalankan npm run flow (atau yarn flow ) untuk memeriksa kesalahan jenis pada file. Anda juga dapat menggunakan IDE seperti Nuclide untuk pengalaman terintegrasi yang lebih baik. Di masa depan kami berencana untuk mengintegrasikannya ke dalam Create React App lebih dekat lagi.
Untuk mempelajari lebih lanjut tentang Flow, lihat dokumentasinya.
Create React App tidak menentukan solusi perutean tertentu, tetapi React Router adalah yang paling populer.
Untuk menambahkannya, jalankan:
npm install --save react-router-dom Alternatifnya, Anda dapat menggunakan yarn :
yarn add react-router-dom Untuk mencobanya, hapus semua kode di src/App.js dan ganti dengan salah satu contoh di situsnya. Contoh Dasar adalah tempat yang baik untuk memulai.
Perhatikan bahwa Anda mungkin perlu mengonfigurasi server produksi untuk mendukung perutean sisi klien sebelum menerapkan aplikasi Anda.
Catatan: fitur ini tersedia dengan
[email protected]dan lebih tinggi.
Proyek Anda dapat menggunakan variabel yang dideklarasikan di lingkungan Anda seolah-olah variabel tersebut dideklarasikan secara lokal di file JS Anda. Secara default, Anda akan menentukan NODE_ENV untuk Anda, dan variabel lingkungan lainnya yang dimulai dengan REACT_APP_ .
Variabel lingkungan tertanam selama waktu pembangunan . Karena Create React App menghasilkan bundel HTML/CSS/JS statis, ia tidak mungkin membacanya saat runtime. Untuk membacanya saat runtime, Anda perlu memuat HTML ke dalam memori di server dan mengganti placeholder saat runtime, seperti yang dijelaskan di sini. Alternatifnya, Anda dapat membangun kembali aplikasi di server kapan pun Anda mengubahnya.
Catatan: Anda harus membuat variabel lingkungan khusus yang dimulai dengan
REACT_APP_. Variabel lain kecualiNODE_ENVakan diabaikan untuk menghindari pengungkapan kunci pribadi secara tidak sengaja pada mesin yang mungkin memiliki nama yang sama. Mengubah variabel lingkungan apa pun akan mengharuskan Anda memulai ulang server pengembangan jika sedang berjalan.
Variabel lingkungan ini akan ditentukan untuk Anda di process.env . Misalnya, memiliki variabel lingkungan bernama REACT_APP_SECRET_CODE akan diekspos di JS Anda sebagai process.env.REACT_APP_SECRET_CODE .
Ada juga variabel lingkungan bawaan khusus yang disebut NODE_ENV . Anda dapat membacanya dari process.env.NODE_ENV . Saat Anda menjalankan npm start , selalu sama dengan 'development' , saat Anda menjalankan npm test selalu sama dengan 'test' , dan saat Anda menjalankan npm run build untuk membuat bundel produksi, selalu sama dengan 'production' . Anda tidak dapat mengganti NODE_ENV secara manual. Hal ini mencegah pengembang secara tidak sengaja menerapkan pengembangan yang lambat ke produksi.
Variabel lingkungan ini dapat berguna untuk menampilkan informasi secara kondisional berdasarkan lokasi penerapan proyek atau menggunakan data sensitif yang berada di luar kontrol versi.
Pertama, Anda perlu menentukan variabel lingkungan. Misalnya, Anda ingin menggunakan rahasia yang ditentukan di lingkungan di dalam <form> :
render ( ) {
return (
< div >
< small > You are running this application in < b > { process . env . NODE_ENV } </ b > mode. </ small >
< form >
< input type = "hidden" defaultValue = { process . env . REACT_APP_SECRET_CODE } />
</ form >
</ div >
) ;
} Selama pembangunan, process.env.REACT_APP_SECRET_CODE akan diganti dengan nilai variabel lingkungan REACT_APP_SECRET_CODE saat ini. Ingatlah bahwa variabel NODE_ENV akan disetel untuk Anda secara otomatis.
Saat Anda memuat aplikasi di browser dan memeriksa <input> , Anda akan melihat nilainya disetel ke abcdef , dan teks tebal akan menampilkan lingkungan yang disediakan saat menggunakan npm start :
< div >
< small > You are running this application in < b > development </ b > mode. </ small >
< form >
< input type =" hidden " value =" abcdef " />
</ form >
</ div > Formulir di atas mencari variabel bernama REACT_APP_SECRET_CODE dari lingkungan. Untuk menggunakan nilai ini, kita perlu mendefinisikannya di lingkungan. Ini dapat dilakukan dengan dua cara: di shell Anda atau di file .env . Kedua cara ini dijelaskan dalam beberapa bagian berikutnya.
Memiliki akses ke NODE_ENV juga berguna untuk melakukan tindakan secara kondisional:
if ( process . env . NODE_ENV !== 'production' ) {
analytics . disable ( ) ;
} Saat Anda mengkompilasi aplikasi dengan npm run build , langkah minifikasi akan menghapus kondisi ini, dan bundel yang dihasilkan akan lebih kecil.
Catatan: fitur ini tersedia dengan
[email protected]dan lebih tinggi.
Anda juga dapat mengakses variabel lingkungan yang dimulai dengan REACT_APP_ di public/index.html . Misalnya:
< title > %REACT_APP_WEBSITE_NAME% </ title >Perhatikan bahwa peringatan dari bagian di atas berlaku:
NODE_ENV dan PUBLIC_URL ), nama variabel harus dimulai dengan REACT_APP_ agar berfungsi.Mendefinisikan variabel lingkungan dapat bervariasi antar OS. Penting juga untuk mengetahui bahwa cara ini bersifat sementara selama masa sesi shell.
set " REACT_APP_SECRET_CODE = abcdef " && npm start(Catatan: Kutipan di sekitar penetapan variabel diperlukan untuk menghindari spasi tambahan.)
( $ env: REACT_APP_SECRET_CODE = " abcdef " ) -and (npm start)REACT_APP_SECRET_CODE=abcdef npm start.envCatatan: fitur ini tersedia dengan
[email protected]dan lebih tinggi.
Untuk menentukan variabel lingkungan permanen, buat file bernama .env di root proyek Anda:
REACT_APP_SECRET_CODE=abcdef
Catatan: Anda harus membuat variabel lingkungan khusus yang dimulai dengan
REACT_APP_. Variabel lain kecualiNODE_ENVakan diabaikan untuk menghindari pengungkapan kunci pribadi secara tidak sengaja pada mesin yang mungkin memiliki nama yang sama. Mengubah variabel lingkungan apa pun akan mengharuskan Anda memulai ulang server pengembangan jika sedang berjalan.
File .env harus diperiksa ke dalam kontrol sumber (dengan pengecualian .env*.local ).
.env apa lagi yang bisa digunakan?Catatan: fitur ini tersedia dengan
[email protected]dan lebih tinggi .
.env : Bawaan..env.local : Penggantian lokal. File ini dimuat untuk semua lingkungan kecuali pengujian..env.development , .env.test , .env.production : Pengaturan khusus lingkungan..env.development.local , .env.test.local , .env.production.local : Penggantian lokal pada pengaturan khusus lingkungan.File di sebelah kiri mempunyai prioritas lebih dibandingkan file di sebelah kanan:
npm start : .env.development.local , .env.development , .env.local , .envnpm run build : .env.production.local , .env.production , .env.local , .envnpm test : .env.test.local , .env.test , .env (note .env.local hilang) Variabel -variabel ini akan bertindak sebagai default jika mesin tidak secara eksplisit mengaturnya.
Silakan merujuk ke dokumentasi DOTENV untuk detail lebih lanjut.
Catatan: Jika Anda mendefinisikan variabel lingkungan untuk pengembangan, platform CI dan/atau hosting Anda kemungkinan besar akan membutuhkan ini juga. Konsultasikan dengan dokumentasi mereka bagaimana melakukan ini. Misalnya, lihat dokumentasi untuk Travis CI atau Heroku.
.envCatatan: Fitur ini tersedia dengan
[email protected]dan lebih tinggi.
Perluas variabel yang sudah ada di mesin Anda untuk digunakan di file .env Anda (menggunakan dotenv-expand).
Misalnya, untuk mendapatkan variabel lingkungan npm_package_version :
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
Atau memperluas variabel lokal ke file .env saat ini:
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
Banyak perpustakaan populer menggunakan dekorator dalam dokumentasi mereka.
Buat aplikasi React tidak mendukung sintaks dekorator saat ini karena:
Namun dalam banyak kasus Anda dapat menulis ulang kode berbasis dekorator tanpa dekorator baik-baik saja.
Silakan merujuk ke dua utas ini untuk referensi:
Buat Aplikasi React akan menambahkan dukungan dekorator ketika spesifikasi maju ke tahap yang stabil.
React tidak menentukan pendekatan khusus untuk pengambilan data, tetapi orang biasanya menggunakan perpustakaan seperti Axios atau API fetch() yang disediakan oleh browser. Nyaman, Buat Aplikasi React termasuk polyfill untuk fetch() sehingga Anda dapat menggunakannya tanpa khawatir tentang dukungan browser.
Fungsi Global fetch memungkinkan untuk dengan mudah membuat permintaan AJAX. Dibutuhkan dalam URL sebagai input dan mengembalikan Promise yang diselesaikan menjadi objek Response . Anda dapat menemukan informasi lebih lanjut tentang fetch di sini.
Proyek ini juga mencakup janji polyfill yang menyediakan implementasi penuh janji/A+. Janji mewakili hasil akhirnya dari operasi yang tidak sinkron, Anda dapat menemukan informasi lebih lanjut tentang janji di sini dan di sini. Baik Axios dan fetch() menggunakan janji di bawah kap. Anda juga dapat menggunakan sintaks async / await untuk mengurangi sarang panggilan balik.
Anda dapat mempelajari lebih lanjut tentang membuat permintaan AJAX dari komponen React di entri FAQ di situs web React.
Tutorial ini akan membantu Anda mengintegrasikan aplikasi Anda dengan backend API yang berjalan di port lain, menggunakan fetch() untuk mengaksesnya.
Lihat tutorial ini. Anda dapat menemukan repositori github pendamping di sini.
Lihat tutorial ini. Anda dapat menemukan repositori github pendamping di sini.
Catatan: Fitur ini tersedia dengan
[email protected]dan lebih tinggi.
Orang sering melayani aplikasi reaksi front-end dari host dan port yang sama dengan implementasi backend mereka.
Misalnya, pengaturan produksi mungkin terlihat seperti ini setelah aplikasi digunakan:
/ - static server returns index.html with React app
/todos - static server returns index.html with React app
/api/todos - server handles any /api/* requests using the backend implementation
Pengaturan seperti itu tidak diperlukan. Namun, jika Anda memiliki pengaturan seperti ini, lebih mudah untuk menulis permintaan seperti fetch('/api/todos') tanpa khawatir mengarahkan mereka ke host atau port lain selama pengembangan.
Untuk memberi tahu server pengembangan ke proxy setiap permintaan yang tidak diketahui ke server API Anda dalam pengembangan, tambahkan bidang proxy ke package.json Anda.json, misalnya:
"proxy" : "http://localhost:4000" , Dengan cara ini, ketika Anda fetch('/api/todos') dalam pengembangan, server pengembangan akan menyadari bahwa itu bukan aset statis, dan akan memberikan permintaan Anda ke http://localhost:4000/api/todos sebagai fallback. Server pengembangan hanya akan mencoba mengirim permintaan tanpa text/html di header Accept ke proxy.
Nyaman, ini menghindari masalah CORS dan pesan kesalahan seperti ini dalam pengembangan:
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Perlu diingat bahwa proxy hanya memiliki efek dalam pengembangan (dengan npm start ), dan terserah Anda untuk memastikan bahwa URL seperti /api/todos menunjuk ke hal yang benar dalam produksi. Anda tidak harus menggunakan awalan /api . Setiap permintaan yang tidak diakui tanpa header text/html Accept akan diarahkan ke proxy yang ditentukan.
Opsi proxy mendukung koneksi HTTP, HTTPS, dan Websocket.
Jika opsi proxy tidak cukup fleksibel untuk Anda, atau Anda bisa:
Saat Anda mengaktifkan opsi proxy , Anda memilih ke dalam set cek host yang lebih ketat. Ini diperlukan karena membiarkan backend terbuka untuk host jarak jauh membuat komputer Anda rentan terhadap serangan rebinding DNS. Masalah ini dijelaskan dalam artikel ini dan masalah ini.
Ini seharusnya tidak memengaruhi Anda saat berkembang di localhost , tetapi jika Anda berkembang dari jarak jauh seperti yang dijelaskan di sini, Anda akan melihat kesalahan ini di browser setelah mengaktifkan opsi proxy :
Header host tidak valid
Untuk mengatasinya, Anda dapat menentukan host pengembangan publik Anda dalam file yang disebut .env.development di akar proyek Anda:
HOST=mypublicdevhost.com
Jika Anda memulai kembali server pengembangan sekarang dan memuat aplikasi dari host yang ditentukan, itu harus berfungsi.
Jika Anda masih mengalami masalah atau jika Anda menggunakan lingkungan yang lebih eksotis seperti editor cloud, Anda dapat melewati periksa host sepenuhnya dengan menambahkan baris ke .env.development.local . Perhatikan bahwa ini berbahaya dan memperlihatkan mesin Anda untuk eksekusi kode jarak jauh dari situs web jahat:
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
Kami tidak merekomendasikan pendekatan ini.
Catatan: Fitur ini tersedia dengan
[email protected]dan lebih tinggi.
Jika opsi proxy tidak cukup fleksibel untuk Anda, Anda dapat menentukan objek dalam formulir berikut (di package.json ).
Anda juga dapat menentukan nilai konfigurasi apa pun http-proxy-middleware atau http-proxy Supports.
{
// ...
"proxy" : {
"/api" : {
"target" : "<url>" ,
"ws" : true
// ...
}
}
// ...
} Semua permintaan yang cocok dengan jalur ini akan menjadi proksi, tidak ada pengecualian. Ini termasuk permintaan untuk text/html , yang tidak dimiliki opsi proxy standar.
Jika Anda perlu menentukan beberapa proksi, Anda dapat melakukannya dengan menentukan entri tambahan. Pencocokan adalah ekspresi reguler, sehingga Anda dapat menggunakan regexp untuk mencocokkan beberapa jalur.
{
// ...
"proxy" : {
// Matches any request starting with /api
"/api" : {
"target" : "<url_1>" ,
"ws" : true
// ...
} ,
// Matches any request starting with /foo
"/foo" : {
"target" : "<url_2>" ,
"ssl" : true ,
"pathRewrite" : {
"^/foo" : "/foo/beta"
}
// ...
} ,
// Matches /bar/abc.html but not /bar/sub/def.html
"/bar/[^/]*[.]html" : {
"target" : "<url_3>" ,
// ...
} ,
// Matches /baz/abc.html and /baz/sub/def.html
"/baz/.*/.*[.]html" : {
"target" : "<url_4>"
// ...
}
}
// ...
}Saat menyiapkan proxy Websocket, ada beberapa pertimbangan tambahan yang harus diperhatikan.
Jika Anda menggunakan mesin Websocket seperti Socket.io, Anda harus memiliki server socket.io yang dapat Anda gunakan sebagai target proxy. Socket.io tidak akan bekerja dengan server Websocket standar. Secara khusus, jangan berharap socket.io bekerja dengan tes Echo Websocket.org.
Ada beberapa dokumentasi bagus yang tersedia untuk menyiapkan server socket.io.
Websockets standar akan bekerja dengan server WebSocket standar serta tes Echo Websocket.org. Anda dapat menggunakan pustaka seperti WS untuk server, dengan websockets asli di browser.
Either way, Anda dapat memberikan permintaan websocket proxy secara manual di package.json :
{
// ...
"proxy" : {
"/socket" : {
// Your compatible WebSocket server
"target" : "ws://<socket_url>" ,
// Tell http-proxy-middleware that this is a WebSocket proxy.
// Also allows you to proxy WebSocket requests without an additional HTTP request
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws" : true
// ...
}
}
// ...
} Catatan: Fitur ini tersedia dengan
[email protected]dan lebih tinggi.
Anda mungkin memerlukan server dev untuk melayani halaman melalui HTTPS. Salah satu kasus di mana ini bisa berguna adalah ketika menggunakan fitur "proxy" untuk permintaan proxy ke server API ketika server API itu sendiri melayani HTTPS.
Untuk melakukan ini, atur variabel lingkungan HTTPS ke true , lalu mulai server dev seperti biasa dengan npm start :
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)(Catatan: Kurangnya spasi putih itu disengaja.)
HTTPS=true npm startPerhatikan bahwa server akan menggunakan sertifikat yang ditandatangani sendiri, sehingga browser web Anda hampir pasti akan menampilkan peringatan setelah mengakses halaman.
<meta> di server Karena Create React App tidak mendukung rendering server, Anda mungkin bertanya -tanya bagaimana cara membuat tag <meta> dinamis dan mencerminkan URL saat ini. Untuk menyelesaikan ini, kami sarankan untuk menambahkan placeholder ke dalam HTML, seperti ini:
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " > Kemudian, di server, terlepas dari backend yang Anda gunakan, Anda dapat membaca index.html ke dalam memori dan mengganti __OG_TITLE__ , __OG_DESCRIPTION__ , dan penempatan lain dengan nilai tergantung pada URL saat ini. Pastikan untuk membersihkan dan menghindari nilai -nilai yang diinterpolasi sehingga mereka aman untuk disematkan ke HTML!
Jika Anda menggunakan server node, Anda bahkan dapat berbagi logika pencocokan rute antara klien dan server. Namun duplikatnya juga berfungsi dengan baik dalam kasus -kasus sederhana.
Jika Anda hosting build Anda dengan penyedia hosting statis, Anda dapat menggunakan react-snapshot atau react-snap untuk menghasilkan halaman HTML untuk setiap rute, atau tautan relatif, dalam aplikasi Anda. Halaman -halaman ini kemudian dengan mulus akan menjadi aktif, atau "terhidrasi", ketika bundel JavaScript telah dimuat.
Ada juga peluang untuk menggunakan ini di luar hosting statis, untuk menghilangkan tekanan dari server saat menghasilkan dan caching rute.
Manfaat utama dari pra-rendering adalah Anda mendapatkan konten inti dari setiap halaman dengan muatan HTML-terlepas dari apakah bundel JavaScript Anda berhasil diunduh. Ini juga meningkatkan kemungkinan bahwa setiap rute aplikasi Anda akan diambil oleh mesin pencari.
Anda dapat membaca lebih lanjut tentang pra-konfigurasi nol-konfigurasi (juga disebut Snapshotting) di sini.
Demikian pula dengan bagian sebelumnya, Anda dapat meninggalkan beberapa placeholder di HTML yang menyuntikkan variabel global, misalnya:
< ! doctype html >
< html lang = "en" >
< head >
< script >
window.SERVER_DATA = __SERVER_DATA__;
</ script > Kemudian, di server, Anda dapat mengganti __SERVER_DATA__ dengan json data nyata tepat sebelum mengirim respons. Kode klien kemudian dapat membaca window.SERVER_DATA untuk menggunakannya. Pastikan untuk membersihkan JSON sebelum mengirimkannya ke klien karena membuat aplikasi Anda rentan terhadap serangan XSS.
Catatan: Fitur ini tersedia dengan
[email protected]dan lebih tinggi.
Baca panduan migrasi untuk mempelajari cara mengaktifkannya dalam proyek yang lebih lama!
Buat Aplikasi React menggunakan Jest sebagai pelari uji. Untuk mempersiapkan integrasi ini, kami melakukan perbaikan besar -besaran, jadi jika Anda mendengar hal -hal buruk tentang hal itu bertahun -tahun yang lalu, cobalah lagi.
Jest adalah pelari berbasis node. Ini berarti bahwa tes selalu berjalan di lingkungan simpul dan bukan di browser nyata. Ini memungkinkan kami memungkinkan kecepatan iterasi cepat dan mencegah kekacauan.
Sementara Jest menyediakan global browser seperti window berkat JSDOM, mereka hanya perkiraan perilaku browser yang sebenarnya. Jest dimaksudkan untuk digunakan untuk tes unit logika Anda dan komponen Anda daripada Dom Quirks.
Kami menyarankan Anda menggunakan alat terpisah untuk tes end-to-end browser jika Anda membutuhkannya. Mereka berada di luar ruang lingkup Create React App.
Jest akan mencari file uji dengan konvensi penamaan populer berikut:
.js di folder __tests__ ..test.js ..spec.js . File .test.js / .spec.js (atau folder __tests__ ) dapat ditempatkan di kedalaman apa pun di bawah folder level atas src .
Kami merekomendasikan untuk meletakkan file uji (atau folder __tests__ ) di sebelah kode yang mereka uji sehingga impor relatif tampak lebih pendek. Misalnya, jika App.test.js dan App.js berada di folder yang sama, tes hanya perlu import App from './App' alih -alih jalur relatif yang panjang. Colocation juga membantu menemukan tes lebih cepat dalam proyek yang lebih besar.
Saat Anda menjalankan npm test , Jest akan diluncurkan dalam mode Watch. Setiap kali Anda menyimpan file, itu akan menjalankan kembali tes, sama seperti npm start mengkompilasi ulang kode.
Pengamat mencakup antarmuka baris perintah interaktif dengan kemampuan untuk menjalankan semua tes, atau fokus pada pola pencarian. Ini dirancang dengan cara ini sehingga Anda dapat tetap terbuka dan menikmati kembali dengan cepat. Anda dapat mempelajari perintah dari catatan "Tonton Penggunaan" bahwa Watcher mencetak setelah setiap berjalan:
Secara default, saat Anda menjalankan npm test , Jest hanya akan menjalankan tes yang terkait dengan file yang diubah sejak komit terakhir. Ini adalah optimasi yang dirancang untuk membuat tes Anda berjalan cepat terlepas dari berapa banyak tes yang Anda miliki. Namun itu mengasumsikan bahwa Anda tidak sering melakukan kode yang tidak lulus tes.
Jest akan selalu secara eksplisit menyebutkan bahwa itu hanya menjalankan tes yang terkait dengan file yang diubah sejak komit terakhir. Anda juga dapat menekan a dalam mode arloji untuk memaksa bercanda untuk menjalankan semua tes.
Jest akan selalu menjalankan semua tes di server integrasi kontinu atau jika proyek tidak ada di dalam git atau repositori lincah.
Untuk membuat tes, tambahkan it() (atau test() ) blok dengan nama tes dan kodenya. Anda dapat membungkusnya secara opsional di blok describe() untuk pengelompokan logis tetapi ini tidak diperlukan atau direkomendasikan.
Jest menyediakan fungsi global yang expect() untuk membuat pernyataan. Tes dasar bisa terlihat seperti ini:
import sum from './sum' ;
it ( 'sums numbers' , ( ) => {
expect ( sum ( 1 , 2 ) ) . toEqual ( 3 ) ;
expect ( sum ( 2 , 2 ) ) . toEqual ( 4 ) ;
} ) ; Semua korek api expect() yang didukung oleh Jest didokumentasikan secara luas di sini.
Anda juga dapat menggunakan jest.fn() dan expect(fn).toBeCalled() untuk membuat "mata -mata" atau fungsi tiruan.
Ada spektrum luas teknik pengujian komponen. Mulai dari "tes asap" yang memverifikasi bahwa komponen yang diterjemahkan tanpa melempar, hingga rendering dangkal dan menguji sebagian output, untuk render penuh dan pengujian siklus hidup komponen dan perubahan status.
Proyek yang berbeda memilih pengujian pengujian yang berbeda berdasarkan seberapa sering komponen berubah, dan seberapa banyak logika yang dikandungnya. Jika Anda belum memutuskan strategi pengujian, kami sarankan Anda mulai dengan membuat tes asap sederhana untuk komponen Anda:
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
const div = document . createElement ( 'div' ) ;
ReactDOM . render ( < App /> , div ) ;
} ) ; Tes ini memasang komponen dan memastikan bahwa itu tidak melempar selama rendering. Tes seperti ini memberikan banyak nilai dengan sedikit usaha sehingga mereka bagus sebagai titik awal, dan ini adalah tes yang akan Anda temukan di src/App.test.js .
Ketika Anda menemukan bug yang disebabkan oleh perubahan komponen, Anda akan mendapatkan wawasan yang lebih dalam tentang bagian mana dari mereka yang layak diuji dalam aplikasi Anda. Ini mungkin saat yang tepat untuk memperkenalkan tes yang lebih spesifik yang menyatakan output atau perilaku yang diharapkan.
Jika Anda ingin menguji komponen secara terpisah dari komponen anak yang mereka render, kami sarankan menggunakan API rendering shallow() dari enzim. Untuk menginstalnya, jalankan:
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer Atau Anda dapat menggunakan yarn :
yarn add enzyme enzyme-adapter-react-16 react-test-rendererPada enzim 3, Anda perlu menginstal enzim bersama dengan adaptor yang sesuai dengan versi reaksi yang Anda gunakan. (Contoh di atas menggunakan adaptor untuk React 16.)
Adaptor ini juga perlu dikonfigurasi dalam file pengaturan global Anda:
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;Catatan: Ingatlah bahwa jika Anda memutuskan untuk "mengeluarkan" sebelum membuat
src/setupTests.js, filepackage.jsonyang dihasilkan tidak akan berisi referensi apa pun untuk itu. Baca di sini untuk mempelajari cara menambahkan ini setelah mengeluarkan.
Sekarang Anda dapat menulis tes asap dengan itu:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App /> ) ;
} ) ; Berbeda dengan uji asap sebelumnya menggunakan ReactDOM.render() , tes ini hanya membuat <App> dan tidak masuk lebih dalam. Misalnya, bahkan jika <App> sendiri membuat <Button> yang melempar, tes ini akan lulus. Rendering dangkal sangat bagus untuk tes unit yang terisolasi, tetapi Anda mungkin masih ingin membuat beberapa tes render penuh untuk memastikan komponen terintegrasi dengan benar. Enzim mendukung render penuh dengan mount() , dan Anda juga dapat menggunakannya untuk menguji perubahan keadaan dan siklus hidup komponen.
Anda dapat membaca dokumentasi enzim untuk teknik pengujian lebih lanjut. Dokumentasi enzim menggunakan Chai dan Sinon untuk pernyataan tetapi Anda tidak harus menggunakannya karena Jest menyediakan expect() dan jest.fn() untuk mata-mata.
Berikut adalah contoh dari dokumentasi enzim yang menegaskan output spesifik, ditulis ulang untuk menggunakan pencocokan jest:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const wrapper = shallow ( < App /> ) ;
const welcome = < h2 > Welcome to React </ h2 > ;
// expect(wrapper.contains(welcome)).to.equal(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ; Semua pencocokan lelucon didokumentasikan secara luas di sini.
Namun demikian, Anda dapat menggunakan perpustakaan pernyataan pihak ketiga seperti Chai jika Anda mau, seperti yang dijelaskan di bawah ini.
Selain itu, Anda mungkin menemukan jest-enzyme bermanfaat untuk menyederhanakan tes Anda dengan pencocokan yang dapat dibaca. Kode contains atas dapat ditulis lebih sederhana dengan jest-enzyme.
expect ( wrapper ) . toContainReact ( welcome ) Untuk mengaktifkan ini, instal jest-enzyme :
npm install --save jest-enzyme Atau Anda dapat menggunakan yarn :
yarn add jest-enzyme Impor di src/setupTests.js untuk membuat pencocokannya tersedia di setiap tes:
import 'jest-enzyme' ; Kami menyarankan Anda menggunakan expect() untuk pernyataan dan jest.fn() untuk mata -mata. Jika Anda mengalami masalah dengan mereka, silakan ajarkan itu terhadap Jest, dan kami akan memperbaikinya. Kami bermaksud untuk terus menjadikannya lebih baik untuk bereaksi, mendukung, misalnya, elemen bereaksi yang cukup mencetak sebagai JSX.
Namun, jika Anda terbiasa dengan perpustakaan lain, seperti Chai dan Sinon, atau jika Anda memiliki kode yang ada menggunakannya yang ingin Anda portir, Anda dapat mengimpornya secara normal seperti ini:
import sinon from 'sinon' ;
import { expect } from 'chai' ;Dan kemudian gunakan dalam tes Anda seperti yang biasa Anda lakukan.
Catatan: Fitur ini tersedia dengan
[email protected]dan lebih tinggi.
Jika aplikasi Anda menggunakan API browser yang Anda butuhkan untuk mengejek tes Anda atau jika Anda hanya memerlukan pengaturan global sebelum menjalankan tes Anda, tambahkan src/setupTests.js ke proyek Anda. Ini akan dieksekusi secara otomatis sebelum menjalankan tes Anda.
Misalnya:
src/setupTests.js const localStorageMock = {
getItem : jest . fn ( ) ,
setItem : jest . fn ( ) ,
clear : jest . fn ( )
} ;
global . localStorage = localStorageMockCATATAN: Ingatlah bahwa jika Anda memutuskan untuk "mengeluarkan" sebelum membuat
src/setupTests.js, filepackage.jsonyang dihasilkan tidak akan berisi referensi apa pun untuk itu, jadi Anda harus secara manual membuat propertisetupTestFrameworkScriptFiledalam konfigurasi untuk bercanda, sesuatu seperti berikut:
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
Anda dapat menggantinya it() dengan xit() untuk sementara mengecualikan tes agar tidak dieksekusi.
Demikian pula, fit() memungkinkan Anda fokus pada tes tertentu tanpa menjalankan tes lainnya.
Jest memiliki reporter cakupan terintegrasi yang bekerja dengan baik dengan ES6 dan tidak memerlukan konfigurasi.
Jalankan npm test -- --coverage (Catatan Ekstra -- tengah) untuk memasukkan laporan cakupan seperti ini:
Perhatikan bahwa tes berjalan jauh lebih lambat dengan cakupan sehingga disarankan untuk menjalankannya secara terpisah dari alur kerja normal Anda.
Konfigurasi cakupan JEST default dapat ditimpa dengan menambahkan salah satu tombol yang didukung berikut ke konfigurasi JEST di paket Anda.json.
Overrides yang Didukung:
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializersContoh paket.json:
{
"name" : " your-package " ,
"jest" : {
"collectCoverageFrom" : [
" src/**/*.{js,jsx} " ,
" !<rootDir>/node_modules/ " ,
" !<rootDir>/path/to/dir/ "
],
"coverageThreshold" : {
"global" : {
"branches" : 90 ,
"functions" : 90 ,
"lines" : 90 ,
"statements" : 90
}
},
"coverageReporters" : [ " text " ],
"snapshotSerializers" : [ " my-serializer-module " ]
}
} Secara default npm test menjalankan pengamat dengan CLI interaktif. Namun, Anda dapat memaksanya untuk menjalankan tes sekali dan menyelesaikan proses dengan menetapkan variabel lingkungan yang disebut CI .
Saat membuat build aplikasi Anda dengan npm run build Linter Warnings tidak diperiksa secara default. Seperti npm test , Anda dapat memaksa build untuk melakukan pemeriksaan peringatan linter dengan mengatur variabel lingkungan CI . Jika ada peringatan yang ditemui maka build gagal.
Server CI populer sudah mengatur variabel lingkungan CI secara default tetapi Anda juga dapat melakukannya sendiri:
.travis.yml ke repositori git Anda. language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
Ikuti artikel ini untuk mengatur Circleci dengan proyek Create React App.
set CI = true && npm test set CI = true && npm run build(Catatan: Kurangnya spasi putih itu disengaja.)
( $ env: CI = $true ) -and (npm test)( $ env: CI = $true ) -and (npm run build)CI=true npm test CI=true npm run buildPerintah uji akan memaksa bercanda untuk menjalankan tes sekali alih -alih meluncurkan pengamat.
Jika Anda sering melakukan ini dalam pengembangan, silakan ajukan masalah untuk memberi tahu kami tentang kasus penggunaan Anda karena kami ingin menjadikan Watcher pengalaman terbaik dan terbuka untuk mengubah cara kerjanya untuk mengakomodasi lebih banyak alur kerja.
Perintah build akan memeriksa peringatan linter dan gagal jika ada yang ditemukan.
Secara default, package.json dari proyek yang dihasilkan terlihat seperti ini:
"scripts" : {
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test --env=jsdom" Jika Anda tahu bahwa tidak ada tes Anda yang bergantung pada JSDOM, Anda dapat menghapus dengan aman --env=jsdom , dan tes Anda akan berjalan lebih cepat:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"Untuk membantu Anda mengambil keputusan, berikut adalah daftar API yang membutuhkan JSDOM :
window dan documentReactDOM.render()TestUtils.renderIntoDocument() (jalan pintas untuk hal di atas)mount() dalam enzimSebaliknya, JSDOM tidak diperlukan untuk API berikut:
TestUtils.createRenderer() (rendering dangkal)shallow() dalam enzimAkhirnya, JSDOM juga tidak diperlukan untuk pengujian snapshot.
Pengujian Snapshot adalah fitur dari Jest yang secara otomatis menghasilkan snapshot teks dari komponen Anda dan menyimpannya di disk jadi jika output UI berubah, Anda mendapat pemberitahuan tanpa secara manual menulis pernyataan apa pun pada output komponen. Baca lebih lanjut tentang pengujian snapshot.
Jika Anda menggunakan kode Visual Studio, ada ekstensi JEST yang berfungsi dengan aplikasi Create React di luar kotak. Ini menyediakan banyak fitur seperti IDE saat menggunakan editor teks: menunjukkan status uji coba dengan pesan gagal potensial inline, memulai dan menghentikan pengamat secara otomatis, dan menawarkan pembaruan snapshot satu klik.
Ada berbagai cara untuk menyiapkan debugger untuk tes lelucon Anda. Kami membahas debugging dalam kode studio krom dan visual.
Catatan: Tes debugging membutuhkan simpul 8 atau lebih tinggi.
Tambahkan yang berikut ke bagian scripts di package.json proyek Anda.json
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
} Tempatkan debugger; pernyataan dalam tes apa pun dan jalankan:
$ npm run test:debugIni akan mulai menjalankan tes lelucon Anda, tetapi berhenti sebelum dieksekusi untuk memungkinkan debugger melekat pada proses.
Buka yang berikut di Chrome
about:inspect
Setelah membuka tautan itu, alat pengembang Chrome akan ditampilkan. Pilih inspect proses Anda dan breakpoint akan ditetapkan pada baris pertama dari skrip React (ini dilakukan hanya untuk memberi Anda waktu untuk membuka alat pengembang dan untuk mencegah lelucon mengeksekusi sebelum Anda punya waktu untuk melakukannya). Klik tombol yang terlihat seperti tombol "Putar" di sisi kanan atas layar untuk melanjutkan eksekusi. Ketika Jest menjalankan tes yang berisi pernyataan debugger, eksekusi akan berhenti dan Anda dapat memeriksa ruang lingkup saat ini dan menumpuk tumpukan.
CATATAN: Opsi - -Runinband CLI memastikan Jest menjalankan tes dalam proses yang sama daripada proses pemijahan untuk tes individual. Biasanya Jest paralelisasi uji berjalan di seluruh proses tetapi sulit untuk men -debug banyak proses pada saat yang sama.
Tes Jest Debugging didukung di luar kotak untuk kode studio visual.
Gunakan file konfigurasi launch.json berikut:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
Biasanya, dalam sebuah aplikasi, Anda memiliki banyak komponen UI, dan masing -masing memiliki banyak negara bagian yang berbeda. Sebagai contoh, komponen tombol sederhana dapat memiliki status berikut:
Biasanya, sulit untuk melihat keadaan ini tanpa menjalankan aplikasi sampel atau beberapa contoh.
Create React App tidak termasuk alat apa pun untuk ini secara default, tetapi Anda dapat dengan mudah menambahkan buku cerita untuk React (Source) atau React StyleGuidist (sumber) ke proyek Anda. Ini adalah alat pihak ketiga yang memungkinkan Anda mengembangkan komponen dan melihat semua status mereka secara terpisah dari aplikasi Anda .
Anda juga dapat menggunakan buku cerita atau panduan gaya Anda sebagai aplikasi statis. Dengan cara ini, semua orang di tim Anda dapat melihat dan meninjau berbagai status komponen UI tanpa memulai server backend atau membuat akun di aplikasi Anda.
Storybook adalah lingkungan pengembangan untuk komponen reaksi UI. Ini memungkinkan Anda untuk menelusuri perpustakaan komponen, melihat keadaan yang berbeda dari masing -masing komponen, dan secara interaktif mengembangkan dan menguji komponen.
Pertama, instal paket NPM berikut secara global:
npm install -g @storybook/cliKemudian, jalankan perintah berikut di dalam direktori aplikasi Anda:
getstorybookSetelah itu, ikuti instruksi di layar.
Pelajari lebih lanjut tentang React Storybook:
StyleGuidist menggabungkan panduan gaya, di mana semua komponen Anda disajikan pada satu halaman dengan dokumentasi props dan contoh penggunaan, dengan lingkungan untuk mengembangkan komponen dalam isolasi, mirip dengan buku cerita. Dalam StyleGuidist Anda menulis contoh dalam Markdown, di mana setiap cuplikan kode diterjemahkan sebagai taman bermain langsung yang diedit.
Pertama, instal styleGuidist:
npm install --save react-styleguidist Atau Anda dapat menggunakan yarn :
yarn add react-styleguidist Kemudian, tambahkan skrip ini ke package.json Anda.json:
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",Kemudian, jalankan perintah berikut di dalam direktori aplikasi Anda:
npm run styleguideSetelah itu, ikuti instruksi di layar.
Pelajari lebih lanjut tentang React StyleGuidist:
Create React App tidak menyediakan fungsionalitas bawaan untuk mempublikasikan komponen ke NPM. Jika Anda siap mengekstrak komponen dari proyek Anda sehingga orang lain dapat menggunakannya, kami sarankan memindahkannya ke direktori terpisah di luar proyek Anda dan kemudian menggunakan alat seperti NWB untuk menyiapkannya untuk penerbitan.
Secara default, build produksi adalah aplikasi web progresif yang berfungsi penuh, offline-first.
Aplikasi web progresif lebih cepat dan lebih dapat diandalkan daripada halaman web tradisional, dan memberikan pengalaman seluler yang menarik:
sw-precache-webpack-plugin diintegrasikan ke dalam konfigurasi produksi, dan akan menangani menghasilkan file pekerja layanan yang secara otomatis akan membuat semua aset lokal Anda dan terus memperbarui saat Anda menggunakan pembaruan. Pekerja layanan akan menggunakan strategi cache-first untuk menangani semua permintaan untuk aset lokal, termasuk HTML awal, memastikan bahwa aplikasi web Anda cepat, bahkan pada jaringan yang lambat atau tidak dapat diandalkan.
Jika Anda lebih suka untuk tidak mengaktifkan pekerja layanan sebelum penyebaran produksi awal Anda, maka hapus panggilan ke registerServiceWorker() dari src/index.js .
Jika sebelumnya Anda telah mengaktifkan pekerja layanan dalam penyebaran produksi Anda dan telah memutuskan bahwa Anda ingin menonaktifkannya untuk semua pengguna yang ada, Anda dapat menukar panggilan ke registerServiceWorker() di src/index.js terlebih dahulu dengan memodifikasi impor pekerja layanan layanan layanan layanan layanan layanan () :
import { unregister } from './registerServiceWorker' ; dan kemudian hubungi unregister() sebagai gantinya. Setelah pengguna mengunjungi halaman yang memiliki unregister() , pekerja layanan akan dihapus. Perhatikan bahwa tergantung pada bagaimana /service-worker.js disajikan, mungkin perlu waktu hingga 24 jam untuk cache tidak valid.
Pekerja layanan memerlukan HTTPS, meskipun untuk memfasilitasi pengujian lokal, kebijakan itu tidak berlaku untuk localhost . Jika server web produksi Anda tidak mendukung HTTPS, maka pendaftaran pekerja layanan akan gagal, tetapi sisa aplikasi web Anda akan tetap fungsional.
Pekerja layanan saat ini tidak didukung di semua browser web. Pendaftaran pekerja layanan tidak akan dicoba di browser yang tidak memiliki dukungan.
Pekerja layanan hanya diaktifkan di lingkungan produksi, misalnya output dari npm run build . Dianjurkan agar Anda tidak mengaktifkan pekerja layanan offline-pertama di lingkungan pengembangan, karena dapat menyebabkan frustrasi ketika aset yang sebelumnya di-cache digunakan dan tidak termasuk perubahan terbaru yang telah Anda buat secara lokal.
Jika Anda perlu menguji pekerja layanan offline-first Anda secara lokal, bangun aplikasi (menggunakan npm run build ) dan jalankan server HTTP sederhana dari direktori build Anda. Setelah menjalankan skrip build, create-react-app akan memberikan instruksi untuk satu cara untuk menguji produksi Anda Build secara lokal dan instruksi penyebaran memiliki instruksi untuk menggunakan metode lain. Pastikan untuk selalu menggunakan jendela penyamaran untuk menghindari komplikasi dengan cache browser Anda.
Jika memungkinkan, konfigurasikan lingkungan produksi Anda untuk melayani service-worker.js yang dihasilkan.js dengan caching http dinonaktifkan. Jika itu tidak memungkinkan-halaman gitub, misalnya, tidak memungkinkan Anda untuk mengubah seumur hidup cache http 10 menit default-maka ketahuilah bahwa jika Anda mengunjungi situs produksi Anda, dan kemudian kunjungi lagi sebelum service-worker.js telah kedaluwarsa dari Anda HTTP Cache, Anda akan terus mendapatkan aset yang sebelumnya di -cache dari pekerja layanan. Jika Anda memiliki kebutuhan mendesak untuk melihat penyebaran produksi Anda yang diperbarui, melakukan shift-refresh untuk sementara waktu akan menonaktifkan pekerja layanan dan mengambil semua aset dari jaringan.
Pengguna tidak selalu terbiasa dengan aplikasi web offline-first. Bisa bermanfaat untuk memberi tahu pengguna ketika pekerja layanan telah selesai mengisi cache Anda (menunjukkan pesan "aplikasi web ini berfungsi offline!" Dan juga memberi tahu mereka kapan pekerja layanan telah mengambil pembaruan terbaru yang akan tersedia di Lain kali mereka memuat halaman (menunjukkan "konten baru tersedia; Harap Refresh." Pesan). Menampilkan pesan ini saat ini diserahkan sebagai latihan untuk pengembang, tetapi sebagai titik awal, Anda dapat menggunakan logika yang termasuk dalam src/registerServiceWorker.js , yang menunjukkan acara siklus hidup pekerja layanan mana yang akan didengarkan untuk mendeteksi setiap skenario, dan yang sebagai default, cukup mencatat pesan yang sesuai ke konsol JavaScript.
Secara default, file pekerja layanan yang dihasilkan tidak akan mencegat atau menyimpan lalu lintas lintas asal, seperti permintaan API HTTP, gambar, atau embed yang dimuat dari domain yang berbeda. Jika Anda ingin menggunakan strategi caching runtime untuk permintaan tersebut, Anda dapat eject dan kemudian mengkonfigurasi opsi runtimeCaching di bagian SWPrecacheWebpackPlugin di webpack.config.prod.js .
Konfigurasi default mencakup manifes aplikasi web yang terletak di public/manifest.json , yang dapat Anda sesuaikan dengan detail khusus untuk aplikasi web Anda.
Ketika pengguna menambahkan aplikasi web ke homescreen mereka menggunakan Chrome atau Firefox di Android, metadata di manifest.json menentukan ikon, nama, dan warna branding apa yang digunakan saat aplikasi web ditampilkan. Panduan Manifest Aplikasi Web memberikan lebih banyak konteks tentang apa arti masing -masing bidang, dan bagaimana kustomisasi Anda akan memengaruhi pengalaman pengguna Anda.
Sumber Map Explorer menganalisis bundel javascript menggunakan peta sumber. Ini membantu Anda memahami dari mana kembung kode berasal.
Untuk menambahkan Source Map Explorer ke proyek Create React App, ikuti langkah -langkah ini:
npm install --save source-map-explorer Atau Anda dapat menggunakan yarn :
yarn add source-map-explorer Kemudian di package.json , tambahkan baris berikut ke scripts :
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",Kemudian untuk menganalisis bundel menjalankan build produksi kemudian jalankan skrip analisis.
npm run build
npm run analyze
npm run build membuat direktori build dengan build produksi aplikasi Anda. Siapkan server http favorit Anda sehingga pengunjung ke situs Anda disajikan index.html , dan permintaan ke jalur statis seperti /static/js/main.<hash>.js static/js/main. <hash>.js disajikan dengan isi /static/js/main.<hash>.js file.
Untuk lingkungan menggunakan Node, cara termudah untuk menangani ini adalah dengan memasang sajian dan membiarkannya menangani sisanya:
npm install -g serve
serve -s build Perintah terakhir yang ditunjukkan di atas akan melayani situs statis Anda di port 5000 . Seperti banyak pengaturan internal Serve, port dapat disesuaikan menggunakan bendera -p atau --port .
Jalankan perintah ini untuk mendapatkan daftar lengkap opsi yang tersedia:
serve -hAnda tidak perlu server statis untuk menjalankan proyek Create React App dalam produksi. Ini berfungsi sama baiknya diintegrasikan ke dalam yang dinamis yang ada.
Berikut contoh terprogram menggunakan Node dan Express:
const express = require ( 'express' ) ;
const path = require ( 'path' ) ;
const app = express ( ) ;
app . use ( express . static ( path . join ( __dirname , 'build' ) ) ) ;
app . get ( '/' , function ( req , res ) {
res . sendFile ( path . join ( __dirname , 'build' , 'index.html' ) ) ;
} ) ;
app . listen ( 9000 ) ;Pilihan perangkat lunak server Anda juga tidak penting. Karena Create React App sepenuhnya platform-agnostik, tidak perlu menggunakan node secara eksplisit.
Folder build dengan aset statis adalah satu -satunya output yang dihasilkan oleh Create React App.
However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like /todos/42 in your single-page app.
If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory ), many static file servers will fail. For example, if you used React Router with a route for /todos/42 , the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.
This is because when there is a fresh page load for a /todos/42 , the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html . For example, we can amend our Express example above to serve index.html for any unknown paths:
app.use(express.static(path.join(__dirname, 'build')));
- app.get('/', function (req, res) {
+ app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
}); If you're using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
It will get copied to the build folder when you run npm run build .
If you're using Apache Tomcat, you need to follow this Stack Overflow answer.
Now requests to /todos/42 will be handled correctly both in development and in production.
On a production build, and in a browser that supports service workers, the service worker will automatically handle all navigation requests, like for /todos/42 , by serving the cached copy of your index.html . This service worker navigation routing can be configured or disabled by eject ing and then modifying the navigateFallback and navigateFallbackWhitelist options of the SWPreachePlugin configuration.
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html . This may not work for client-side routers which expect the app to be served from / . Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url" : "." , By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json , for example:
"homepage" : "http://mywebsite.com/relativepath" ,This will let Create React App correctly infer the root path to use in the generated HTML file.
Note : If you are using react-router@^4 , you can root <Link> s using the basename prop on any <Router> .
More information here.
Misalnya:
< BrowserRouter basename = "/calendar" />
< Link to = "/today" / > // renders <a href="/calendar/today"> Note: this feature is available with
[email protected]and higher.
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json :
"homepage" : "." , This will make sure that all the asset paths are relative to index.html . You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
See this blog post on how to deploy your React app to Microsoft Azure.
See this blog post or this repo for a way to use automatic deployment to Azure App Service.
Install the Firebase CLI if you haven't already by running npm install -g firebase-tools . Sign up for a Firebase account and create a new project. Run firebase login and login with your previous created Firebase account.
Then run the firebase init command from your project's root. You need to choose the Hosting: Configure and deploy Firebase Hosting sites and choose the Firebase project you created in the previous step. You will need to agree with database.rules.json being created, choose build as the public directory, and also agree to Configure as a single-page app by replying with y .
=== Project Setup
First, let ' s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we ' ll just set up a default project.
? What Firebase project do you want to associate as default ? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules ? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build ' s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete! IMPORTANT: you need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like next:
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
Now, after you create a production build with npm run build , you can deploy it by running firebase deploy .
=== Deploying to ' example-app-fd690 ' ...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [ ============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete !
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.comFor more information see Add Firebase to your JavaScript Project.
Note: this feature is available with
[email protected]and higher.
homepage to package.json The step below is important!
If you skip it, your app will not deploy correctly.
Open your package.json and add a homepage field for your project:
"homepage" : " https://myusername.github.io/my-app " ,or for a GitHub user page:
"homepage" : " https://myusername.github.io " , Create React App uses the homepage field to determine the root URL in the built HTML file.
gh-pages and add deploy to scripts in package.json Now, whenever you run npm run build , you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:
npm install --save gh-pages Alternatively you may use yarn :
yarn add gh-pages Add the following scripts in your package.json :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", The predeploy script will run automatically before deploy is run.
If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:
package.json scripts to push deployments to master : "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build", npm run deployThen run:
npm run deploygh-pages Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.
GitHub Pages doesn't support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory ). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42 . If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj ) . Read more about different history implementations in React Router.index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you'll need to add code handling the redirect parameter to index.html . You can find a detailed explanation of this technique in this guide. Use the Heroku Buildpack for Create React App.
You can find instructions in Deploying React with Zero Configuration.
Sometimes npm run build works locally but fails during deploy via Heroku. Following are the most common cases.
If you get something like this:
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
It means you need to ensure that the lettercase of the file or directory you import matches the one you see on your filesystem or on GitHub.
This is important because Linux (the operating system used by Heroku) is case sensitive. So MyDirectory and mydirectory are two distinct directories and thus, even though the project builds locally, the difference in case breaks the import statements on Heroku remotes.
If you exclude or ignore necessary files from the package you will see a error similar this one:
remote: Could not find a required file.
remote: Name: `index.html`
remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
In this case, ensure that the file is there with the proper lettercase and that's not ignored on your local .gitignore or ~/.gitignore_global .
To do a manual deploy to Netlify's CDN:
npm install netlify-cli -g
netlify deploy Choose build as the path to deploy.
To setup continuous delivery:
With this setup Netlify will build and deploy when you push to git or open a pull request:
yarn build as the build command and build as the publish directoryDeploy siteSupport for client-side routing:
To support pushState , make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200
When you build the project, Create React App will place the public folder contents into the build output.
Now offers a zero-configuration single-command deployment. You can use now to deploy your app for free.
Install the now command-line tool either via the recommended desktop tool or via node with npm install -g now .
Build your app by running npm run build .
Move into the build directory by running cd build .
Run now --name your-project-name from within the build directory. You will see a now.sh URL in your output like this:
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Details are available in this article.
See this blog post on how to deploy your React app to Amazon Web Services S3 and CloudFront.
Install the Surge CLI if you haven't already by running npm install -g surge . Run the surge command and log in you or create a new account.
When asked about the project path, make sure to specify the build folder, for example:
project path: /path/to/project/build Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.
You can adjust various development and production settings by setting environment variables in your shell or with .env.
| Variabel | Perkembangan | Produksi | Penggunaan |
|---|---|---|---|
| PERAMBIL | ✅ | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension. | |
| TUAN RUMAH | ✅ | By default, the development web server binds to localhost . You may use this variable to specify a different host. | |
| PELABUHAN | ✅ | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | |
| HTTPS | ✅ | When set to true , Create React App will run the development server in https mode. | |
| PUBLIC_URL | ✅ | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json ( homepage ). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | |
| CI | ? | ✅ | When set to true , Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
| REACT_EDITOR | ✅ | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can send a pull request to detect your editor of choice. Setting this environment variable overrides the automatic detection. If you do it, make sure your systems PATH environment variable points to your editor's bin folder. You can also set it to none to disable it completely. | |
| CHOKIDAR_USEPOLLING | ✅ | When set to true , the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes. | |
| GENERATE_SOURCEMAP | ✅ | When set to false , source maps are not generated for a production build. This solves OOM issues on some smaller machines. | |
| NODE_PATH | ✅ | ✅ | Same as NODE_PATH in Node.js, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting NODE_PATH=src . |
npm start doesn't detect changes When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn't happen, try one of the following workarounds:
index.js and you're referencing it by the folder name, you need to restart the watcher due to a Webpack bug..env file in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start , the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
npm test hangs on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test --env=jsdom to the console there might be a problem with your Watchman installation as described in facebookincubator/create-react-app#713.
We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:
watchman shutdown-server
brew update
brew reinstall watchman
You can find other installation methods on the Watchman documentation page.
If this still doesn't help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .
There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
npm run build exits too early It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
The build failed because the process exited too early. This probably means the system ran out of memory or someone called
kill -9on the process.
If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you're building on, or build the project locally.
npm run build fails on HerokuThis may be a problem with case sensitive filenames. Please refer to this section.
If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.
To add a specific Moment.js locale to your bundle, you need to import it explicitly.
Misalnya:
import moment from 'moment' ;
import 'moment/locale/fr' ; If import multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;This will only work for locales that have been explicitly imported before.
npm run build fails to minifySome third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.
module field in package.json . Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers .Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.
Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.
If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!
