-
-
Save xgqfrms-GitHub/ef0260bce093baf5d4bfd31293832c7a to your computer and use it in GitHub Desktop.
Web Design Trends for 2017
阿里云大学 学习调查
https://page.aliyun.com/form/edu_class/page.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="data-spm" content="5176">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>阿里云大学 学习调查</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--[if lt IE 9]>
<script src="//g.alicdn.com/??aliyun/dblx/0.0.4/es5-shim.min.js,aliyun/dblx/0.0.4/es5-sham.min.js"></script>
<![endif]-->
<script type="text/javascript" src="//g.alicdn.com/??aliyun/dblx/0.0.3/react.min.js,aliyun/dblx/0.0.3/react-dom.min.js,aliyun/dblx/0.0.3/redux.min.js,aliyun/dblx/0.0.3/react-redux.min.js"></script>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
<script type="text/javascript" src="//www.aliyun.com/rgn/aliyun_assets?renderer=js"></script>
<link href="//g.alicdn.com/aliyun/page-aliyun-form/0.0.3/css/commonForm.css" rel="stylesheet">
</head>
<body><script type="text/javascript">
(function (d) {
var t=d.createElement("script");t.type="text/javascript";t.async=true;t.id="tb-beacon-aplus";
t.setAttribute("exparams","category=&userid=&aplus&yunid=%22xgq%2a%2a%2a%2a%22&yunpk=1058494494049096");
t.src=("https:"==d.location.protocol?"https://s":"http://a")+".tbcdn.cn/s/aplus_v2.js";
d.getElementsByTagName("head")[0].appendChild(t);
})(document);
</script>
<script type="text/javascript" src="//www.aliyun.com/rgn/aliyun_topbar/index.js"></script>
<div style="display: none">
<div id="_umfp" style="display:inline;width:1px;height:1px;overflow:hidden"><img src="//ynuf.alipay.com/service/clear.png?xt=Y650acb8c515d210b19a8a006bcefbe16&xa=act-aliyun-com"></div>
</div>
<div id="J_CommonForm"></div>
<script>
window.title = '阿里云大学 学习调查';
window.formId = '141';
window.submitType = 'ajax'; // 'form'
window.formCode = "edu_class";
window.csrfToken = 'fCMKkaecq';
window.bannerPrompt = "欢迎您参与阿里云大学在线学习调研!请您抽出2分钟时间填写调查。我们会在提交用户中随机抽取10人,奖励阿里云大学即将上线的Clouder认证免费体验资格!";
window.riskControlInfo = {
// token: 'QBLWOATRVP1OQIVNNMRVDLVDC8P9FUJG',
token: 'Y650acb8c515d210b19a8a006bcefbe16',
appName: 'act-aliyun-com',
appkey: 'SDXO'
};
window.formFields = [{"id":1108,"title":"是否会在线学习技术","order":"horizontal","items":[{"text":"经常","value":"经常"},{"text":"很少","value":"很少"},{"text":"从不","value":"从不"}],"placeholder":"","fieldCode":"prefer","type":"radio","validate":{"required":true}},{"id":1105,"title":"您感兴趣的技术课程方向","order":"vertical","items":[{"text":"云计算","value":"云计算"},{"text":"大数据","value":"大数据"},{"text":"Java","value":"Java"},{"text":"前端技术","value":"前端技术"},{"text":"Docker","value":"Docker"},{"text":"机器学习","value":"机器学习"},{"text":"深度学习","value":"深度学习"},{"text":"数据库技术","value":"数据库技术"},{"text":"运维技术","value":"运维技术"},{"text":"云安全技术","value":"云安全技术"},{"text":"阿里企业文化","value":"阿里企业文化"}],"placeholder":"","fieldCode":"tech","type":"checkbox","validate":{"required":true}},{"id":1115,"title":"在线获取知识的主要方式","order":"vertical","items":[{"text":"文档资料学习","value":"文档资料学习"},{"text":"视频课程学习","value":"视频课程学习"},{"text":"报名在线培训,跟班学习","value":"报名在线培训,跟班学习"},{"text":"没有特定方式,通过搜索获取知识","value":"没有特定方式,通过搜索获取知识"}],"placeholder":"","fieldCode":"method","type":"checkbox","validate":{"required":true}},{"id":1109,"title":"是否希望接收阿里云大学的优质课程推荐","order":"horizontal","items":[{"text":"是","value":"是"},{"text":"否","value":"否"}],"placeholder":"","fieldCode":"dingyue","type":"radio","validate":{"required":true}},{"id":1107,"title":"当前正在使用的阿里云产品","order":"vertical","items":[{"text":"域名","value":"域名"},{"text":"云服务器","value":"云服务器"},{"text":"云数据库","value":"云数据库"},{"text":"对象存储OSS","value":"对象存储OSS"},{"text":"安全(云盾)产品","value":"安全(云盾)产品"},{"text":"大数据应用产品(如推荐引擎)","value":"大数据应用产品(如推荐引擎)"},{"text":"大数据分析及展现产品(如QuickBI)","value":"大数据分析及展现产品(如QuickBI)"},{"text":"大数据基础服务(如大数据开发套件)","value":"大数据基础服务(如大数据开发套件)"},{"text":"其他","value":"其他"},{"text":"还在观望,暂未开始使用","value":"还在观望,暂未开始使用"}],"placeholder":"请选择您当前正在使用的阿里云产品,如还未开始使用,请选择最后一项。","fieldCode":"product","type":"checkbox","validate":{"required":true}},{"id":1112,"title":"mobile","fieldCode":"mobile","show":false,"type":"inputHidden","validate":{"required":true,"harmonious":false}}];
window.defaultValues = [{"value":"17717861137","fieldCode":"mobile"}];
</script>
<script type="text/javascript" src="//www.aliyun.com/rgn/aliyun_footer?renderer=js"></script>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/security/umscript/2.1.4/um.js"></script>
<script type="text/javascript" charset="utf-8" src="//uaction.alicdn.com/js/uab.js"></script>
<script src="//g.alicdn.com/aliyun/page-aliyun-form/0.0.3/scripts/common.js"></script>
<script src="//g.alicdn.com/aliyun/page-aliyun-form/0.0.3/scripts/commonForm.js"></script>
</body>
</html>
云课堂>React学习自测
1.React中的Form与HTML中的FORM的不同点包括
A.value/checked 属性设置后,用户输入无效
B.textarea的值要设置在value属性
C.select的value属性可以是数组
D.input/textarea的onChange用户每次输入都会触发(即使不失去焦点)
E.textarea的值要设置在value属性
2.关于React中的JSX,下面说法正确的是
A.类似XML的语法,用来描述组件树
B.必须是驼峰命名
C.属性名不能和JavaScript关键字冲突
D.JSX允许直接在模板插入JavaScript变量
3.关于受控组件和非受控组件,下面说法错误的是
A.一个受控的组件都有一个value属性,渲染一个受控的会展示出value属性的值
B.一个受控的组件不会维护它自己内部的状态,组件的渲染单纯的依赖于props
C.一个非受控的组件不会维护自己的状态
D.一个没有value属性的就是一个非受控组件。通过渲染的元素,任意的用户输入都会被立即反映出来
4.React中Element(元素)与Component(组件)的区别是
A.元素是对在屏幕上显示的DOM节点或其他组件简单的对象描述
B.元素是React中最小基本单位
C.组件是由元素构成的
D.元素数据结构是普通对象,而组件数据结构是类或纯函数
5.关于React,说法错误的是
A.React是一个用于构建用户界面的JavaScript库
B.React主要用于构建UI
C.React是一款MVC框架
D.React起源于Facebook的内部项目
- A.value/checked 属性设置后,用户输入无效
- B.textarea的值要设置在value属性
- C.select的value属性可以是数组
- D.input/textarea的onChange用户每次输入都会触发(即使不失去焦点)
- E.textarea的值要设置在value属性
- A .类似XML的语法,用来描述组件树;
- B .必须是驼峰命名;
- C .属性名不能和JavaScript关键字冲突;
- D .JSX允许直接在模板插入JavaScript变量;
- A .一个受控的组件都有一个value属性,渲染一个受控的会展示出value属性的值;
- B .一个受控的组件不会维护它自己内部的状态,组件的渲染单纯的依赖于props;
- C .一个非受控的组件不会维护自己的状态;
- D .一个没有value属性的就是一个非受控组件。通过渲染的元素,任意的用户输入都会被立即反映出来;
- A .元素是对在屏幕上显示的DOM节点或其他组件简单的对象描述;
- B .元素是React中最小基本单位;
- C .组件是由元素构成的;
- D .元素数据结构是普通对象,而组件数据结构是类或纯函数;
- A .React是一个用于构建用户界面的JavaScript库;
- B .React主要用于构建UI;
- C .React是一款MVC框架;
- D .React起源于Facebook的内部项目;
react-intl.js
https://github.com/yiminghe/learning-react/blob/master/examples/react-intl.js
https://github.com/yiminghe/learning-react/blob/master/examples/react-intl.html
import 'normalize.css';
import qs from 'qs';
import { addLocaleData, IntlProvider, FormattedMessage } from 'react-intl';
import React from 'react';
import ReactDOM from 'react-dom';
import scriptjs from 'scriptjs';
const locale = qs.parse(location.search && location.search.slice(1)).locale || 'en-US';
const localePrefix = locale.slice(0, locale.indexOf('-'));
const scripts = [];
if (!window.Intl) {
// should output by server by <script>
scripts.push(`https://as.alipayobjects.com/g/component/intl/1.0.1/Intl.js`);
scripts.push(`https://as.alipayobjects.com/g/component/intl/1.0.1/locale-data/jsonp/en-US.js`);
// the following should be output by server template conditionally by <script>
if (locale !== 'en-US') {
scripts.push(`https://as.alipayobjects.com/g/component/intl/1.0.1/locale-data/jsonp/${locale}.js`);
}
// end
}
// should output by server by <script>
scripts.push(`https://as.alipayobjects.com/g/component/react-intl/2.0.0/locale-data/en.js`);
// the following should be output by server template conditionally by <script>
if (localePrefix !== 'en') {
scripts.push(`https://as.alipayobjects.com/g/component/react-intl/2.0.0/locale-data/${localePrefix}.js`);
}
// end
const ready = () => {
addLocaleData(window.ReactIntlLocaleData[localePrefix]);
window.app = {
// output by server conditional
'zh-Hans-CN': {
'app.zh': '选择中文',
'app.en': '选择英文',
},
'en-US': {
'app.zh': 'choose chinese',
'app.en': 'choose english',
},
};
const defaultApp = window.app['en-US'];
const Test = React.createClass({
render() {
return (<div>
<p>
npm install react-intl@2.0.0
</p>
<p>
<a href="?locale=en-US"><FormattedMessage
id="app.en"
defaultMessage={defaultApp['app.en']}
/></a>
</p>
<p>
<a href="?locale=zh-Hans-CN"><FormattedMessage
id="app.zh"
defaultMessage={defaultApp['app.zh']}
/></a>
</p>
</div>);
},
});
ReactDOM.render(
<IntlProvider
locale={locale}
messages={window.app[locale] || defaultApp}
>
<Test />
</IntlProvider>,
document.getElementById('__react-content'));
};
if (scripts.length) {
scriptjs(scripts, ready);
} else {
ready();
}
React系列教程
https://yq.aliyun.com/edu/lesson/play/753?spm=5176.8657658.744400.2.6i6DDi
https://promotion.aliyun.com/ntms/aliyunedu/react.html#floor1
http://yiminghe.me/learning-react/tutorial/zh-cn/intro.html#/