react基本安装与测试示例


Posted in Javascript onApril 27, 2020

本文实例讲述了react基本安装与测试。分享给大家供大家参考,具体如下:

语法特点:

声明式编码:只在意结果不在意过程

组件化编码:html,css,js的集合

单向数据流:vue也是单向数据流,有一个双向绑定功能。

支持服务器端编写

高效:先生成一个虚拟DOM,然后在DOM中操作,再一次性返回到真实界面

首先安装好node.js和npm

安装 Webpack:npm install -g webpack

安装对应的 loader: npm install babel-loader --save-de

安装react

$ npm install -g create-react-app
$ create-react-app
$ create-react-app react-dom
$ cd react-dom
$ npm start

安装babel

$ npm install babel -g

babel-min.js包安装

引入node-modules/babel-standalone/babel-min.js

npm install babel-standalone --save

测试:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hello</title>
</head>
<body>
<div id="app"></div>
<!--<script src="../js/react.production.min.js"></script><!–react核心库–>-->
<!--<script src="../js/react-dom.production.min.js"></script><!–操作DOM的react扩展库–>-->
<!--<script src="../js/babel.min.js"></script><!–解析JSX语法–>-->
<script src="../node_modules/react/umd/react.production.min.js"></script><!--react核心库-->
<script src="../node_modules/react-dom/umd/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../node_modules/babel-standalone/babel.min.js"></script><!--解析JSX语法-->
<!--<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><!–react核心库–>-->
<!--<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script><!–操作DOM的react扩展库–>-->
<!--<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script><!–解析JSX语法–>-->
<script type="text/babel">
  const res = <h1>hello world!</h1> //虚拟dom jsx
  ReactDOM.render(res,document.getElementById('app'))
 
  //jsx语法规则
  const str = 'hello world'
  const res = <h1>{str}</h1> //虚拟dom[jsx] jsx里要解析js代码,js代码必须写在{}里,遇到<>开头的代码以标签解析,html同名的转换html元素。
  ReactDOM.render(res,document.getElementById('app'))
 
  //列表foreach
  let lis = [];
  let names = ['张一','李二','王三','赵四'];
 
  names.forEach((name,key)=>{
    lis.push(<li key={key}>{name}</li>)
  });
 
  const vul = <ul>
     {lis}
  </ul>;
 
  //列表map
  let names = ['张一','李二','王三','赵四'];
  const vul = <ul>
    {
    names.map((name,key)=> {
      return <li key={key}>{name}</li>
    })
  }
  </ul>
  ReactDOM.render(vul,document.getElementById('app'))
 
  //原生js创建jsx
  var msg = 'hello';
  var res = React.createElement('h1',{id:'myDiv'},msg );
  ReactDOM.render(res,document.getElementById('app'))
</script>
</body>
</html>

希望本文所述对大家react程序设计有所帮助。

Javascript 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
JS中一些高效的魔法运算符总结
May 06 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 #Javascript
JS浏览器BOM常见操作实例详解
Apr 27 #Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 #Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 #Javascript
JS严格模式原理与用法实例分析
Apr 27 #Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 #Javascript
详解elementUI中input框无法输入的问题
Apr 27 #Javascript
You might like
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
Vue.use源码分析
2017/04/22 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
python实现126邮箱发送邮件
2020/05/20 Python
python能做哪方面的工作
2020/06/15 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
某科技软件测试面试题
2013/05/19 面试题
技校生自我鉴定
2013/12/08 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
重阳节活动总结
2014/08/27 职场文书
企业贷款委托书格式
2014/09/12 职场文书
卖房协议书样本
2014/10/30 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
大学生党员个人总结
2015/02/13 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
班主任工作总结范文
2015/08/13 职场文书
企业文化学习心得体会
2016/01/21 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python