Reakt komponentini necə yaratmaq və NPM-də yayımlamaq haqqında

JotForm-da staj müddətində React istifadə edərək gündəlik izləyici veb tətbiqetmə yaratdım. Bu layihədə bir tarix geri sayma komponentinə ehtiyac duydum və özümə aid qərar verməyə qərar verdim. Sonda bu komponenti buraxmaq və açıq mənbəli cəmiyyətə töhfə vermək istədim, buna görə də etdim. Bu müddət ərzində bəzi məsələlərlə qarşılaşdım. Bu hekayədə təcrübələrimi bölüşmək və açıq mənbə layihənizi yaratmaq və dərc etmək üçün öz yolunuzda sizə kömək etmək istəyirəm.

Tarix Geri Sayım Taymerinə cavab verin

Addım 1: bir demo layihəsi yaratmaq

React komponenti yaratmaq istəyirsinizsə, istifadə etmək və test etmək üçün bir platforma ehtiyacınız var. Beləliklə, bir demo layihəsi yaradaq.

Əvvəlcə Node.js və npm-in layiqli bir versiyasına sahib olduğunuzdan əmin olun

İstifadəsi çox asandır Bir Reaktiv Yarat tətbiqindən istifadə etdim. Sadəcə bunu terminala daxil edin:

npm quraşdırma-reaksiya-tətbiq qurmaq -g
Yaratmaq-Reaktiv Tətbiq Demo Tətbiqi

və voila! React tətbiqetmənizi qurdunuz və indi işə salmağa hazırsınız.

İndi bir komponent yarada və demo layihəmizdə istifadə edə bilərik. Demo tətbiq layihə qovluğunuzun src qovluğunda, komponentlər adlı bir qovluq yaradın. sonra komponentinizin adı olan başqa bir qovluq. DateCountdown komponentinə zəng edəcəyəm. İndi bu qovluqda index.js və style.css adları ilə 2 fayl yaradın. Bir dəqiqə ərzində bu sənədlər üzərində işləyəcəyik. İndi src qovluğuna qayıdın. Layihənizin əsas komponenti olan App.js adlı bir sənəd var. Yaratılacaq komponenti aşağıdakı kimi əlavə edin:

idxal React, {Component} 'reaksiyadan'; DateCountdown'u './components/dateCountdown'dan idxal et;
// ...
et () {
Qayıdış (// ...
       
// ...
)

Adım 2: komponentinizi qurun

Artıq demo layihənizə sahib olduğunuz üçün, parlaq məhsulunuzu hazırlamaq vaxtı gəldi!

// index.js React idxal, {Component} 'reaksiya'; PropTypes 'prop-types'dən idxal edin; idxal './style.css';
DateCountdown sinfi {constructor (rekvizit) {super (rekvizit) komponentini genişləndirir; // ... this.state = {...};
}
// ...
make () {let {...} = this.props; let {...} = this.state; vahidlərə icazə verin = [...];
// ...
Qayıdış ( {ədəd.map ((vahid, açar) => {// ...})} ); }
}
DateCountdown.propTypes = {locales: PropTypes.array, dateTo: PropTypes.string.isRequired, geri çağırış: PropTypes.func, mostSignificantFigure: PropTypes.string, numberOfFigures: PropTypes.number}
DateCountdown.defaultProps = {Yerellər: ['il', 'ay', 'gün', 'saat', 'dəqiqə', 'saniyə'], dateTo: (yeni tarix ()). toString (), geri çağırış: () => null, mostSignificantFigure: 'none', numberOfFigures: 6}
default DateCountdown ixracı;

İstifadəçinin komponentimdən düzgün istifadə etdiyinə əmin olmaq üçün propTypes və defaultProps istifadə etdim. Mənim rekvizitim olmasa da, komponentim hələ də faydalı ola bilər.

Mənim rekvizitlərimin bir az sıx olduğunu bilirəm, elastik bir hissə yaratmağıma cəhd etdim. İnsanlar ümumiyyətlə komponentlə mümkün qədər çox oynaya bilmək istəyirlər. Hər iki halda da, komponent düzgün işləməlidir. Bir məhsul dizayn edərkən nəzərə alınacaq bir şey var.

Və bir az stil əlavə edəcəyəm:

/ * style.css * /
@keyframes hərəkət {0% {qeyri-şəffaflıq: 0; transform: translateY (12px);} 100% {qeyri-şəffaflıq: 1; çevirmək: translateY (0px);}}
@keyframes köçürüldü {0% {qeyri-şəffaflıq: 1; transform: translateY (0px);} 100% {qeyri-şəffaflıq: 0; çevirmək: translateY (-12px);}}
.odometerStart {display: satır içi blok; Animasiya adı: rejimi 0.25s; -webkit-animasiya: 0.25s hərəkət; Animasiya doldurma rejimi: irəli; } .odometerEnd {display: satır içi blok; Animasiya Adı: Dəyişən 0.25s; -webkit-animasiya: 0,25s dəyişdi; Animasiya doldurma rejimi: irəli; }
.odometer-block {display: satır içi blok; Əsaslandırma məzmunu: orta; Maddələri düzəldin: Mərkəz; }

Komponentimiz hazırdır! Npm-də yayımlanmağa hazırlaşma vaxtı gəldi.

Addım 3: nəşrə hazırlaşın

Bununla birlikdə, bu demo layihəsindəki komponentimizi dərc edə bilmərik. Başqa bir layihə qovluğuna köçürməli və komponenti bir proyektə çevirməliyik. Beləliklə başqa bir yerdə bir qovluq yaratdıq və npm initon terminalına daxil olduq. Layihəniz üçün ad, təsvir və s. Yazın. Bu, bu qovluqda pack.json faylı yaradacaqdır. İndi layihə qovluğunda src adında bir qovluq yaradın və index.js və style.css fayllarını bu qovluğa köçürün.

İndi bir React paketinin nəşrinə dair bilməli olduğumuz bir neçə şey var. Çox vaxt kodumuz optimallaşdırılmış kod deyildir, yəni potensial tam sürətlə işləməyəcəkdir (kodumuzun səmərəliliyindən asılı olmayaraq). Kodumuzu ən yaxşı şəkildə istifadə etmək üçün qurmalıyıq.

Kodumuzun Javascript standartlarına zidd olmadan bütün brauzerlərdə işləməsi üçün ehtiyacımız var (ES6, ES7 və s.). Babel bunu bizim üçün edir. Kodumuzu alır və bütün brauzerlərin nələrin baş verdiyini anlaya biləcəyi bir formaya köçürür.

Ayrıca, komponentimizdə bir neçə fayl istifadə etdik, məsələn. B. stil.css. Hamısını fərqli sənədlərdə işlətmək üçün də təsirli deyil. Komponentimizi mümkün qədər səmərəli etmək üçün başqa bir addım hamısını bir faylda yerləşdirməkdir. Xoşbəxtlikdən bunun üçün bir veb paketimiz var! Bütün faylları götürür və onları bir fayla yığırıq. Bu, sənədimizi ən səmərəli formaya salır (kodunuzun səmərəliliyi xaricində).

Bəs bu Babili və Veb paketi necə istifadə edirik? Əvvəlcə onları layihə qovluğumuza terminala daxil edərək layihəmiz üçün asılılıq olaraq əlavə etməliyik:

npm quraşdırma -D webpack webpack-cli babel-core

-D devDependencies deməkdir, yəni istifadəçimizin komponentimizdən istifadə etmək üçün bunları quraşdırmasına ehtiyac yoxdur, ancaq komponentimizi yaratmaq üçün bunlara ehtiyacımız var.

Webpack, yükləmə alətləri olaraq Loaders istifadə edir. Babel Babel Loader adlı birini təklif edir. Terminalda npm install -D babel-loader yazaraq quraşdırın.

babel-loader-də babel-core ilə versiya problemləri ola bilər, buna görə babel-loader-in versiyasını aşağı salmanız lazım ola bilər. Mənim vəziyyətimdə babel-loader v8 babel-core v7 istədi, lakin hələ npm-də buraxılmadı, buna görə babel-loader-i v7-yə endirdim və bu cazibədarlıq kimi işlədi.

Babelin kodumuzu səmərəli şəkildə dəyişə bilməsi üçün nədən istifadə etdiyimizi və hansı standartı çevirəcəyimizi bilməlidir. Bunun üçün əvvəlcədən qurulmuş və plaginlərdən istifadə olunur. Əvvəlcədən hazırlanmış parametrlər həqiqətəndir. Onları da asılılıq olaraq əlavə etməliyik. Bu təlimat üçün env və reaktiv resetlərdən istifadə edəcəyik.

npm quraşdırma -D Babel-Preset-env Babel-Preset-React

Biz də CSS istifadə etdik, bu səbəbdən veb paket üçün yükləmə işi üçün bir CSS yükləyiciyə ehtiyacımız var. CSS yükləyicisini stil yükləyicisi ilə istifadə edə bilərik.

npm quraşdırma -D stil yükləyici CSS yükləyici

veb paketin nə yaratacağına və onu yaratarkən hansı vasitələrdən istifadə edəcəyinə qərar vermək üçün bir konfiqurasiya sənədinə ehtiyac var. Bu fayl webpack.config.js adlanır. Buna görə bu adla bir fayl yaradın. Və belə doldurun:

var path = tələb ('yol'); module.exports = {giriş: './src/index.js', çıxış: {path: path.resolve (__ dirname, 'build'), fayl adı: 'index.js', libraryTarget: 'commonjs2'}, modul : {Qaydalar: [{Test: /\.css$/, istifadə edin: ['style-loader', 'css-loader']}, {Test: /\.js$/, daxildir: path.resolve (__ dirname , 'src'), xaric et: / (node_modules | bower_components | build) /, istifadə edin: {loader: 'babel-loader', seçimlər: {əvvəlcədən qurulmuş: ['reaktiv', 'env'],}}}
]}, xarici: {'reaksiya': 'commonjs reaksiya'}};

React komponenti yaratdığımız üçün React-i bir asılılıq olaraq da əlavə etməliyik.

npm yüklə reaksiya - saxla

İndi qura bilərik! Bunu yalnız pack.json-a əlavə edin:

Scripts ": {" start ":" webpack --watch "," build ":" webpack "}

Npm run build yazın, enter vurun və komponentinizin qurulmasına baxın!

İndi layihə qovluğunuzda index.js ilə yeni bir qovluq var / build! Pack.json-u belə dəyişdirin:

"main": "build / index.js",

və dərc etməyə hazırıq!

Adım 4: Komponenti dərc edin

Hər kəs bu an üçün tərləyir və əzab çəkir! Sənətimizi cəmiyyətə çatdırmağın vaxtı gəldi!

Npmjs.com saytından npm hesabı yaradın. Sonra terminalınızdakı layihə qovluğuna npm adduser daxil edin və hesabınıza daxil olun. Və son zərbə:

Npm dərc edin
Təbrik edirik! Açıq mənbəli cəmiyyətin xeyirinə töhfə verdiniz!

Oxuduğunuz üçün təşəkkürlər. Boş nöqtələr qalıbsa, şərhlərdə soruşmaqdan çəkinməyin.

Bu təlimatı sizin üçün edərkən yaratdığım npm paketinə baxa bilərsiniz.

Ayrıca, ilk hekayəm haqqında düşüncələrinizi mənə bildirin.