نوشته های آرمین خدایی

کانفیگ Webpack Babel React از صفر!

آرمین خدایی — Tue, 28 May 2019 11:08:32 +0430

سلام دوستان امیدوارم حالتون میزون باشه.چند وقت پیش یه پروژه ای برام پیشنهاد شد با React که ازم خواستن پروژه رو از صفر خودم بسازم و از هیچ Boilerplate آماده ای استفاده نکنم.پروژه جذابی بود به نظرم چون پشت صحنه میدونستی داره چه اتفاقاتی میوفته و منم شروع کردم به ساختن پروژه و حالا میخوام یه کانفیگ ساده رو باهاتون به اشتراک بذارم و امیدوارم راضی باشید از این پست :).قبل از دست به کد شدن و این داستانا موارد مورد نیاز برای تهیه این کانفیگ رو بگم براتون D: :1 نود جی اس رو سیستم تون نصب باشهمن از پکیج منیجر Yarn استفاده میکنم ولی اجباری نیست، شما میتونید با همون npm کار کنید (npm همراه با نود جی اس رو سیستمتون نصب میشه).خب بریم دست به کد بشیم:اولین کاری که میکنید اینه که cmd یا هر command prompt که باهاش کار میکنید رو باز کنید و کد زیر رو بنویسید: mkdir webpack-babel-react-starter cd webpack-babel-react-starterبا این کار یه پوشه به اسم webpack-babel-react-starter میسازیم و وارد پوشه میشیم.خب برای ایجاد پروژه به package.json نیاز داریم، برای ساختن میتونید تو cmd بنویسیند: npm init -yبا این کار package.json ما ساخته میشه و الان باید کتابخونه های مورد نیاز مون رو نصب کنیم:خب اولین کتابخونه ها webpack و webpack-cli هستن که به این صورت میتونید نصبشون کنید:npm install webpack webpack-cli --save-devوقتی کتابخونه ها نصب شدن متوجه میشید که تو پوشه پروژمون به فولدر به اسم node_modules اضافه شده علاوه بر این تو فایل package.json تو بخش " devDependencies" اسم دو تا کتابخونه رو میبینید.خب بریم سراغ Babel:مطمعناً میدونید Babel برای تبدیل کد های ES6 ما به ES5 هست تا مرورگر ها بتونن کد های جاوا اسکریپتی رو بخونن و اجرا کنن.از یه طرف ما اکثر داریم از ES6 استفاده میکنیم تو کامپوننت های React یا از arrow function استفاده میکنیم، اینجای کار Babel میاد و کد هامون رو تبدیل به ES5 میکنه.خب بریم سراغ نصب: npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev خب Babel-core که خود کتابخونه هست Babel-preset-env برای اینکه که شما بدون نیاز به تعریف محیط و شروط خاص از آخرین ورژن جاوا اسکریپت استفاده کنید و Babel میاد خودش تو پشت صحنه کد هاتون رو برای مرورگر های مختلف تبدیل میکنه.Babel-preset-react برای تبدیل JSX به جاوا اسکریپت هست و در نهایت babel-loader یه لودر برای وب پک هست تا ES6 رو به ES5 تبدیل کنه.بعد از نصب شدن اینا هم یه فایل به اسم babelrc. تو root پروژه مون میسازیم و کد زیر رو توش مینویسیم: { "presets": ["@babel/env", "@babel/react"] } بعد این کار یه پوشه به اسم src تو فولدر پروژتون بسازید و یه فایل به اسم index.js داخل فولدر.خب الان میریم React رو نصب میکنیم و اولین کامپوننت مون رو مینویسیم.برای این کار کد زیر رو تو cmd وارد کنید npm install react react-dom خب تو فایل index.js داخل فولدر src هم اولین کامپوننت مون رو مینویسیم به این صورت:import React from "react"; import ReactDOM from "react-dom"; const Index = () => { return (

React Page {" "}

Know more

); }; export default Index;خب حالا میریم سراغ فایل کانفیگ وب پک:بازم تو root پروژه یه فایل به این اسم بسازید: webpack.config.jsو کد زیر رو توش قرار بدیدconst path = require("path"); module.exports = { entry: path.join(__dirname, "src", "index.js"), output: { path: path.join(__dirname, "build"), filename: "bundle.js" }, module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] } }; با این کار داریم فایل ورودی و خروجی رو تو وب پک تعیین میکنیم و درنهایت بهش میگیم هر جا تو پوشه src فایل js یا jsx دیدی با استفاده از babel-loader کد هامون رو تبدیل به ES5 کن.اما برای این که خروجی React رو بتونیم ببینیم به یه پلاگین نیاز داریم به اسم html-webpack-plugin با این پلاگین وب پک میاد فایل خروجی رو توی مرورگر روی DOM رندر میکنهبرای نصب کردنش کد زیر رو استفاده کنیدnpm install html-webpack-plugin --save-dev خب یه تغییر کوچیکی تو فایل کانفیگ وب پک باید انجام بدیم و در نهایت فایل مون به این صورت باید باشه:const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: path.join(__dirname, "src", "index.js"), output: { path: path.join(__dirname, "build"), filename: "bundle.js" }, module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] }, plugins: [ new HtmlWebpackPlugin({ filename: "index.html", template: path.join(__dirname, "src", "index.html") }) ] }; خب حالا بریم این فایل html رو بسازیم، داخل فولدر src یه فایل به اسم index.html بسازید و کد زیر رو توش وارد کنید: React, Webpack, Babel Starter Pack

خب الان میریم به فایل index.js و کد مون رو تکمیل میکنیم، از اونجایی که داریم React کار میکنید بهتره که ساختار component رو رعایت کنیم. برای این کار یه فولدر به اسم components داخل فولدر src میسازیم.تو پوشه components فایل های App.js و app.scss_ رو بسازید.فایل App.js:import React from "react"; import "./app.scss"; const App = () => { return (

React Page {" "}

Know more now

); }; export default App; و فایل app.scss body { background: linear-gradient(253deg, #0cc898, #1797d2, #864fe1); background-size: 300% 300%; -webkit-animation: Background 25s ease infinite; -moz-animation: Background 25s ease infinite; animation: Background 25s ease infinite; } .full-screen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; width: 100%; height: 100%; display: -webkit-flex; display: flex; -webkit-flex-direction: column; //_ works with row or column_ flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; } h1 { color: #fff; font-family: "Open Sans", sans-serif; font-weight: 800; font-size: 4em; letter-spacing: -2px; text-align: center; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.6); &:after { display: block; color: #fff; letter-spacing: 1px; font-family: "Poiret One", sans-serif; content: "React project powered by webpack and babel with support for sass"; font-size: 0.4em; text-align: center; } } .button-line { font-family: "Open Sans", sans-serif; text-transform: uppercase; letter-spacing: 2px; background: transparent; border: 1px solid #fff; color: #fff; text-align: center; font-size: 1.4em; opacity: 0.8; padding: 20px 40px; text-decoration: none; transition: all 0.5s ease; margin: 0 auto; display: block; &:hover { opacity: 1; background-color: #fff; color: grey; } } @-webkit-keyframes Background { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-moz-keyframes Background { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes Background { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } خب از بریم سراغ کامپایل کردن Sass به CSS از طریق وب پکبرای این کار باید کتابخونه های زیر رو به این صورت نصب کنید:npm install css-loader sass-loader mini-css-extract-plugin node-sass --save-dev خب بعد نصب شدنشون تغییرات لازم رو تو فایل کانفیگ وب پک اعمال میکنیم و فایل نهایی به این صورت باید باشه:const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { entry: path.join(__dirname, "src", "index.js"), output: { path: path.join(__dirname, "build"), filename: "bundle.js" }, module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /.(css|scss)$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] } ] }, plugins: [ new HtmlWebpackPlugin({ filename: "index.html", template: path.join(__dirname, "src", "index.html") }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }) ] }; یه نکته مهم تو لودر های webpack اینه که وب پک میاد از راست به چپ از لودر ها استفاده میکنه پس ترتیب نوشتن شون مهمه.برای کامپایل sass اول از sass-loader بعد از css-loader و در نهایت از MiniCssExtractPlugin استفاده میکنهو آخرین قسمت کارمون اینه که webpack-dev-server رو نصب بکنیم تا وب پک برامون یه سرور مجازی بسازه و حین توسعه از استفاده کنیم.npm install webpack-dev-server --save-dev بعد از نصبش تو فایل package.json این تیکه از کد رو اضافه کنید بهش:"scripts": { "start": "webpack --mode development", "dev": "webpack-dev-server --mode development --open", "build": "webpack --mode production" } در نهایت با استفاده از دستور npm run dev میتونید خروجی رو به این صورت تو مرورگرتون ببینیدخروجی نهایی پروژهمرسی که تا اینجای کار بامن همراه بودید امیدوارم تونسته باشم کمی به دانش تون اضافه کرده باشم.راستی برای این پستم یه ویدیو هم ظبط میکنم که دیگه بهتر متوجه داستان بشید :)نظراتتون برام مهمه مرسی که کامنت میذارید ;)تو اینستا هم میتونید فالووم کنید و از خبرات جدید بی بهره نمونید مخصوصا از چند شنبه با آرمین های پیش رو با خبر باشیدinstagram.me/awrminkhodaei

نقشه راه برای تبدیل شدن به یه فرانت اند دولپر خوب!

آرمین خدایی — Mon, 13 May 2019 22:50:19 +0430

سلام دوستای عزیز امیدوارم اوضاع احوالتون میزون باشه :)آقا این پست پیروی یه سری استوری ها و لایو هام تو اینستاگرام بود و خواستم اطلاعات تکمیلی تر رو اینجا باهاتون به اشتراک بذارم و به تمام لینک هایی که میذارم دسترسی راحت تری داشته باشید.تو استوری هام یه همچین عکسی رو دید:این یه Roadmap برای فرانت اند دولوپر شدن تو سال 2019 هست. بعد این عکس خیلی ها گفتن آقا خیلی طولانیه مسیرش و خیلی کار داره و فلان...بله دوست عزیز هیچ چیزی یه شبه به دست نمیاد و براش باید زحمت کشید بعضی وقتا بی خوابی کشید.ولی از این رود مپ میشه تا وسطاش تو یه دوره‌ی 3 ماهه نصفشو طی کرد و نتیجه خوبی گرفت.من یادگیری HTML & CSS رو میذارم به عهده خودتون چون واقعا غول نیست غول اصلی (البته فکر می‌کنید که غوله) جاوااسکریپت هستش.تو لایو هام اشاره کردم به این که یه سری آموزش هایی رو معرفی میکنم که خودم باهاشون شروع کردم و نتیجه خوبی گرفتم ازشون.از بین سورس های ایرانی وب‌سایت فرانت کست بود که محتوای خیلی خوبی داره و میتونید جاوا اسکریپت رو مثل هلو بپر توی گلو یاد بگیرید.یه سری سورس خارجی هم میذارم براتون که اونا هم فوق العاده بودن (خود آموزش ها از یودمی هستن ولی متاسفانه ما دسترسی نداریم به سایتش و نمیتونیم دوره هاشو بخیرم اما تو سایت هایی مثل downloadly.irمیشه سرچ کردشون با همین تایتلی که مینویسم و دانلودشون کرد.برای جاوا اسکریپت 3 تا آموزش خفن داریم تو یودمی:1- آموزش کامل جاوا اسکریت از BradTraversy2- آموزش کامل جاوا اسکریپت از AnderwMead3- آموزش کامل جاوا اسکریپت از Jonas Schmedtmannهر سه تاشون هم خودشون از صفر تا صد جاوا اسکریپت رو یادتون میدن با برنامه آموزشی خودشون و روزی حداقل 5 تا ویدیو میتونید ببینید ازشون و نزدیک 3 هفته ای میتونید تمومش کنید.هر سه تاشون هم جاوا اسکریپت مدرن رو یادتون میدن یعنی ES6 هم توشون هست و خیالتون از این بابت هم جمع باشه :).وب سایت scotch.io هم سورس خوبی برای یادگیری هست پست هاشو حتما چک کنید.تو medium.com مقالات خیلی خفنی پیدا میشه این دیگه بستگی به مهارت سرچ خودتون داره، حتی تو گوگل هم چیزی سرچ کنید کمه کمش 5-6 تا مطلبش از همین سایت هستش.با این آموزش ها جلو برید و مسلماً روز اولی که شروع کردید با آخرین روزی که آموزش رو تموم کردید خیلی تفاوت خواهد داشت.خبر های خوب بیشتری تو راهه و قراره که یه سری برنامه های کوچیک رو خودم هم بنویسم و تو گیت‌هاب ام منتشر کنم که اکثرا به صورت چالش خواهند بود اینا.آقا خیلی مخلصیم اگر نظری داشتید حتما این پایین بنویسید برام.اینستاگرام رو هم میتونید فالو کنید بیشتر در جریان کار های آینده ام باشید : @awrminkhodaei

رعایت Best Practice ها در React

آرمین خدایی — Thu, 31 Jan 2019 00:05:20 +0330

سلام دوستان امیدوارم حالتون خوب باشهتو این پست میخوام تجربه کار کردنم با React رو باهاتون به اشتراک بذارمحدود یه سالی میشه که دارم با React کار میکنم و تو این یه سال به یه سری نکاتی پی بردم و دونستن اینا برای شما هم خالی از لطف نیست :)اینجا لیست مواردی که میخوام توضیح بدم رو لیست میکنم تا راحتر بتونید پیداش کنید:۱- استفاده از ES6,ES7۲- انتخاب درست Component ها۳- نحوه درست import ها۴- انواع حالت برای State Initializationاز اینجا به بعد تو قسمت دوم این پست قراره منتشر بشه۵- استفاده از PropTypes و defaultProps۶- استفاده درست از Methods۷- اندکی درباره‌ی setState۸- اندکی درباره‌ی Destructuringخب بریم سراغ نکات و Best Practice ها :۱- استفاده از ES6,ES7همون طور که میدونید هر ساله یه نسخه جدید از جاوااسکریپت ریلیز میشه که بهش میگیم اکمااسکریپت(ECMAScript) یا به اختصار ‌+es و توصیه من اینه که قبل از اومدن به سمت فرریمورک های JS بهتره خود جاوااسکریپت و تو مرحله بعد es6/es7 رو خوب یادبگیرید و درک کنید.استفاده از ES6 میتونه کار مارو خیلی راحت بکنه و از تعداد سطر کد هایی که مینویسیم کمتر کنه مثال پایینی رو ببینید: // What you have let officers = [ { id: 20, name: 'Captain Piett' }, { id: 24, name: 'General Veers' }, { id: 56, name: 'Admiral Ozzel' }, { id: 88, name: 'Commander Jerjerrod' } ];// What you need [20, 24, 56, 88] اگر از forEach استفاده کنیم باید همچین کاریی انجام بدیم:let officersIds = [];officers.forEach(function (officer) { officersIds.push(officer.id); });اگر از ES6 استفاده کنیم همچین کاریی باید انجام بدیم:const officersIds = officers.map(officer => officer.id);سعی میکنم یه پست دیگه حاضر کنم براتون که از ES next بیشتر بگم ولی مسلم هست که استفاده ازش چقدر کار مون رو آسون تر میکنه.۲- انتخاب درست Component ها :این مورد یکی از مهم ترین بخش های React هست و البته کمی پیچیده، همون طور که میدونید چندین روش برای تعریف کردن کامپوننت داریم تو React:۱- کامپوننت های class based مثلا -> (class UsersPage extends React.Component)همون طور که میدونید ما از کامپوننت های class based زمانی استفاده میکنیم که میخوایم state داشته باشیم تو کامپوننت...خود این کامپوننت های class based به دو دسته‌ی Component و PureComponent دسته بندی میشن ولی فرق بین اینا چیه؟فرق بین این دو فقط تو یه موردی هست اونم این که PureComponent متدshouldComponentUpdate رو برامون هندل میکنه یعنی وقتی props یا state ما تغییر کرد یه مقایسه سطحی بین nextProps یا nextState با state یا props فعلی میکنه و اگر تغییری مشاهده کرد فقط تو این مورد کامپونت ما رو رندر میکنه در غیر این صورت به همون حالت قبلی باقی می مونه.استفاده درست و به جای PureComponent میتونه تاثییر بسازی تو پرفورمانس اپ ما داشته باشه.۲- کامپوننت های functionalاز این کامپوننت ها هم زمانی استفاده باید کرد که شما فقط میخواید JSX برگردونید و نیازی به state ندارید ولی میتونید به این کامپوننت ها props پاس بدید و باهاش کار کنید.۳- نحوه درست import هادر این مورد چیز زیادی نمیخوام بگم و بیشتر سلیقه شخصی هست ولی میتونه رو خوانایی کد تون تاثییر بسازی داشته باشههمیشه سعی کنید dependency های اصلی رو بالاتر از همه import هاتون انجام بدید و بقیه رو زیر اونا مثل زیر:// main imports import React, {Component} from 'react' import {connect} from 'react-redux' // other imports import 'main_page.css'۴- انواع حالت برای State Initializationو اما بخش مهم این بخش از مقاله:طبق best practice ها شما هر چقدر clean code داشته باشید بهتره.تو React دو روش برای تعریف state تو کامپوننت ها داریم:۱- داخل متد constructor ۲- بدون استفاده از متد constructorهمون طور که میبینید بدون constructor کد ما تمیز تره ولی شاید فکر کنید پس چه بلایی سر bind کردن متد هامون میاد مگه میشه که بدون constructor به کلاس اطلاعات بدیم؟بله میشه React تو پس زمینه داره از babel استفاده میکنه که es6 رو به ورژن های پایین تر کامپایل میکنه تا مرورگر هانون بتونن کد های JS ما رو بخونن و اجراش کنن پس نگران نباشید babel پشت صحنه خودش این متد رو به کلاس شما اضافه میکنهدر مورد bind کردن this به متد هاتون هم تو روش دوم توصیه ام اینه که از arrow function ها استفاده بکنید تا نیازی به bind کردن نداشته باشید.خیلی ممنون که وقت گذاشتید و این پست رو خوندید ممنون میشم نظراتتون رو برام بنویسید و منتظر پست های بعدی ازم باشید :)