Cara mengubah reka bentuk unsplash menggunakan komponen gaya

CSS Selamat Masa Depan: Memudahkan Gaya React dengan Komponen Gaya

Menulis CSS yang selamat untuk masa depan adalah satu cabaran. Apabila anda perlu menulis dan mengekalkan beribu -ribu baris kod CSS, nama kelas yang bertentangan, isu kekhususan, dan banyak lagi akan timbul. Untuk menyelesaikan masalah di atas, komponen gaya muncul.

Komponen gaya membolehkan anda dengan mudah menulis CSS di JS dan memastikan tiada konflik nama kelas atau isu kekhususan, sementara juga mempunyai banyak kelebihan lain. Ini menjadikan penulisan CSS merawat.

Tutorial ini akan meneroka apa yang CSS dalam JS, kebaikan dan keburukan komponen gaya, dan akhirnya, kami akan menggunakan komponen gaya untuk refactor unsplash. Selepas menamatkan tutorial ini, anda sepatutnya dapat memulakan dengan cepat dan menggunakan komponen gaya.

Nota: Komponen gaya direka khusus untuk bertindak balas, jadi anda mesti menggunakan React untuk menggunakan komponen gaya.

Keuntungan utama:

Ketahui asas -asas CSS dalam JS dan bagaimana komponen gaya memudahkan proses dengan membenarkan CSS ditulis secara langsung dalam JavaScript, mengelakkan masalah biasa seperti konflik nama kelas dan isu kekhususan.
Ketahui cara menyediakan menggunakan komponen gaya dalam projek React, termasuk pemasangan yang diperlukan dan langkah konfigurasi awal.
meneroka manfaat komponen gaya, seperti suntikan automatik CSS kritikal, pakej CSS yang lebih kecil, dan tema mudah untuk aplikasi React.
Cari aplikasi praktikal komponen gaya dengan mewujudkan tema dinamik dan menguruskan gaya global dalam aplikasi React.
Ketahui manfaat penyelenggaraan komponen gaya, termasuk pengurusan kod yang lebih mudah dan keupayaan untuk menghapuskan CSS yang tidak digunakan dengan cekap.
Ikuti panduan komprehensif untuk refactoring antara muka unsplash menggunakan komponen gaya, yang mengandungi contoh dan arahan kod terperinci untuk setiap langkah.

Prasyarat:

Tutorial ini memerlukan anda mempunyai asas -asas React.

Dalam tutorial ini, kami akan menggunakan benang. Jika anda belum memasang benang, sila pasang dari sini:

pautan pemasangan benang .

Untuk memastikan kita secara konsisten, berikut adalah versi yang digunakan dalam tutorial ini:

node 12.6.0
npx 6.4.1
benang 1.17.3

Evolusi CSS:

Cara yang paling biasa untuk gaya aplikasi web sebelum membuat CSS di JS adalah untuk menulis CSS dalam fail berasingan dan menghubungkannya dari HTML.

tetapi ini menyebabkan masalah dalam pasukan besar. Setiap orang mempunyai cara sendiri untuk menulis CSS. Ini membawa kepada masalah kekhususan dan menyebabkan semua orang menggunakan

. !important

kemudian Sass muncul. SASS adalah lanjutan CSS yang membolehkan kami menggunakan pembolehubah, peraturan bersarang, import dalam talian, dan banyak lagi. Ia juga membantu menjaga perkara yang teratur dan membolehkan kita membuat stylesheet lebih cepat.

Walaupun SASS mungkin dianggap lebih baik daripada CSS, ia boleh menyebabkan lebih banyak kemudaratan daripada faedah tanpa beberapa sistem.

kemudian, bem muncul. BEM adalah kaedah yang membolehkan kita mengurangkan masalah kekhususan dengan menulis nama kelas yang unik. BEM menyelesaikan masalah kekhususan, tetapi ia menjadikan HTML lebih verbose. Nama kelas boleh menjadi tidak lama lagi, dan apabila anda mempunyai aplikasi web yang besar, sukar untuk menghasilkan nama kelas yang unik.

Selepas, modul CSS dilahirkan. Modul CSS menyelesaikan masalah kekhususan dengan menyelesaikan masalah yang tidak dapat diselesaikan oleh SASS atau BEM -masalah nama kelas yang unik -dengan alat dan bukannya bergantung pada nama yang disediakan oleh pemaju. Modul CSS mendapat populariti yang luar biasa dalam ekosistem React, membuka jalan untuk projek seperti glamor.

Satu -satunya masalah dengan semua penyelesaian baru ini ialah pemaju perlu mempelajari sintaks baru. Bagaimana jika kita boleh menulis CSS dengan tepat cara kami menulis CSS dalam fail .css di JS? Jadi komponen gaya dilahirkan.

Komponen gaya menggunakan literals templat, yang merupakan ciri ES6. Templat literal adalah rentetan literal yang membolehkan ekspresi embedding. Mereka membenarkan penggunaan fungsi interpolasi rentetan dan rentetan.

Titik jualan utama komponen gaya adalah bahawa ia membolehkan kita menulis CSS yang tepat di JS.

Komponen gaya mempunyai banyak kelebihan. Berikut adalah beberapa kebaikan dan keburukan komponen gaya.

pro

Menggunakan komponen gaya mempunyai banyak kelebihan.

1. suntikan css kunci ke dom

   Komponen gaya menyuntik hanya CSS kritikal ke dalam halaman. Ini bermakna pengguna hanya memuat turun CSS yang diperlukan untuk halaman tertentu, dan bukan apa -apa lagi. Ini menjadikan laman web memuat lebih cepat.

2. Pakej CSS untuk setiap halaman lebih kecil

   Kerana ia menyuntik hanya gaya yang digunakan dalam komponen pada halaman, saiz pakej lebih kecil. Anda hanya perlu memuat CSS yang diperlukan dan bukannya terlalu banyak stylesheets, program normal, reka bentuk responsif, dan banyak lagi.

3. Prefix Pembekal Automatik

   Komponen gaya membolehkan anda menulis CSS yang secara automatik menambah awalan vendor berdasarkan piawaian terkini.

4. Padam CSS yang tidak digunakan
   Menggunakan komponen gaya, lebih mudah untuk menghapuskan CSS yang tidak digunakan atau kod tidak sah kerana gaya berada di lokasi yang sama dengan komponen. Ini juga memberi kesan kepada mengurangkan saiz pakej.

5. Tema mudah
   Komponen gaya membuat tema untuk aplikasi React sangat mudah. Anda juga boleh mempunyai banyak tema dalam aplikasi anda dan anda masih boleh mengekalkannya dengan mudah.

6. Kurangkan bilangan permintaan HTTP
   Bilangan permintaan HTTP sangat dikurangkan kerana tidak ada fail CSS untuk menetapkan semula, menormalkan, dan reka bentuk responsif.

7. nama kelas yang unik
   Komponen gaya menghasilkan nama kelas yang unik setiap kali langkah membina. Ini mengelakkan penamaan konflik atau isu kekhususan. Konflik global tidak lagi diperlukan dan terpaksa menggunakan tag

   untuk menyelesaikannya. !important

8. Mudah untuk mengekalkan

   Komponen gaya membolehkan anda meletakkan gaya bersama -sama dengan komponen. Ini menjadikan penyelenggaraan mudah. Anda boleh mengetahui dengan tepat gaya mana yang mempengaruhi komponen anda, tidak seperti fail CSS yang besar.

Kekurangan

Sudah tentu, tiada apa yang sempurna. Mari kita lihat beberapa kekurangan yang berkaitan dengan komponen gaya.

1. tidak dapat melihat gaya cache

   Biasanya, apabila pengguna melawat laman web, penyemak imbas web cache fail .css supaya fail .css yang sama tidak perlu dimuat turun lagi apabila anda mengaksesnya. Tetapi untuk komponen gaya, gaya dimuatkan ke dalam DOM menggunakan tag <style></style>. Oleh itu, mereka tidak boleh di -cache dan gaya mesti diminta setiap kali pengguna melawat laman web anda.

2. React Only

   Komponen gaya direka untuk bertindak balas. Oleh itu, ia adalah reaksi khusus. Jika anda menggunakan rangka kerja lain, anda tidak boleh menggunakan komponen gaya.

   Walau bagaimanapun, terdapat alternatif yang sangat mirip dengan komponen gaya, yang dipanggil Emosi, yang bebas kerangka.

Operasi praktikal:

Sekarang kita tahu kebaikan dan keburukan komponen gaya, mari kita mulakan dengannya.

Buat projek React baru menggunakan Create-react-app. Untuk menciptanya, kami akan menggunakan NPX, yang membolehkan anda memuat turun dan menjalankan pakej sementara tanpa mencemarkan ruang nama global.

Taipkan yang berikut dalam terminal:

<code class="language-bash">$ npx create-react-app unsplash-styled-components</code>

kemudian pergi ke direktori

dan pasangkan pakej berikut yang diperlukan untuk tutorial ini, iaitu gaya-komponen dan react-medium-image-zoom: unsplash-styled-components

Pakej

<code class="language-bash">$ cd unsplash-styled-components
$ yarn add styled-components react-medium-image-zoom</code>

membolehkan kami menulis CSS sebenar dalam JS, manakala pakej styled-components membolehkan kami mengezum dalam imej dalam gaya sederhana. react-medium-image-zoom

Sekarang, selepas pemasangan selesai, padamkan fail yang tidak diingini dari direktori

seperti src/, App.css, App.test.js, dan index.css. logo.svg

Padam

dari index.js kerana ia tidak lagi diperlukan. import './index.css';

Gantikan kandungan

dengan yang berikut: App.js

<code class="language-javascript">import React from 'react'

const App = () => <h1>Hello React</h1>

export default App</code>

Sekarang cuba menjalankan pelayan pembangunan dengan menaip

di terminal. yarn start

anda harus melihat skrin cetak keluar

seperti yang ditunjukkan di bawah: Hello React

Komponen gaya menggunakan literasi templat tag kepada komponen gaya.

Katakan anda ingin menggunakan komponen gaya untuk menetapkan H1 ke teks putih pada latar belakang merah jambu. Inilah cara anda boleh melakukan ini:

sekarang kelihatan seperti ini:

<code class="language-javascript">import React from 'react'
import styled from 'styled-components'

const Header = styled.h1`
    background-color: pink;
    color: white;
`

const App = () => <header>Hello React</header>
export default App</code>

Kami hanya mencipta komponen gaya pertama Header. Header Komponen diberikan kepada styled.h1. Eksport lalai dari styled-components styled mempunyai primitif HTML asas seperti div, span, h1, h2,

, dan lain -lain.

styled.h1 Dalam

, kami menulis CSS sebenar. Perhatikan bahawa kami menulis CSS dan bukannya membuat objek gaya.

Header Di samping itu, komponen

digantikan dalam penyemak imbas oleh tag H1 dan nama kelas yang unik. Tag gaya dengan nama kelas unik yang sama dimasukkan ke dalam DOM. Ini adalah bagaimana komponen gaya sebenarnya berfungsi.

Gaya kami berada dalam fail yang sama dengan komponen kami. Ini bermakna komponen kami berada di lokasi yang sama dengan gaya. Oleh itu, lebih mudah untuk menghapuskan gaya yang berkaitan dengan komponen tertentu, dengan itu menghapuskan kod tidak sah.

Secara tradisinya, sukar untuk membuat alasan dalam CSS kerana kita perlu mencari nama kelas atau ID atau pemilih khusus untuk elemen tertentu dan kemudian memadamkannya satu demi satu. Ia mudah dalam projek -projek kecil, tetapi ia boleh menjadi sukar kerana kerumitan projek meningkat. Dengan komponen gaya, menambah, mengedit, dan memadam gaya lebih mudah, tidak kira betapa kompleksnya projek itu, kerana mereka berada di lokasi yang sama dengan komponen.

(langkah -langkah berikut, disebabkan oleh batasan ruang, kod dan tangkapan skrin dari bahagian yang tinggal ditinggalkan di sini, tetapi struktur logiknya selaras dengan teks asal. Sila teruskan tutorial untuk bahagian yang tinggal mengikut teks asal.)

Kesimpulan:

Komponen gaya menjadikannya mudah untuk menulis CSS biasa di JS. Ia membolehkan kita meletakkan gaya bersama -sama dengan komponen supaya kita dapat dengan mudah menambah, mengedit atau memadam gaya.

css Kami belajar bagaimana untuk menambah gaya global, menggunakan semula gaya menggunakan

atribut, dan bagaimana menetapkan tema untuk aplikasi anda. Kami hanya menyentuh permukaan komponen gaya; Anda boleh mengetahui lebih lanjut di laman web rasmi: [Link Laman Web Rasmi Komponen Komponen] (Pautan laman web rasmi Komponen gaya harus dimasukkan di sini).

Akhirnya, kami refactored unsplash menggunakan komponen gaya. Kod lengkap boleh didapati di GitHub: pautan github , dan demo boleh dilihat di di sini

.

Soalan Lazim Mengenai Menggunakan Komponen Bergaya:

(Soalan Lazim yang disenaraikan dalam teks asal ditinggalkan di sini kerana panjangnya terlalu panjang, tetapi disyorkan untuk menyimpan bahagian FAQ dan mengisi jawapan berdasarkan teks asal.)

Atas ialah kandungan terperinci Cara mengubah reka bentuk unsplash menggunakan komponen gaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!