.NET applications however rely on the ciphers provided by the OS, and the only way to get new ciphers into the OS is through a patch from Microsoft. Unsupported versions of Windows typically do not receive these patches, so over time you can expect an increasing number of websites to stop working with .NET applications.
So when Microsoft acquired Xamarin in 2016 and started integrating the Xamarin Visual Studio plugins more with the standard VS features, I knew I had to try and switch over to take advantage of the powerful IDE and language. Some of the immediate benefits I gained from the switch are:
What Is ReactJS?
React (a.k.a. ReactJS or React.js) is a JavaScript library for creating user interfaces, open sourced to the world by Facebook and Instagram team in 2013. One might think of it as the “View” in the “Model-View-Controller” pattern
تا اینجای کار ساخت کامپوننت‌ها را با React.createClass که تفاوتی با توسعه (ارث بری) از کلاس React.Component ندارد، انجام داده‌ایم. اما ساخت کامپوننت‌ها به صورت یک تابع هم مزیت‌هایی را دارد. اول از همه باید بدانیم که ساخت کامپوننت توسط تابع، بدون وضعیت خواهد بود که به آن Stateless میگویند. به دلیل نداشتن وضعیت، کامپوننت‌های تابعی را کمی بهتر میشود برای استفاده مجدد به کار برد. در کامپوننت‌های غیر تابعی که Stateful هستند به دلیل احتمال وابستگی وضعیت کامپوننت به خارج از کلاس، مانند مثال قسمت چهارم که کامپوننت در انتظار کلیک یک دکمه خاص توسط کاربر بود، مدیریت استفاده مجدد ازکامپوننت چالش برانگیز خواهد شد.
برای مدیریت بهتر کامپوننت‌ها جهت استفاده مجدد از آنها بهتر است ورودی‌های کامپوننت را اعتبارسنجی کنیم. این ورودی‌ها چه برای استفاده داخلی کامپوننت، یا جهت مشخص کردن وضعیت آن، بر رفتار کامپوننت تاثیر زیادی دارند. React مجموعه‌ای از اعتبار سنجی‌ها را دارد که میشود به کامپوننت اضافه کرد. باید توجه داشته باشیم که پیام‌های خطای این اعتبارسنجی‌ها فقط در حالت Development Mode قابل استفاده هستند. به زبان ساده اگر از react.min.js استفاده کنید، پیام‌های خطا را نخواهید دید. باید فایل‌ها را به نوع react.js تبدیل کنید. اعتبارسنجی React در زمان توسعه و برای توسعه دهندگان استفاده میشود.
مثال نوشیدنی‌ها در قسمت چهارم میتوانست نام نوشیدنی و قیمت آن را نمایش دهد و همچنین میتوانستیم به لیست نوشیدنی‌ها، موردی را اضافه کنیم. اگر ورودی قیمت، اعتبارسنجی نشود، میتوان رشته‌ای را بجای عدد به عنوان قیمت به کامپوننت ارسال کرد. نحوه اعتبارسنجی قیمت نوشیدنی‌ها به صورت زیر است.
const MenuItem = props => (
<li className="list-group-item">
<span className="badge">{props.price}</span>
<p>{props.item}</p>
</li>
)
MenuItem.propTypes = {
price: React.PropTypes.number
}; شیء propTypes را به کامپوننت اضافه کرده‌ایم و در تنظیمات آن میتوانیم برای هر پارامتر ورودی یکی از اعضای PropTypes از React را که مناسب حال پارامتر است، انتخاب کنیم. در مثال بالا مشخص کرده‌ایم که ورودی price باید عدد باشد و اگر مثلا رشته‌ای را بجای عدد ارسال کنیم، پیام خطای زیر را در Console خواهیم داشت.
Warning: Failed prop type: Invalid prop `price` of type `string` supplied to `MenuItem`, expected `number`.
in MenuItem (created by Menu)
in Menu یا میتوانستیم از React.PropTypes.number.isRequired استفاده کنیم تا درج مقداری برای این ورودی الزامی باشد. اگر اعتبارسنجی‌های React کافی نبودند میتوانیم اعتبارسنجی‌های سفارشی خودمان را ایجاد کنیم. در مثال زیر میخواهیم ورودی price بیشتر از 15000 نباشد.
MenuItem.propTypes = {
price: (props, price)=>{
if(props[price] > 15000){
return new Error("Too expensive!");
}
}
}; let MenuItem = React.createClass({
propTypes: {
price: React.PropTypes.number
}
});
class MenuItem extends React.Component{
static propTypes = {
price: React.PropTypes.number
};
} نوعهای دیگر برای اعتبارسنجی شامل موارد زیر هستند و البته مرجع تمام اعتبارسنجی‌های React را میتوانید در اینجا بررسی کنید.
یکی از امکانات مفید دیگر برای مدیریت مقدارهای ورودی، مشخص کردن مقدار پیش‌فرضی برای یک پارامتر است. برای مثال اگر برای قیمت یک نوشیدنی مقداری وارد نشد، یک حداقل قیمت برای آن در نظر بگیریم، هر چند که ایده و روشی اشتباه است!
MenuItem.defaultProps = {
price: 1000
}; همانطور که می‌بینید روش کار مشابه با اعتبارسنجی است و برای مشخص کردن مقدار پیش‌فرض برای React.creatClass از متد getDefaultProps که عضوی از React است، استفاده میکنیم.
let MenuItem = React.createClass({
getDefaultProps() {
return { price: 200 }
},
render() {
return (
<li className="list-group-item">
<span className="badge">{this.props.price}</span>
<p>{this.props.item}</p>
</li>
);
}
}); React development is led by a dedicated team working full time at Meta. It also receives contributions from people all over the world.
Our new React-based web app is built from more than a hundred components, many of which are themselves created using simpler building block components.
Interesting not only because it comes from Facebook, but because there’s a pretty good 23 minute talk about it and it follows the latest React standards.
> create-react-app sample-04 > cd sample-04 > npm start
> npm install --save bootstrap
import "bootstrap/dist/css/bootstrap.css";
import React, { Component } from 'react'; import React, { Component } from "react";
class Counter extends Component {
render() {
return <h1>Hello world!</h1>;
}
}
export default Counter; import Counter from "./components/counter";
ReactDOM.render(<Counter />, document.getElementById("root")); render() {
return <h1>Hello world!</h1><button>Increment</button>;
} render() {
return (
<div>
<h1>Hello world!</h1>
<button>Increment</button>
</div>
); return ; <div></div>
return ( <div></div> );
return (
<React.Fragment>
<h1>Hello world!</h1>
<button>Increment</button>
</React.Fragment>
); import React, { Component } from "react";
class Counter extends Component {
state = {
count: 0
};
render() {
return (
<React.Fragment>
<span>{this.state.count}</span>
<button>Increment</button>
</React.Fragment>
);
}
}
export default Counter; import React, { Component } from "react";
class Counter extends Component {
state = {
count: 0
};
render() {
return (
<React.Fragment>
<span>{this.formatCount()}</span>
<button>Increment</button>
</React.Fragment>
);
}
formatCount() {
const { count } = this.state; // Object Destructuring
return count === 0 ? "Zero" : count;
}
}
export default Counter; formatCount() {
const { count } = this.state; // Object Destructuring
return count === 0 ? <h1>Zero</h1> : count;
} state = {
count: 0,
imageUrl: "/logo192.png"
}; render() {
return (
<React.Fragment>
<img src={this.state.imageUrl} alt="" />
<span>{this.formatCount()}</span>
<button>Increment</button>
</React.Fragment>
);
} return (
<React.Fragment>
<img src={this.state.imageUrl} alt="" />
<span className="badge badge-primary m-2">{this.formatCount()}</span>
<button className="btn btn-secondary btn-sm">Increment</button>
</React.Fragment>
); 
styles = {
fontSize: 50,
fontWeight: "bold"
}; return (
<React.Fragment>
<img src={this.state.imageUrl} alt="" />
<span style={this.styles} className="badge badge-primary m-2">
{this.formatCount()}
</span>
<button className="btn btn-secondary btn-sm">Increment</button>
</React.Fragment>
); 
<button style={{ fontSize: 30 }} className="btn btn-secondary btn-sm"> render() {
let classes = "badge m-2 badge-";
classes += this.state.count === 0 ? "warning" : "primary";
return (
<React.Fragment>
<img src={this.state.imageUrl} alt="" />
<span style={this.styles} className={classes}>
{this.formatCount()}
</span>
<button style={{ fontSize: 30 }} className="btn btn-secondary btn-sm">
Increment
</button>
</React.Fragment>
); 
render() {
let classes = this.getBadgeClasses();
// ...
}
getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.state.count === 0 ? "warning" : "primary";
return classes;
} <span style={this.styles} className={this.getBadgeClasses()}> In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board.
