React، از محبوبترین کتابخانههای جاوااسکریپت میباشد که شرکتهای بزرگ و کوچک مانند اینستاگرام، نتفلیکس، Airbnb و بسیاری دیگر، از کتابخانه استفاده میکنند.
چرا React.js؟
React به قول فیسبوک، برای حل یک مشکل ساخته شده بود: «ساختن برنامههای کاربردی بزرگ، با دادههایی که در طول زمان متغیر هستند.» (که دقیقا بههمین علت، اینستاگرام و فیسبوک با استفاده از React ساخته شدهاند)
با استفاده از React، میتوان نشان داد که برنامهی کاربردی شما در هر زمان، به چه شکلی باشد. زمانی که دادهها تغییر میکنند، React تشخیص میدهد که کدام قسمتهای برنامه، نیاز به بروزرسانی دارند و تنها آن قسمتها رندر میکند.
یکی از دلایل محبوبیت React، قابلیتهای آن برای ساختن برنامه های کاربردی است که encapsulated و قابل استفادهی مجدد هستند و میتوان برایشان کامپوننتهای مختلفی نوشت.
آنچه ما خواهیم ساخت:
برنامهای که در زیر مشاهده میکنید، برنامهای کاربردی است که در این مجموعهی آموزشی خواهیم ساخت:
مثال فوق را میتوانید در مرورگر خود، از طریق لینک زیر مشاهده نمایید:
blog.mxstbr.com/weather-app
در اولین فصل این خودآموز، ابتدا با مفاهیم React آشنا میشویم و در فصل دوم، ساختن برنامهی کاربردی فوق را شروع میکنیم. پیشنهاد میکنیم حتی اگر با مفاهیم React آشنایی دارید، این فصل را حتما مطالعه کنید.
شروع
برای توضیحات اولیه، از react.jsbin.com استفاده خواهیم کرد که محیطی با تمام امکانات، برای استفاده از React میباشد.
ریئکت شامل دو کتابخانهی React و ReactDOM میباشد.
با استفاده از کتابخانهی React، میتوان المنتها یا موجودیتهای مختلف را ایجاد کرد؛ که این المنتها، توسط ReactDOM رندر میشوند. علت جدا بودن این دو کتابخانه، این است که میتوان المنتهای ریئکت را هرجایی و نه فقط در DOM مرورگر، رندر کرد.
برای مثال، آزمایشهای اولیهای برای رندر کردن React در Canvas، WebVR و حتی در سختافزار وجود دارد!
با بازکردن این لینک تگ <h1> با متن "Hello World" را مشاهده خواهید کرد، که سورس کد زیر این متن را ایجاد میکند:
ReactDOM.render( React.createElement('h1', {className: 'heading'}, 'Hello World'), document.getElementById('container') );
از تابع ReactDOM.render()، برای رندرکردنReactElement ای که با استفاده از تابعReact.createElement() ایجاد شده است، استفاده میکنیم.
ReactDOM.render()
ReactDOM.render()، تابعی است که دو آرگومان نیاز دارد: یکی همان ReactElementایست که رندر خواهد شد و دیگری گرهی DOMای که میخواهیم داخل آن رندر کنیم.
ReactDOM.render( React.createElement('h1', {className: 'heading'}, 'Hello World'), document.getElementById('container') );
React.createElement()
این تابع، node یا ReactElementای را که میخواهیم ایجاد کنیم، بهعنوان اولین آرگومان و برخی از خواص (مانند type) یک شیء را، بهعنوان دومین آرگومان میگیرد:
React.createElement('input'); // -> <input></input> React.createElement('input', { type: 'radio' }); // -> <input type="radio"></input> React.createElement('input', { className: 'heading', type: 'radio' }); // -> <input class="heading" type="radio"></input>
به این نکته توجه کنید که ویژگی class در HTML با خاصیتclassName در react نوشته میشود. این کار به این علت است که class یک کلمهی کلیدی ذخیره شده در جاوااسکریپت است، که احتمال دارد ما یک مشکل ناخواسته را با فرستادنclass وارد برنامهی خود بکنیم. بنابرین react برای جلوگیری از این اشتباه، بهجای class از className استفاده میکند.
همچنین میتوانیم فرزندان یک گره (node) را، بهعنوان سومین آرگومان به تابع بدهیم. در مثالی که مشاهده میکنید، ""Hello World که فرزند گرهی h1 و یک متن است، بهعنوان سومین آرگومان به تابع داده شده است:
React.createElement('h1', null, 'Hello World'); // -> <h1>Hello World</h1>
فرزندان (در مثال فوق: ""Hello World) میتوانند ReactElement دیگری باشند!
فرض کنیم که میخواهیم یک <div class=”wrapper”> اطرافheading اضافه کنیم؛ برای این کار از React.createElement برای رندرکردن یکdiv همراه classNameای به نام "wrapper" استفاده میکنیم و سپس heading را برای فرزند ReactElement بهعنوان آرگومان میفرستیم. (بهعبارتی خود المنت h1ای که از طریق react.createElement ایجاد میکنیم، بهعنوان آرگومان سوم استفاده شده است)
React.createElement('div', { className: 'wrapper' }, React.createElement('h1', null, 'Hello World') )
کد فوق، HTMLای که در زیر مشاهده میکنید را رندر خواهد کرد:
<div class="wrapper"> <h1>Hello World</h1> </div>
<div class=”wrapper”> ممکن است max-width و برخی style های دیگری داشته باشد. با استفادهی مجدد از این المنت، میتوان اطمینان حاصل کرد که برنامهی کاربردی ما ثابت و بدون تناقض میباشد؛ چرا که این المنت هرجا که استفاده شود، همان styling را خواهد داشت. Componentها دقیقا بههمین منظور استفاده میشوند.
Components
برای ایجاد کردن یک ReactComponent، تابعی مینویسیم که یک ReactElement را برمیگرداند.
var Wrapper = function(props) { return React.createElement('div', { className: 'wrapper' }); }
سپس میتوانیم مانند گرههای DOM، از این componentها به شکل زیر استفاده کنیم (بهعنوان یک آرگومان، در فراخوانی تابع createElement استفاده کنیم):
React.createElement(Wrapper); // -> <div class="wrapper"></div>
کامپوننت wrapper بهعلت اینکه فرزنداناش را رندر نمیکند، سودمند نیست و نتیجهای نشان نمیدهد:
React.createElement(Wrapper, {}, 'Hello World!'); // -> <div class="wrapper"></div> (no "Hello World" visible!)
این امر به این علت است که تابع کامپوننت از propertyها میگذرد، بدون اینکه از آنها استفاده کند. در مثال فوق ما ازproperty هایی که فراخوانیcreateElement(Wrapper) میدهد، بدون استفاده رد شدیم. طبق کد زیر، فرزندان wrapper را رندر میکنیم:
var Wrapper = function(props) { // Render the children we get passed from the createElement(Wrapper) call return React.createElement('div', { className: 'wrapper' }, props.children); }
React.createElement(Wrapper, {}, 'Hello World!'); // <div class="wrapper">Hello World</div>
میتوانیم با کد زیر، heading خود را داخل کامپوننت wrapper رندر کنیم و درنهایت یک کامپوننت Wrapper با قابلیت استفادهی مجدد داریم:
React.createElement(Wrapper, null, React.createElement('h1', null, 'Hello World') ); // <div class="wrapper"><h1>Hello World</h1></div>
JSX
درصورتی که نمونههایی از کدهای نوشتهشده باReact را دیده باشید، ممکن است متوجه سینتکس HTMLمانندی در کد جاوااسکریپتی که توسط بسیاری استفاده میشود، شده باشید.
این سینتکس “JSX” نام دارد، که یک wrapper برای React.createElement میباشد.
بهجای فراخوانی React.createElement بهصورت دستی، میتوان از JSX استفاده کرد تا کد، مانند یک HTML رندرشده نمایش داده شود.
هر دو کد زیر، یکسان هستند:
<Wrapper> <h1 className="heading">Hello World</h1> </Wrapper>
React.createElement(Wrapper, null, React.createElement('h1', {className: 'heading'}, 'Hello World') )
استفاده از JSX ممکن است کمی دشوار باشد؛ چراکه یک افزونهی (extension) غیر استاندارد از جاوااسکریپت میباشد، که هیچ مرورگری آن را متوجه نمیشود. درنتیجه لازم است تا کد خود را توسط یک build tool، transpile کنیم.
با کد زیر میتوان کامپوننت Wrapper را تغییر داد، تا از JSX ا استفاده کرد:
var Wrapper = function(props) { return ( <div className="wrapper">{ props.children }</div> ); };
نمایش نتیجه
این کار تفاوت چندانی با فراخوانی createElement به صورت دستی ندارد، اما JSX خواناتر است و راحتتر قابل درک میباشد؛ بههمین دلیل برای نوشتن برنامههای react از JSX استفاده خواهیم کرد.
Classes
همانطور که در بخش «چرا React؟» گفته شد، React یک DOM مجازی دارد برای به حداقل رساندن رندرکردنها، تا زمانی که وضعیت برنامه تغییر میکند. اما وضعیت برنامه چیست و چگونه آن را در React مدیریت میکنیم؟
هر برنامهی کاربردیای، وضعیت (state) خواهد داشت. State میتواند هرچیزی باشد.
بهعنوان یک مثال ساده از state، کامپوننتشمارنده (counter) که تعداد دفعاتی که روی یک دکمه کلیک میکنیم را میشمارد، میسازیم. کامپوننت Wrapper در بالا، بهعنوان یکfunctional component نوشته شده است. برای ایجاد کردن یک stateful component، از کلمهی کلیدی class استفاده میکنیم.
همانطور که در کد زیر مشاهده میکنید، برای ایجاد کردن یک کامپوننت stateful، یک class جدید ایجاد میکنیم که React.Component راextend میکند, سپس یک متد render که ReactElements را برمیگرداند، برای کلاس خود تعیین میکنیم:
class Counter extends React.Component { render() { return ( <p>This is the Counter component!</p> ); } }
این کامپوننت را مانند هر کامپوننت دیگری، توسط ReactDOM.render، رندر میکنیم:
ReactDOM.render( <Counter />, document.getElementById('container') );
نمایش نتیجه
همانطور که در کد زیر مشاهده میکنید، میتوانیم یک کامپوننت button جداگانه ایجاد کنیم که prop با نام text میگیرد. از آنجایی که نیازی نیست تا هیچ وضعیتی را این کامپوننت ذخیره کند، بهعنوان یک کامپوننت کاربردی آن را مینویسیم.
var Button = function(props) { return ( <button>{ props.text }</button> ); }
این دکمه (button) را داخل شمارندهی خود، با یک متن "click me!" رندر میکنیم:
class Counter extends React.Component { render() { return ( <div> <p>This is the Counter component!</p> <Button text="Click me!"/> </div> ); } }
نمایش نتیجه
اکنون با استفاده از onClick، هربار که کاربر روی دکمهی button کلیک میکند، شمارنده یک واحد افزوده میشود:
class Counter extends React.Component { render() { return ( <div> <p>This is the Counter component!</p> <Button text="Click me!" onClick={function() { console.log('click!') }} /> </div> ); } }
در اینجا لازم است تا بینreact component و گرههای DOM واقعی تفاوتی باشد. Event Handlerها مانند onClick، onMouseOver و...، تنها زمانی کار میکنند که همراه با گرههای واقعی DOM باشند. مثال فوق کار نمیکند، زیرا فقط به ReactComponent متصل است و با کلیک کردن روی دکمه، عبارت "click!" را در کنسول مشاهده نمیکنید.
برای حل این مشکل، کنترلر onClick را در داخل کامپوننت button، به گرهی native DOM button متصل میکنیم:
var Button = function(props) { return ( <button onClick={props.onClick} { props.text }</button> ); }
نمایش نتیجه
در واقعیت نمیخواهیم که با هربار کلیک کردن روی دکمه، عبارت "click!" را ثبت کنیم؛ هدف شمردن تعداد دفعاتی است که روی دکمه کلیک میشود. برای این کار به کامپوننتشمارندهی خود،state را اضافه میکنیم. State یک شئ ساده در react است، که میتواند هر تعداد properties داشته باشد. در مثال ما، state یک ویژگی با نام clicks با مقدار اولیهی صفر خواهد داشت که این مقدار با هر کلیک، افزایش مییابد.
هر کلاسی دارای متد constructor میباشد که برای مقداردهی اولیه بهصورت خودکار فراخوانی میشود. با استفاده از این متد، وضعیت اولیهی کامپوننتشمارنده را تعیین میکنیم:
class Counter extends React.Component { constructor() { super(); this.state = { clicks: 0 }; } render() { /* ... */ } }
این کار به تنهایی تغییری ایجاد نمیکند و ما همچنان شماره را در صفحهی خروجی خود مشاهده نمیکنیم. برای دستیابی به وضعیت کنونی کامپوننت در هرجایی داخل کامپوننت، از this.state استفاده میکنیم:
class Counter extends React.Component { constructor() { super(); this.state = { clicks: 0 }; } render() { return ( <div> <p>This is the Counter component! The button was clicked { this.state.clicks } times.</p> <Button text="Click me!" onClick={function() { console.log('click!') }} /> </div> ); } }
نمایش نتیجه
Counter ما اکنون به شکل زیر میباشد اما با کلیک کردن روی دکمه، تعداد کلیک افزایش نمییابد!
برای تغییر دادن وضعیت یک کامپوننت، از this.setState استفاده میکنیم که یک تابع کمکی است که توسط React فراهم شده است.
متد increment را به شمارندهی Counter اضافه میکنیم که وضعیت clicks را یکواحد افزایش میدهد و this.increment را، زمانی که روی دکمهی Buttonکلیک میشود، فراخوانی میکند.
class Counter extends React.Component { constructor() { super(); this.state = { clicks: 0 }; } increment() { this.setState({ clicks: this.state.clicks + 1 }); }; render() { return ( <div> <p>This is the Counter component! The button was clicked { this.state.clicks } times.</p> <Button text="Click me!" onClick={this.increment} /> </div> ); } }
مشکلی که در این قسمت پیش میآید این است که به خاطر عملکردی که classها در ES6 دارند، this در increment تعریف نشده است. آسانترین راهحل برای این موضوع، bind کردن متن increment به کلاس در داخل constructor بهصورت زیر میباشد:
class Counter extends React.Component { constructor() { super(); this.state = { clicks: 0 }; this.increment = this.increment.bind(this); } increment() { this.setState({ clicks: this.state.clicks + 1 }); }; render() { return ( <div> <p>This is the Counter component! The button was clicked { this.state.clicks } times.</p> <Button text="Click me!" onClick={this.increment} /> </div> ); } }
نمایش نتیجه
اکنون Counter بهدرستی کار میکند و با هربار کلیک کردن روی دکمه، مقدار شمارنده را یکواحد افزایش میدهد.
اکنون با مفاهیم React آشنا هستیم و هرچیزی را که برای ساختن اولین برنامهی کاربردی خود لازم است، میدانیم.
در ادامه میتوانید وارد فصل دوم این مجموعهی آموزشی خواهیم شد و نوشتن اولین برنامه را آغاز میکنیم.
منبع: plot.ly
محصولات مشابه فروشی
-
دانلود قالب پست اینستاگرام مخصوص معرفی اجناس یا عکس شخصی
پست و استوری اینستاگرامدانلود قالب پست اینستاگرام مخصوص معرفی اجناس یا عکس شخصی با لایه باز که شما رفقا میتونید با دانلود و ویرایش
این طرح از عکس و متن مورد نظر خودتون استفاده کنید و طرح خودتون رو داشته باشید
حتما از دیگر طرحهای بنده دیدن کنید
طرح لایه باز قالب پست اینستاگرام چیست؟
طرح لایه باز به طرحی میگن که قابل ویرایش و شما میتونید اون رو در فتوشاپ ویرایش
کحنید و از عکس و متن مخصوص خودتون دراون قالب استفاده کنید و طرح امادتون حاضره
مشخصات قالب لایه باز پست اینستاگرام
این مجموعه دارای مود رنگی RGB فرمت PSD و حجمی بسیار کم هست
ار دیگر قالبهای من دیدن کنید
20000 -
پست اینستاگرام لایه باز مخصوص فروش و معرفی اجناس و تخفیفات
پست و استوری اینستاگرامدانلود مجموعه قالب پست اینستاگرام مخصوص فروش اجناس و تخفیفات با لایه باز که شما عزیزان میتونید با دانلود و ویرایش تمامی قالبها با تخفیف 30 تا 50 درصدی قرار داده شدن این طرح از عکس و متن مورد نظر خودتون استفاده کنید و طرح خودتون رو داشته باشید طرح لایه باز قالب پست اینستاگرام چیست؟ طرح لایه باز به طرحی میگن که قابل ویرایش و شما میتونید اون رو در فتوشاپ ویرایش کحنید و از عکس و متن مخصوص خودتون دراون قالب استفاده کنید و طرح امادتون حاضره مشخصات قالب لایه باز پست اینستاگرام این مجموعه دارای مود رنگی RGB فرمت PSD و حجمی بسیار کم هست ار دیگر قالبهای من دیدن کنید ملت وب مرکز خرید و فروش طرحهای...22000 31000 -
دانلود 2 کاور بسیار کاربردی و شیک برای معرفی اجناس و عکس هنرمندان با لایه باز
پست و استوری اینستاگرامدانلود 2 طرح بسیار کاربردی و شیک پست اینستاگرام برای معرفی و فروش اجناس شما و حتی قراردادن عکس شخصی و هنرمندان برای پیجهای هنری. این کاورها به گونه ای طراحی میشن که شما عزیزان هم بتونید از اجناستون رونمایی کنید هم از عکس اشخاص مختلف استفاده کنید دراین کاورها نکته: قبل از هرچیز حتما دیگر کاورهای بنده رو مشاهده بفرمایید که پشیمون نخواهید شد کاورهای ما ارزانتر از هرجایی برای شما عزیزان قرار داده میشه طرحی که مشاهده میفرمایید طرح لایه باز کاور پست اینستاگرام برای معرفی اجناس و حتی عکس شخصی برای پیجهای هنرمندان هست که میتونید با دانلود این طرح از عکس و متن مورد نظر خودتون در این طرح ایتسفاده کنید و طرح مخصوص خودتون رو داشته باشید مشخصات کاور پست اینستاگرام فروش اجناس این طرح دارای فرمت psd و لایه باز و فرمت رنگی rgb میباشد در ادامه نمونه کاور...23000 33000 -
دانلود قالب معرفی و دانلود اپلیکیشن Axuta برای HTML
شرکتیقالب Axuta قالب معرفی نرم افزار تمیز و مدرن و صفحه فرود نرم افزار است. این قالب تمیز و زیبا مناسب و ایده آل برای صفحه فرود برنامه است. قالب Axuta به خوبی سازمان یافته است و بسیار آسان برای سفارشی کردن میباشد.
امکانات و ویژگی های قالب axuta برای HTML
- طراحی تعاملی
- بر اساس بوت استرپ 4
- W3C معتبر
- انیمیشن jQuery و CSS3
- Mailchimp آماده
- طراحی تمیز و فوق العاده مدرن
- پلاگین سبد پاسخگو
- سازگاری مرورگر مختلف
- 900+ قلم آیکن
- فونت های گوگل و فونت های سفارشی
- فونت ایران سنس
- فارسی و راستچین
89000 135000 -
دانلود قالب AppCo قالب HTML معرفی و دانلود اپلیکیشن اپکو
شرکتیدانلود قالب AppCo قالب معرفی و دانلود اپلیکیشن اپکو بصورت فارسی و راستچین. قالب AppCo یک قالب HTML کاملاً پاسخگو و سازگار با موبایل است. قالب AppCo کاملاً مناسب صفحه فرود برنامه و اپلیکیشن موبایل میباشد و روش بهتری برای ارائه برنامه یا محصول شماست. قالب AppCo تمیز ، قدرتمند و آسان برای استفاده است. نسخه راستچین و فارسی قالب AppCo بصورت راستچین و فارسی همراه با فونت ایران یکان که توسط تیم ملت وب آماده شده در اختیار خریداران عزیز قرار میگیرد. برخی از ویژگی های قالب AppCo 100٪ پاسخگو و سازگار با موبایل 7 صفحه اصلی 17 صفحه داخلی راستچین و فارسی صفحه پیشنهاد جمعه سیاه فرم تماس PHP آسان برای سفارشی سازی ساخت با Bootstrap کد تمیز طراحی حرفه ای و مدرن سازگار با انواع مرورگر ها قلم های Google استفاده شده نماد Themify گنجانده شده است جلوه های انتقال بسیار نرم کد...89000 139000
آخرین های مشابه مشاهده بیشتر
-
معرفی React.js
آموزش javascriptReact، از محبوبترین کتابخانههای جاوااسکریپت میباشد که شرکتهای بزرگ و کوچک مانند اینستاگرام، نتفلیکس، Airbnb و بسیاری دیگر، از کتابخانه استفاده میکنند. چرا React.js؟ React به قول فیسبوک، برای حل یک مشکل ساخته شده بود: «ساختن برنامههای کاربردی بزرگ، با دادههایی که در طول زمان متغیر هستند.» (که دقیقا بههمین علت، اینستاگرام و فیسبوک با استفاده از React ساخته...رایگان -
دلیل استفاده از کتابخانه جاوا اسکریپت React
آموزش javascriptهنگامی که به توسعه وب و برنامه های تلفن همراه می آید، React انتخاب نهایی برای بسیاری از توسعه دهندگان و کسب و کار است. در Cubet، اولویت ما همواره کتابخانه جاوا اسکریپت است و برای ایجاد شگفتی با رابط کاربر React می باشد. که محبوب و کارآمد به نظر می رسد، React رتبه ستاره 88،588 با 1،167 همکاران از سال انتشار خود را 2013 تا کنون است. چرا در میان تکنسین ها در عرصه توسعه نرم افزار دوست داشتنی...رایگان -
دانلود رایگان قالب مدیریت Angular, React & HTML متریال Portal
قالب رایگان htmlما همه چیزهایی را که آموختیم، ساخت بهترین الگوهای AngularJS Triangular را به دست آوردیم و آن را با یکدیگر ترکیب کردیم تا الگو جدید Portal Angular 5 را ایجاد کنیم. امکانات ساخته شده با CLI زاویه ای گوگل از مواد زاویه ای Google 2 استفاده می کند داشبورد فوقالعاده شیک 6 پوسته شگفت انگیز از Angluar Flex برای طرح بندی استفاده می کند RTL پشتیبانی شده 7 مثال برنامه صفحات 30+ عنصر صفحات احراز هویت صفحات خطا 9 عکس ساخته...رایگان -
دانلود رایگان قالب Viho قالب مدیریت HTML , React Js و لاراول 9 به همراه نسخه راستچین RTL
قالب رایگان htmlقالب Viho یک قالب مدیریت بوت استرپ با امکانات کامل، چند منظوره و ممتاز است که با Bootstrap 4 Framework، HTML5، CSS و JQuery ساخته شده است. دارای مجموعه عظیمی از اجزای رابط کاربری قابل استفاده مجدد است و با آخرین پلاگین های jQuery یکپارچه شده است. می توان از آن برای همه نوع برنامه های کاربردی وب مانند پنل مدیریت سفارشی، بک اند برنامه، CMS یا CRM استفاده کرد. ویژگی های قالب Viho قالب مدیریت شامل نسخه...رایگان -
طرح لایه باز معرفی شهر و تور
طرح لایه بازتبلیغات شهری در کسب و کار های کنونی حرف اول بازاریابی را میزند و در این بین حتما انواع طرح لایه باز معرفی شهر و تور تبلیغاتی مختلف را در سطح شهر مشاهده کرده اید. طرح لایه باز معرفی شهر و تور تبلیغاتی یکی از روش های جذب مشتری یا اطلاع رسانی در مورد موضوعات مختلف مانند همایش ، کنسرت ، برگزاری مراسم های مختلف و ... میباشد. حتما هنگام مشاهده طرح لایه باز معرفی شهر و تور ها به حرفه ای بودن برخی...رایگان -
معرفی نرم افزار CorelDraw
معرفی شرکت Corel شرکت کورل Corel Corporation پس از شرکت ادوبی یکی از معروفترین شرکتهای نرمافزاری دنیا با بیش از ۱۰۰ میلیون کاربر فعال در بیش از ۷۵ کشور جهان در سال ۱۹۸۹ با ساخت کورل دراو ( Corel Draw ) متولد شد . کورل در سال ۲۰۰۹ با خرید شرکت یولید به یک غول نرمافزاری گرافیک پس از ادوبی تبدیل شد . عمده فعالیت کورل ساخت نرمافزارهای گرافیکی و مالتیمدیا میباشد . دفتر مرکزی شرکت در...رایگان -
معرفی نرم افزار Adobe Illustrator
نرم افزار Adobe Illustrator به معنای تصویرگر ، یکی از نرم افزار های قدرتمند شرکت Adobe Systems Incorporated بوده که بر مبنای گرافیک کامپیوتری برداری ( Raster ) تصاویری را ویرایش و یا خلق می نماید . این نرم افزار یکی از قدرتمندترین نرم افزارهای ویرایش و تولید تصاویر برداری است که نوع کارکردن با آن ، بسیار مشابه کار کردن با نرم افزار فتوشاپ (Photoshop ) می باشد . Adobe Illustrator مانند نرم افزار شرکت...رایگان -
جلسه اول معرفی و ابزارهای مورد نیاز
آموزش PHPطراحی و برنامه نویسی وب، امروزه در همه جای دنیا بسیار مورد توجه است. برای تولید صفحات وب میتوان از زبانهای مختلفی چون ASP.Net، پیاچپی و ... بهره گرفت. PHP به دلیل متن باز بودن و قدرت بسیار بالایی که دارد در بین توسعه دهندگان وب جایگاه بسیار خوبی دارد و تعداد زیادی از این توسعه دهندگان از php در پروژههای خود بهره میبرند. در ادامه مطلب و جلسه اول آموزش PHP با ملت وب همراه...رایگان -
دانلود 20 موکاپ مدرن جهت کسب و کار و معرفی محصول
وکتورعلامت گذاری به عنوان مارک توسط مرکز تبلیغات ادریس نام تجاری Mock Up صفحه دانلود → هویت MockUp Vol.9 توسط GraphicBurger هویت MockUp Vol.9 دانلود صفحه → نام تجاری Identity Mockup (PSD) نام تجاری Identity Mockup دانلود صفحه → مارک تجاری رایگان و قالب هویت Mockup (PSD) قالب رایگان قالب Mockup دانلود صفحه → نام تجاری رایگان / علامت تجاری مستقل (PSD) نام تجاری گوشه / هویت Mockup دانلود صفحه...رایگان -
دانلود بروشور معرفی و گردشگری و تور رایگان
طرح لایه بازاین بروشور با ترکیب رنگ زرد و سرمه ای جذابیت خاصی به بروشور داده است استفاده از اشکال مربع و مستطیل و کادر های بسیار زیادش برای جایگزاری محتوای شما بسیار جالب خواهد بودب دانلود طرح لایه باز رایگان توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند...رایگان -
معرفی برترین افزونه های نظرات مشتریان رایگان
آموزش wordpressآیا شما به دنبال بهترین افزونه نظرات مشتریان برای سایت وردپرس خود هستید؟ در این مقاله، ما بهترین پلاگین هاینظرات مشتریان وردپرس را که شما می توانید در وب سایت خود استفاده کنید را انتخاب کرده ایم. 1. Testimonial Rotator افزونه Testimonial Rotator آسان برای استفاده است. این افزونه وردپرس اجازه می دهد تا شما یک گواهینامه چرخ فلک ایجاد کنید و توصیفات چرخشی را در هر نقطه از وب سایت خود...رایگان -
معرفی 10 پلاگین برتر تایم لاین وردپرس
افزونه رایگان وردپرسهدف ما از تایم لاین همان جدول زمانی در فیس بوک است که تصاویر و فعالیت های شما را براساس سالها سازماندهی می کند تا بتوانید بدون هر گونه تصادفی هر زمان که بخواهید به آنها نگاه کنید. بنابراین در اینجا 10 بهترین افزونه های وردپرس Timeline که شما می توانید به وبلاگ یا وب سایت خود اضافه کنید. را معرفی حضورتان میکنم Everest Timeline (پولی) این پلاگین جدول زمانی رسپانسیو وردپرس است که همراه با...رایگان -
پست اینستاگرام مشاور املاک برای معرفی خانه
طرح لایه بازشبکه اجتماعی اینستاگرام در ابتدا یک شبکه اجتماعی برای سرگرمی بود ولی با ورود افراد مختلف مثل هنرمندان، ورزشکاران و بلاگر و ... به این شبکه اجتماعی اکنون تبدیل به یک غول تجارت و تبلیغات و کسب و کار مجازی شده و همه میتوانند با توجه به خلاقیت خود از این شبکه کسب درآمد کنند. هرچه کاور پست اینستاگرام شما جذاب و خلاقانه تر باشد درصد بازدید و بازخورد آن به طبع بیشتر خواهد شد. برای اینکار قالب...رایگان -
معرفی +30 قالب متریال و آیکون ها برای طراحان خوش سلیقه
آیکن هاطراحی و طراحی مجدد گوگل در سال 2014، طراحی محتوا یک زبان بصری نوآورانه است که برای متحد کردن تجربه کاربری تمام محصولات خود در همه دستگاه ها ایجاد شده است و بر اساس اصول طراحی عالی همراه با فناوری قدرتمند ساخته شده است. زیبایی Material Design را می توان در تمام برنامه های تلفن همراه گوگل (Gmail، صندوق ورودی، تقویم، یوتیوب ...) و سایت های دسکتاپ مشاهده کرد. و فقط به عنوان iOS اپل و مترو...رایگان -
معرفی افزونه های جایگزین یا مشابه YOAST SEO برای سئو وردپرس
آموزش wordpressوقتی حرف از افزونه سئو وردپرس به زبان می آید اولین افزونه ای که به ذهن همه خطور میکند ، Yoast SEO است.این افزونه با نصب بیش از 61 میلیون بار به نظر افزونه خوبی می آید.و در حالی که Yoast SEO ممکن است در این مورد پادشاه باشد، این بدان معنا نیست که جایگزینی برای آن وجود ندارد. در این آموزش از ملت وب به معرفی 4 افزونه شبیه یا جایگذین Yoast SEO میپردازیم پس با ما همراه باشید: 1.SEOPress اولین...رایگان -
معرفی ابزار Healing Brush در فوتوشاپ (صاف کردن صورت)
آموزش فوتوشاپHealing Brush را ابزار اجازه می دهد به شما برای رفع عیوب تصویر مانند خش، لکه، و غیره با نمونه برداری از مناطق اطراف آن و یا با استفاده از یک الگوی از پیش تعریف شده شما می توانید عیوب به بقیه تصویر مخلوط. ابزار جراحی زیبایی در Toolbox فتوشاپ ، در سمت چپ قرار دارد. با استفاده از ابزار شستشوی قلم مو Healing Brush برس زخم در جعبه ابزار را انتخاب کنید. تنظیمات را در نوار گزینه...رایگان -
معرفی 7 پلاگین برتر پشتیبان گیری وردپرس در سال 2019
آموزش wordpressسلام وقت بخیر دوستان میخواهم یک داستان کوچکی در مورد این پست برای شما عرض کنم که امیدوارم خوشتان آمده باشد چند سال پیش، در CTP خودم در FTP کار می کردم و تلاش می کردم چیزهای جدیدی را که در بعضی وبلاگ ها و یا دیگران خوانده بودم بررسی کنم. من سعی کردم کار خاصی انجام دهم، اما آنچه من انجام دادم، نصب وردپرس را برای وبلاگم حذف کردم. بله من وبلاگم را حذف کردم وبلاگ من که خونم، عرق...رایگان -
معرفی 50 قالب وردپرس برتر سال 2012 با آنالیز نقاط قوت و ضعف
قالب وردپرس رایگانمضامین پریمیوم به شما امکان دسترسی به ویژگی های پیشرفته ، عملکرد بیشتر ، افزونه های پریمیوم همراه ، پشتیبانی همه ستاره و موارد دیگر را می دهد. هر کسب و کاری به یک موضوع برتر وردپرس نیاز ندارد. اما اغلب این سرمایه گذاری در مقایسه با تمام مزایایی که سایت تجاری شما ایجاد می کند حداقل است. برخی از بهترین تم های تجاری برتر را در زیر کاوش کنید تا ببینید ارزش سرمایه گذاری در...رایگان -
آموزش ویدیویی و رایگان وردپرس - قسمت سوم معرفی کامل پنل
آموزش wordpressسلام و درود بر شما در قسمت سوم از آموزش وردپرس هستیم در قسمت های قبلی به معرفی وردپرس و نصب آن در xamp پرداختیم که در این آموزش رایگان از وردپرس قصد داریم تمامی منو های وردپرس را برای شما آموزش بدیم که امیدوارم برای شما لذت بخش باشد در زیر آموزش متنی را نیز اضافه میکنم اما سعی کنید به صورت تصویری نیز به آموزش اقدام نمایید. آموزش افزودن ویرایش و حذف نوشته در وردپرس در این قسمت از آموزش قصد...رایگان -
افزونه وردپرس روزنامه و معرفی و کاتالوگ حرفه ای Real3D Flipbook
افزونه رایگان وردپرسReal3D Flipbook اسناد شما را به فلیپبلی های 3D واقعی تبدیل می کند با انیمیشن های فیزیکی، چراغ ها و سایه ها. ف، 100٪ HTML5. بدون تبدیل سرور سمت، همه چیز در زمان اجرا انجام می شود، شما فقط فایل پی دی اف URL یا تصاویر را تنظیم کنید. این محتوای محتوای پویای HTML را در صفحات پشتیبانی می کند، ویدئو یوتیوب، متن، تصویر، لینک، iframe و سبک آن را با CSS درون خطی پشتیبانی می کند. Pdf flipbook از لینک های داخلی و...رایگان -
دانلود 19 طرح ورود آفیس رزومه برای معرفی word office
مهم نیست که چه صنعتی در آن کار می کنید رزومه ساده، سیاه و سفید نوشته شده در فونت Times New Roman، در واقع می تواند یک برنامه کاری را تضعیف کند. اما فقط به این دلیل که رزومه شما خلاق تر است، به این معنا نیست که شما نیاز به نرم افزار طراحی ویژه دارید تا برنامه خود را برجسته کنید. برعکس، رزومه کاری خود را در مایکروسافت Word راه انداخت . برای پیدا کردن چگونگی ایجاد رزومه کاری خود را در...رایگان -
دانلود و معرفی مجموعه 100 فونت انگلیسی برتر 2020 رایگان
متفرقهBitter HT Serif (رایگان) Bitter HT شامل Regular ، Italic ، Bold و Bold Italic است. طراحی شده توسط Sol Matas. در اینجا بارگیری کنید: Bitter HT Serif Download Arkibal Serif (عناصر Envato) Arkibal Serif یک سری سری مدرن است که توسط Jan-Christian Bruun طراحی شده است. در اینجا بارگیری کنید: Arkifal Serif Download PT Serif (رایگان) PT Serif شامل انواع معمولی ، ایتالیایی ، Bold و Bold Italic است. ایجاد شده توسط ParaType. در اینجا بارگیری کنید: بارگیری...رایگان
هشتگ ها :
این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید