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 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
获取body标签的两种方法
Oct 13 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
原生js实现弹出层效果
Jan 20 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
使用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
深入了解php4(2)--重访过去
2006/10/09 PHP
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现清屏的方法
2015/04/30 Python
利用python实现数据分析
2017/01/11 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
python mock测试的示例
2020/10/19 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
函授本科自我鉴定
2013/11/03 职场文书
2015年招聘工作总结
2014/12/12 职场文书
中标通知书
2015/04/17 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
2019消防宣传标语!
2019/07/10 职场文书