نوشته های taha

git

taha — Sat, 05 Oct 2019 23:08:40 +0330

خوب اولین دستور گیت git init.برای این که وضعیت رو هم چک کنیم از git status استفاده می کنیم. فایل ها از وضعیتی که داریم عوض می شن می بریمشون تو stage بعد commit ش می کنیم.خوب یه فایل درست کردیم مثل index.html بعد داخلش یه چیزی نوشتیم.حالا می زنیم git status. می گه یه فایل untraked file داریحالا اگه بخوایم این فایل رو به git اضافه کنیم می زنیم git add index.htmlالان گفتیم که git این فایل رو بشناسه. خوب الان اگه دوباره git status بزنیم می بینم یه newfile داریم یعنی که رفته تو stageحالا باید commit ش کنم اینطوری"یه چیزی همینطوری" git commit -mحالا باز اگه تغییر ایجاد کردیم باید git add بزنیم تا دوباره برن تو stageاگه بخوایم بگیم همه رو ادد کنgit add -Abranch چیه ؟شما فرض کن داری روی یک پروژه کار می کنی خطی یه چند بار کامیت می کنی وسط یه چیزی هستی هنوز کامیت ش نکردی خوب ما برمیگردیم پروژه قبلی ش بعد مثلا کپچا رو با قبلی کامیت می کنیم بعد می گیم این چیزی که الان دارم روش کار می کنم رو با اونی که کپچا داره mergeش کناولین دستور git branch وقتی می زنیم می گه خوب تو یه branch داری به نام مسترgit branch fixpages اون فایل هایی که html نبود رو درست کنیم مثلامی خوایم بریم تو اون branch که ساختیم مثلاgit checkout fixpages بعد تغییر می دیم برمیگردیم تو branch اصلی حالا می خوایم مرج کنیمgit marge فلان چیزاگه بخوایم یه چیزی رو هم از فایل سیستم و هم ازgit حذف کنیممی شه از git rm اسم اون چیز استفاده کرد برای پاک کردن یک برنچ هم کافیه که git branch -d اسم اون چیزی که می خوایم پاک کنیمیه دستوری داریم به اسم git logمیاد کاریی که کردیم رو نشون می ده.head یعنی اونی که الان داریم روش کار می کنیمکار با حالی که می تونیم بکنیم اینه که بزنیم git diff Headخوب می تونیم وقتی که گیج هم می شیم بزنیم git diff --stagedاگه بخوایم یه چیزی رو از stage بیرون بیاریم git reset page3.htmlاگه کلا یه فایلی رو خراب کردیم و می خوایم برگردونیم به قبلی git checkout -- page2.htmlخوب می خوایم یه جیزی رو clone کنیم چی کار می کنیم می زنیم git clone اون ادرسه که داریم از گیت مثلابعد بخوایم پوش کنیمgit push origin mastergit pull orgian master

CSS In React

taha — Sun, 22 Sep 2019 12:15:47 +0330

خوب می دونید که در jsx می تونیم به صورت inline به چیزایی که می خوایم style بدیم.const Headers = props => { const { brand } = props; return (

{brand}

); };و همینطور می تونیم یه متغییر تعریف کنیمconst Headers = props => { const { brand } = props; return (

{brand}

); }; Headers.defaultProps = { brand: "my app" }; Headers.propTypes = { brand: PropTypes.object.isRequired }; const headingStyle = { color: "green", fontSize: "50px" }; export default Headers;همینطور می تونیم یه یه فایل جدید css درست کنیم ., import ش می کنیمimport "../component/header.css"برای نصب بوت استرپ همnpm install bootstrapبعد اینطوری importش می کنیمimport "bootstrap/dist/css/bootstrap.min.css"

Typechecking With PropTypes

taha — Sat, 21 Sep 2019 15:19:57 +0430

خوب برای ست کردن یه defaultPropsimport React from "react" const Headers = props => { const { brand } = props; return (

{brand}

); }; Headers.defaultProps = { brand: 'my app' }; export default Headers;بعد کل brand رو باید زا حذف کنیم.خوب حالا my app نمایش داده می شه.خوب برای برسی نوع داده ارسالی تو اون فایل header مون impt + tab که این می شهimport PropTypes from 'prop-types'خوب و برای استفاده از این هم اینطوری کد می زنیم :import React from "react" import PropTypes from "prop-types" const Headers = props => { const { brand } = props; return (

{brand}

); }; Headers.defaultProps = { brand: "my app" }; Headers.propTypes = { brand: PropTypes.string.isRequired }; export default Headers;در کلاس ها هم می تونیم مثل بالا استفاده کنیم :import React, { Component } from "react" import PropTypes from "prop-types" class Cont extends Component { render() { const { name, email } = this.props; return (

{name}

email = {email}

); } } export default Cont; Cont.PropTypes = { name: PropTypes.string.isRequired, email: PropTypes.string.isRequired };این شکلی هم می تونی استفاده کنی که بیرون نباشهimport React, { Component } from "react" import PropTypes from "prop-types" class Cont extends Component { static propTypes = { name: PropTypes.string.isRequired, email: PropTypes.string.isRequired }; render() { const { name, email } = this.props; return (

{name}

email = {email}

); } } export default Cont

نگاهی به props

taha — Sat, 21 Sep 2019 12:03:25 +0430

شاید بدونید که props مخفف properties است.خوب حالا چه جوری استفاده می کنیم از؟!توی فانکشن طور به شکل زیرimport React from "react" const Headers = propss => { return (

{propss.brand}

); }; export default Headers;و توی app.js مون هم به شکل زیرimport React from "react" import Cont from "./component/Cont" import Headers from "./component/header" function App() { const name = "react" return (

); } export default App;خوب تو کلاس کامپوننت ها هم به شکل زیر عمل می کنیمimport React from "react" import Cont from "./component/Cont" import Headers from "./component/header" function App() { const name = "react" return (

); } export default App;و در اون :import React, { Component } from "react" class Cont extends Component { render() { return (

email = {this.props.email}

); } } export default Cont;و همینطور می تونیم به شکل زیر هم استفاده کنیم:import React, { Component } from "react" class Cont extends Component { render() { const { name, email } = this.props; return (

{name}

email = {email}

); } } export default Cont;فانکشن رو هم می تونیم به شکل زیر باز نویسی کنیم :import React from "react" const Headers = propss => { const { brand } = propss; return (

{brand}

); }; export default Headers;

Functional Components

taha — Sat, 21 Sep 2019 11:24:07 +0430

خوب بیاین توی همون فولدر Component یه فایل دیگه به اسم header.js درست کنیم.خوب اگه یادتون باشه با rcc یه Component کلاس درست می کریم حالا کافی برای Functional طور rfc رو بزنیم. خوب ایمپورت کردنش رو هم که گفته بودم تو یادداشت قبلی...خوب برای arrow function هم که کار نداره به شکل زیر اون کدی که با rcc تولید کردیم رو تغییر می دیم:import React from "react" const Headers = () => { return (

call me I will help u

); } export default Headers;

کامپوننت ها در ری کت

taha — Sat, 21 Sep 2019 11:04:27 +0430

خوب برای درست کردن یه کامپوننت توی فولدر src یه فولدر به نام Component می سازیم خوب توش یه فایل می سازیم به اسم Contact.js خوب انگار کامپوننت رو باید با حرف بزرگ شروعشون کرد.خوب برای کد نویسی من از vscode اسفاده می کنم و یه افزونه داره که پیشنهاد می کنم نصبش کنید.VS Code ES7 React/Redux/React-Native/JS snippetsخوب حالا باز نوشتن rcc می تونیم یه کامپوننت کلاس بسازیم اون export default رو میاریم در اخر و بعد از export default اسم کامپوننتمون رو می نویسیم.خوب این شکلی شد:import React, { Component } from "react" class contact extends Component { render() { return(

hello im taha

email: taha@gmail.com
phone number: 09884456859

) } } export default contact;خوب برای نمایش این کامپوننت باید توی کامپوننت اصلی اپمون اون رو ایمپورت کنیم.

jsx چیست؟

taha — Thu, 19 Sep 2019 16:10:44 +0430

همونطور که گفتم قرار نیست من خیلی اکادمیک همه چیز رو توضیح بدم بیشتر یه سری یادداشت است که برای خودم می نویسم تا بعدا اگه لازم شد بخونمش...پس اگه می خوای دقیق تر بدونی jsx چیه می تونی مقاله نیما رو بخونی! jsx چیست؟در واقع jsx یه اکستنشن ه برای جاواسکریپت که اجازه می ده ما html مون رو داخل js استفاده کنیم.چند نکته برای استفاده از jsx هست :return (

hello world

); }اولیش اینه که برای این که class به یه المان بدیم باید از className استفاده کنیم به جای class.نکته بعدی که باید در نظر بگیرید اینه که return ( taha ); نباید از for برای label استفاده کنیم هر چند که مرورگر نمایش می ده اما با همچین اروری مواجه می شیم.همونطور که معلومه باید از htmlfor استفاده کنیم به جای for برای label.در تگ های که تگ بسته ندارند مانند input در jsx شما باید اون تگ رو ببندید مثلا اینطورییا مثلا br رو باید اینطوری ازش استفاده کنی:
شما وقتی می خواین یه چیزی رو return کنید باید فقط یک المان رو برگردونید.مثلا اینجوری اشتباه :return (

hello

); }اگه بخوایم درستش کنیم باید اینشکلیش کنیم:return (

hello

); در واقع می تونیم از متغییر ها هم استفاده کنیم برای استفاده هم باید اونا رو داخل {} بزاریم.مثال زیر رو نگاه کن.import React from "react" function App() { const name = "react" return (

hello {name}

); } export default App; همینطور می تونیم توی {} عملیات های ریاضی رو هم انجام بدیم return (

what is 1 + 1 = {1 + 1}

); }همچنین می تونیم که تو jsx از شرط ها استفاده کنیم مثلا یه متغییر درست می کنیم به نام shownumconst shownum = true;بعد بگیم که اگه shownum درست بود این متن رو نمایش بده:{ shownum ? p">

what is 1 + 1 = {1 + 1}

: null}همچنین می تونیم متغییر تعریف کنیم که مقدارش بر اساس یه شرطی انfunction App() { const shownum = true; let math; if (shownum) { math =

{1 + 11}

; } else { math = null; } return

{math}

; }

چه جوری ریکت نصب کردم!

taha — Mon, 16 Sep 2019 10:21:48 +0430

من برای کد نویسی از vscode استفاده می کنم.از تب terminal روی گزینه ی new terminal رو انتخاب کنید.بعدش تو ترمینال این دو تا رو چک می کنید. که نصب باشنnpm --version node --versionاگه نصب نبود هم از این ادرس می تونید دانلود کنید.حالا تو ترمینال npm install -g create-react-appیکم صبر کنید تا نصب شه حالا می تونیم از پکیج نصب شده استفاده کنیم تا اپ مون رو بسازیمcreate-react-app alakiبرای مثال اسم اپ من taha است ...create-react-app tahaخوب صبر می کنیم تا کاراش تموم شهبعد هم برای شروع همون پیشنهاد هاش رو تو ترمینال وارد کنیدcd taha npm startو از ریکت لذت ببرید:)

Map() js

taha — Sun, 15 Sep 2019 12:41:29 +0430

خوب تو ریکت باید خیلی خوب به es6 مسلط باشید منم در این راه داشتم یکم با Filter و Map و Reduce کار می کردم که به نظرم یکی از بهترین راهنما ها این نوشته تو ویرگوله به نظرم یه سر بهش بزنید.توابع مرتبه بالا(Higher-Order Functions) در جاوا اسکریپتولی یکم تو توضیح Reduce گنگ بود به نظرم!این عکس رو از همون نوشته ور داشتم که اول بهش لینک دادمخوب نگاه کنید ما از filter همونطور که از اسمش پیدا ست زمانی استفاده می کنیم که بخوایم فیلتر کنیم(چقدر خوب توضیح دادم;( مثلا) شما فکر کنید یه آرایه دارید که یه سری مشخصات توشه مثلا می خواین اون هایی که سنشون بیشتر از 18 پیدا کنید اون موقع از filter استفاده می کنید برای مثال بیشتر به همون لینک بالا مراجعه کنید.از map هم برای زمانی که بخواین یه کار رو روی تک تک اعضا انجام بدید مثلا بخوایم تک تک اعضا رو به توان دو برسونیم اینا که تکرار از همون مطلب توابع مرتبه بالا(Higher-Order Functions) در جاوا اسکریپت است حالا چیز جدید که می خوام اضافه کنم reduce است.که اگه حال دارید به صورت تصوری ببینید فانکشنال js بدون درد و خونریزی - بخش یک reduce ادی به خوبی توضیح داده.خوب اگه تو دیکشنری بسرچید reduce معنی هاش می شهخرد کردن، کاستن، خرد ساختن، کم کردن، تقلیل دادن، تنزل دادن، مطیع کردن، ساده کردن، استحاله کردندر واقع با reduce می شه آرایه مون رو کوچیک کرد خرد کرد یا ساده کرد.let alaki=[1,2,3,4,5].reduce((a,b)=>a+b); console.log(alaki);به نظرم اینجا ادی خیلی خوب توضیح میده می گه که بیاین کنسول لاگ بگیریم از این که reduce چه جوری کار می کنه .let some =[1,2,3,4,5].reduce((a,b)=>{ console.log(`a is ${a} , b is ${b}`) return a+b });این کنسول لاگشهخوب اول میاد عضو صفرم و اول رو با هم جمع می کنه.بعد میاد جمع یک و دو رو می گیره a بعد با دومین (یعنی 3) عضو توی ارایه جمع می کنه می شه 6 بعد باز میاد این 6 رو می گیره a و با سومین عضو جمع می کنه و این ادامه پیدا می کنهfunctional programming جاوااسکریپت javascript reduce فانکشنال پروگرمینگ×

Destructuring در ابجکت ها

taha — Thu, 12 Sep 2019 22:44:50 +0430

خوبDestructuring در ابجکت ها هم زیاد سخت نیست let obj ={ name:'taha', age:18, job:'dev'}let {name,age} = obj;console.log(name,age);من عاشق جاوا اسکریپتم و دارم بیشتر یاد می گیرم و در حال یادگیری یه سری یادداشت ها ور می دارم که بعد اگه نیاز شد دوباره مرورشون کنم. دوره آموزشی جاوااسکریپت ES6 که دارم می بینم.

Destructuring در آرایه‌ها

taha — Thu, 12 Sep 2019 22:36:23 +0430

خوب ما در es5 چی کار می کردیم برای تعریف و دسترسی ؟!let profile = ["taha",18,"dev"];let a = profile[0];let b = profile[1];console.log(a,b)ولی حالا در es6 به این شکل تعریف می کنیم:let arry = ['taha',29,'dev'];let[a,b,c] = arry;console.log(a,b,c);حالا اگه یه اریه که وجود نداره اشاره کنیم مطمنان undefined می گیریمlet arry = ['taha',29,'dev'];let[a,b,c,f] = arry;console.log(a,b,c,f);اما یک امکان جدید در es6 اینه که می تونیم مقدار اولیه هم تعریف کنیم:let arry = ['taha',29,'dev'];let[a,b,c,f='allllkkkiii'] = arry;console.log(a,b,c,f);من عاشق جاوا اسکریپتم و دارم بیشتر یاد می گیرم و در حال یادگیری یه سری یادداشت ها ور می دارم که بعد اگه نیاز شد دوباره مرورشون کنم. دوره آموزشی جاوااسکریپت ES6 که دارم می بینم.

رشته‌ها در ES6

taha — Thu, 12 Sep 2019 21:46:52 +0430

خوب ما در جاواسکریپت es5 وقتی داشتیم یه متغییر تعریف می کردیم نمی تونستیم فاصله تو خود value بزاریم و ارور می گرفت.مثلا:let name = "tahahaaaaa";let jobtitle ='blablabla';console.log(jobtitle);و ارور می گیریم اما تو es6 ما قبلیت رو داریم که اینتر هم بزنیم حالا می گید چه جوری با از اینا ` از اینا که اسمش رو نمی دونم برای من سمت چپ بالاست اگه اسمش رو می دونید خوشحال می شم کامنت ش کنید.در واقع اگه همین رو اینطوری بنویسیم :let name = "tahahaaaaa";let jobtitle =`blablabla`;console.log(jobtitle);همه چی درسته و برامون کنسول لاگ می گیره .حالا این ` یه قابلیت دیگه هم داره که مثلا ما می خوایم از یه متغییر دیگه هم استفاده کنیممثلا :let name = "tahahaaaaa";let jobtitle =`blablabla ${name} `;console.log(jobtitle);بعله اینطوری از یه متغییر دیگه هم می شه استفاده کرد.اینم کنسولش "blablabla tahahaaaaa "من عاشق جاوا اسکریپتم و دارم بیشتر یاد می گیرم و در حال یادگیری یه سری یادداشت ها ور می دارم که بعد اگه نیاز شد دوباره مرورشون کنم. دوره آموزشی جاوااسکریپت ES6 که دارم می بینم.

حلقه for of

taha — Thu, 12 Sep 2019 21:26:57 +0430

خوب for of توی es6 اضافه شده و تقریبا با خود if تفاوت چندانی ندارد:let array = ["taha",18,"dev"];شمارنده رو تعریف کردیمlet i;for (i of array){ console.log(i)}من عاشق جاوا اسکریپتم و دارم بیشتر یاد می گیرم و در حال یادگیری یه سری یادداشت ها ور می دارم که بعد اگه نیاز شد دوباره مرورشون کنم. دوره آموزشی جاوااسکریپت ES6 که دارم می بینم.

بررسی Object Literal

taha — Thu, 12 Sep 2019 21:17:15 +0430

خوب تو پست قبلی درباره توابع به صورت Arrow یه خلاصه ای نوشتم.در es5 چه جوری یه الجکت تعریف می کردیم؟!var obj = { name : 'taha', age : 18};console.log(obj.name)می تونیم داخل key رو هم به شکل زیر پر کنیم(یعنی داینامیکش کنیم):var name = 'taha';var obj = { name, age : 18};console.log(obj.name)جالبه که خود key رو هم می تونیم یه رشته ش کنیمvar obj = { "name"= "taha", age : 18};console.log(obj["name"]);توی es6 می شه name رو هم به صورت داینامیک تعریفش کرد:(در واقع key رو هم به صورت رشته تعریف کردیم)let emailAdd = "email";let obj ={ name:'taha', [emailAdd]: "taha@taha.com"}console.log(obj["email"])بدنیست تو babel بزنید و ببینید تو es5 چه جوری می نوشتن این یه تیکه کد رو:)من عاشق جاوا اسکریپتم و دارم بیشتر یاد می گیرم و در حال یادگیری یه سری یادداشت ها ور می دارم که بعد اگه نیاز شد دوباره مرورشون کنم. دوره آموزشی جاوااسکریپت ES6 که دارم می بینم.

تعریف توابع به صورت Arrow

taha — Wed, 11 Sep 2019 15:13:34 +0430

خوب یادداشت قبلی درباره let , const بود .همانطور که گفتم برای نوشتن کد هام دارم از jsbin استفاده می کنم.خوب قبلا در es5 ما توابع رو به صورت زیر تعریف می کردیم:function myfunc() { console.log('hello world');}myfunc();ولی در es6 می تونیم به صورت زیر تعریف کنیم:var firstfunc = () => { console.log('alaki')}فراخونیش هم همون شکلیه که بوده :)firstfunc ();خوب یه مثال به es5function sum(a,b) { var all = a + b; return all;}var something = sum(5,6);console.log(something);حالا با es6var sum = (a,b) => { var all = a + b; return all;}console.log(sum(5,5));فرض کنید تابع داریم :var sum = (a,b) => { var all = a + b; return all;}console.log(sum(5,5));تو es6 به ورودی ها می شه مقدار دیفالت دادvar sum = (a,b=5) => { var all = a + b; return all;}console.log(sum(5,5));و باز هم همون نتیجه رو می تونید ببیند...مطمنان با babeljs آشنا هستیداگه همین تیکه کد رو تبدیل به es5 کنیم به این شکل می شه"use strict";var sum = function sum(a) { var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5; var all = a + b; return all;};console.log(sum(5));درواقع کوتاه تر شده کد نویسی مون.من عاشق جاوا اسکریپتم و دارم تازه یاد می گیرم و در حال یادگیری یه سری یادداشت ها ور می دارم که بعد اگه نیاز شد دوباره مرورشون کنم. دوره آموزشی جاوااسکریپت ES6 که دارم می بینم.

es6در let

taha — Wed, 11 Sep 2019 11:23:51 +0430

من برای نوشتن کد هام از jsbin استفاده می کنم.if(true){ var age = 29}console.log(age)خوب اگه از این کد کنسول لاگ بگیرید خارج از if مقدار age رو بهتون برمی گردونه، انتظار همچین چیزی رو هم داریم چون در es5 همین جوری کد می زدیم.اما اگه حالا به جای var از let استفاده کنیم:if(true){ let age = 29}console.log(age)در jsbin با همچین اروری روبه رو خواهیم شد:"ReferenceError: age is not defined at zowulejiwo.js:4:38 at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924 at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866"که داره می گه که age تعریف نشده است.اگه در jsbin دقیق تر نگاه کنید :هشدار let در jsbin در واقع داره می گه که این let که شما استفاده کردید در es6 ه و ممکن تمام مرورگر ها اون رو نفهمن.فکر کنم تا اینجای کار فهمیده باشید که چرا وقتی کنسول گرفتیم ارور رو دیدیم در واقع در es6 متغییر ها می توانند به صورت محلی و سراسری تعریف بشن.درواقع age در اینجا یک متغییر محلی است.بیاین یه جور دیگه این کد رو بنویسیم:if(true){ let age = 29 console.log(age)}حالا که کنسول رو اوردیم داخل بلاک کد می تونیم اون age رو ببینم.در es5 هیچ مشکلی وجود نداره که شما اول به متغییر مقدار بدید بعد تعیریفش کنید:age = 5;var age;console.log(age);اما اگه همین کار رو با let انجام بدید شما ارور می گیرید:age = 5;let age;console.log(age);و ارورش:"error""ReferenceError: Cannot access 'age' before initialization at zowulejiwo.js:1:10 at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924 at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866"اما مقدار دهی بعد از تعریف مشکلی نداره:let age;age = 5;console.log(age);و کار می کنهههههه.اول تعریف بعد مقدار دهی.یه کیبورد دیگه برای تعریف متغییر const است که برای ثابت ها ازش استفاده می کنیم.مقداری که در طول برنامه نویسی تغییر نمی کنه.const a = 29;a = 30;وقتی که سعی کردیم دوباره به اون مقدار بدیم همچین اروری بر خوردیم:"error""TypeError: Assignment to constant variable. at zowulejiwo.js:3:3 at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924 at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866"من عاشق جاوا اسکریپتم و دارم تازه یادمی گیرم و در حال یادگیری یه سری یادداشت ها ور می دارم که بعد اگه نیاز شد دوباره مرورشون کنم. دوره آموزشی جاوااسکریپت ES6 که دارم می بینم.