安装node后同时获得npm命令，这是nodejs世界里的包管理器（也可以看作node的app商店）；
2安装vs 2015或者vs code，当然这不是必须的，但是这里强烈推荐写ts的工具，vs第一，vsc第二；
3vs自带了TypeScript（vs2012+，vs2015update1自带了ts17）,最新版本的typescript for vs去官网下载即可, 或者如果不依赖vs（比如mac环境）, 可以用命令行装ts编译器
npm i -g typescript@next
4 安装了ts后, 就会有2个命令可用：tsc和tsd, tsc用来编译TypeScript代码, tsd用来下载第三方js类库的ts定义文件(或者叫头文件)，熟练使用tsd，工作效率提升，因为减少了80%查文档的时间，所以写ts可以说是jser打通了任督二脉，上手任何新的开发环境都很快；
5 命令行下载react的ts头文件,
tsd install react-global --save
注意上面之所以写 react-global 而不是react， 因为我们接下来使用比较原始的写法，直接把React当作全局对象使用， 而不作为es6模块（必须用import引入），不需要Babel编译也不需要webpack打包；
上面执行的tsd命令下载了ReactJS类库的头文件, 下面用tsc命令创建一个ts项目配置文件
tsc --init
命令创建了tsconfigjson配置文件, 打开该文件
增加"jsx": "react", 就是自动把tsx变成最终的js, 而不是jsx
把"outDir": "built", 这行去掉,这样编译的文件就会在当前目录输出
"target": "es5", 这里es3改成es5,
"watch": true 是否监听文件修改 如果你用的是vs,这行不重要
6下载reactjs文件，如果没有安装bower命令，可以手动去官网下载react类库
bower install --save react
7以上环境配置好了, 开始写代码:
创建一个demotsx文件(注意这里是tsx, 不是ts也不是jsx)
创建一个demohtml, 添加文件的引用
<!doctype html>
<html>
<head>
<script src="bower_components/react/reactminjs"></script>
<script src="bower_components/react/react-domminjs"></script>
<script src="demojs"></script>
</head>
<body>
</body>
</html>
8 demotsx 写代码
class MyClass extends ReactComponent<any, any> {
render() {
return <h1>hello {thispropsname}</h1>;
}
}
documentaddEventListener('DOMContentLoaded', function () {
ReactDOMrender(<MyClass name="Tom" />, documentbody);
});
9 如果保存了demotsx后, 没有在目录下发现自动编译了demojs, 那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行
tsc
tsc命令会自动根据tsconfigjson里面配置的情况, 自动帮你把代码编译成js, 这是编译后的js文件
10 打开demohtml可以看到效果了;
11 至于题主说怎么学习, 其实跟JS完全没两样, 上面demotsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;11 至于题主说怎么学习, 其实跟JS完全没两样, 上面demotsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;
12 下班, 有空再写;
－－－－－－时间分割－－－－－－
13、继续写，对1-12进行润色，转入传教模式；
以上的代码，工厂方法在创建子类的同时，做了一些初始化的动作，这与单纯的原型继承不同，所以在使用class方式进行子类继承，这样的写法是无效的；
class MyView extends ReactComponent {
render() {
return <h1>hello {thisstatename}</h1>; //会抛异常,因为state是null
}
//不起作用的
getInitialState:(){
return {name:'',age:20};
}
}
需要改成如下方式，下面是官网给出的方案（这里TypeScript和ES6情况是一样的）
class MyView extends ReactComponent {
constructor(props, context) {
super(props, context);
thisstate = {
name: '',
};
}
render() {
return <h1>hello {thisstatename}</h1>;
}
}
16、当组件化遇到强类型：
从前写JS组件，一般复用性比较差，基本写完就仍，原因如下：
1）暴露了太多的Dom结构以及别的实现细节；
2）命名挫，缺乏可记忆性，本身编程中变量和方法的命名对于码农来说就是天坑；
3）JS天生缺乏私有和公共成员的约束，不加注释根本不知道怎么使用该类库/组件；
React解决了把dom标签暴露出去的问题，TS则解决了语言层面的问题，并提供了强大的重构能力，你根本不需要记住组件的API，因为工具会列出来；
具体的方法和详细的 *** 作步骤如下：
1、首先，在打开的vs2015中选择“文件->新建->文件”，如下图所示。
2、其次，在打开的“新建文件”窗口中选择“HTML页”，如下图所示。
3、接着，在新的HTML页面中，我们创建一个要使用的file标签<input type="file" />，如下图所示。
4、然后，修改input标签的样式。为了更好地进行说明，这里标签上直接写style，<input type="file" style="background-image:url('z:\\pic1jpg');"/>，如下图所示。
5、随后，在这里通过写一个a标签来更改 input='file'标签的背景图像，如下图所示。
6、最后，全部完成并预览效果，如下图所示。
编辑框是哪个？在MFC编程中，其他控件是要看控件示意图，而编辑框控件是要看文字的(Edit Control) ，因为找控件示意图，你会发现没有哪个控件像编辑框控件，当你看文字的时候，你就发现，这个原来是编辑框控件。
VS2013 编辑框 属性
Multiline：多行，表示内容可以多行显示，一般记录性的编辑框需要多行；
Password：密码，表示文本以密码形式呈现，一般用来输出密码；
Read only：只读，表示文本内容只能读不能写；
Number：数字，表示只能输入数字；
Lowercase：小写，所有字母全部自动转换为小写显示；
Uppercase：大写，所有字母全部自动转换为大写显示；
Horizontal scroll：水平滚动条，需要先选中Multiline属性；
Vertical scroll：垂直滚动条，需要先选中Multiline属性；
Alt+Shift+X；添加变量
找到安装程序，重新执行安装程序，在安装的过程中，可以再次选择需要安装的组件，也可以卸载多余的组件（这是我个人的经历）也可以试一下在添加或删除程序里点卸载程序试一下，可以选择添加或删除程序的方式进行组件的添加或删除方法/步骤
首先，打开VS2015页面
如果是英文版也没关系， *** 作是一样的
点击左上角的文件，选择新建——网站
英文版：选择 File——Building
在模版处，选择Visual C# ,再选择ASPnet空网站，
最下面是放文件路径的地方
打开后，点击解决方案资源管理器——右击你的项目——添加——添加新建项目
选择 HTML页面，下面是存放HTML页面的路径
PS:路径最好存放在你所能找到的位置，不然寻找的时候很麻烦
一个HTML页面就创建好了
PS：VS2015 HTML页面是支持HTML5 CSS3的。
注意：如果解决方案资源管理器没打开，点击最上面那排的 视图——解决方案资源管理器
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）