为了账号安全,请及时绑定邮箱和手机立即绑定

请问一下有没有用dva框架做的react的demo?

/ 猿问

请问一下有没有用dva框架做的react的demo?

慕慕森 2019-08-20 18:14:45

有没有用dva框架做的react的demo


查看完整描述

3 回答

?
至尊宝的传说

1.准备:
npm安装以下组件

a.安装react/antd:
npm install react react-dom antd --save

b.安装webpack/less:
npm install webpack less --save-dev

webpack根据需要选择使用-g安装

c.安装babel-loader以及其他相关package:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

d.选择安装style-loader/css-loader
npm install style-loader css-loader --save-dev

2. 配置webpack.config.js
具体配置可以查看webpack提供的例子,主要依赖的是babel-loader
babel-loader上也有webpack.config.js应该如何编写的例子,传送门: babel-loader

3. 编写我们的文件(例如: demo-antd.jsx)
只使用了antd提供的Button组件。只使用了antd提供的Button组件。

查看完整回答
反对 回复 2019-08-24
?
POPMUISE

前端入门的话,这个东西最开始根本不需要学,主要还是学好HTML、CSS以及JavaScript
之后学一些JS的核心框架,至于react、vue之类的,都是基于JS的用于调整数据的框架,而dva是基于框架的二次框架,类似于基于jQuery的一系列其他框架。所以,建议你调整一下学习顺序。
而且,技术行业这个领域,流行技术千变万化,几年前还流行的extJS,早已经过气,而angular,现在热度也大减。框架这个东西,只是个工具,还是先把基础打好比较好。

查看完整回答
反对 回复 2019-08-24
?
弑天下

1.安装node,因为ts的编译器是js/ts写的;
安装node后同时获得npm命令,这是nodejs世界里的包管理器(也可以看作node的app商店);
2.安装vs 2015或者vs code,当然这不是必须的,但是这里强烈推荐写ts的工具,vs第一,vsc第二;
3.vs自带了TypeScript(vs2012+,vs2015update1自带了ts1.7),最新版本的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

命令创建了tsconfig.json配置文件, 打开该文件
增加"jsx": "react", 就是自动把tsx变成最终的js, 而不是jsx
把"outDir": "built", 这行去掉,这样编译的文件就会在当前目录输出
"target": "es5", 这里es3改成es5,
"watch": true 是否监听文件修改 如果你用的是vs,这行不重要

6.下载reactjs文件,如果没有安装bower命令,可以手动去官网下载react类库

bower install --save react

7.以上环境配置好了, 开始写代码:
创建一个demo.tsx文件(注意这里是tsx, 不是ts也不是jsx)
创建一个demo.html, 添加文件的引用

<!doctype html>
<html>
<head>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="demo.js"></script>
</head>
<body>

</body>
</html>

8. demo.tsx 写代码

class MyClass extends React.Component<any, any> {
render() {
return <h1>hello {this.props.name}</h1>;
}
}

document.addEventListener('DOMContentLoaded', function () {
ReactDOM.render(<MyClass name="Tom" />, document.body);
});

9. 如果保存了demo.tsx后, 没有在目录下发现自动编译了demo.js, 那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行

tsc

tsc命令会自动根据tsconfig.json里面配置的情况, 自动帮你把代码编译成js, 这是编译后的js文件

10. 打开demo.html可以看到效果了;
11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;
12. 下班, 有空再写;
------时间分割------
13、继续写,对1-12进行润色,转入传教模式;
以上的代码,工厂方法在创建子类的同时,做了一些初始化的动作,这与单纯的原型继承不同,所以在使用class方式进行子类继承,这样的写法是无效的;

class MyView extends React.Component {
render() {
return <h1>hello {this.state.name}</h1>; //会抛异常,因为state是null
}
//不起作用的
getInitialState:(){
return {name:'',age:20};
}
}

需要改成如下方式,下面是官网给出的方案(这里TypeScript和ES6情况是一样的)

class MyView extends React.Component {
constructor(props, context) {
super(props, context);

this.state = {
name: '',
};
}
render() {
return <h1>hello {this.state.name}</h1>;
}
}

16、当组件化遇到强类型:
从前写JS组件,一般复用性比较差,基本写完就仍,原因如下:
1)暴露了太多的Dom结构以及别的实现细节;
2)命名挫,缺乏可记忆性,本身编程中变量和方法的命名对于码农来说就是天坑;
3)JS天生缺乏私有和公共成员的约束,不加注释根本不知道怎么使用该类库/组件;
React解决了把dom标签暴露出去的问题,TS则解决了语言层面的问题,并提供了强大的重构能力,你根本不需要记住组件的API,因为工具会列出来;



查看完整回答
反对 回复 2019-08-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信