react基本安装与测试示例

本文实例讲述了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>&lt;!&ndash;react核心库&ndash;&gt;-->
<!--<script src="../js/react-dom.production.min.js"></script>&lt;!&ndash;操作DOM的react扩展库&ndash;&gt;-->
<!--<script src="../js/babel.min.js"></script>&lt;!&ndash;解析JSX语法&ndash;&gt;-->
<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>&lt;!&ndash;react核心库&ndash;&gt;-->
<!--<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>&lt;!&ndash;操作DOM的react扩展库&ndash;&gt;-->
<!--<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>&lt;!&ndash;解析JSX语法&ndash;&gt;-->
<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程序设计有所帮助。

赞 (0)

相关推荐

  • react-native 完整实现登录功能的示例代码

    react-native 完整实现登录功能的示例代码

    react native实现登录功能,包括ui的封装.网络请求的封装.导航器的实现.点击事件. demo下载:react-native 完整实现登录功能 后台如果是springmvc实现的需要配置上如下代码 <!--加入multipart 的解析器,这个必须配置,一会在controller里抓取上传文件时要用.否则会报错.--> <bean id="multipartResolver" class="org.springframework.web.multi

  • 使用React实现轮播效果组件示例代码

    使用React实现轮播效果组件示例代码

    前言 我发现React和AngularJS思想完全不同,AngularJS是基于双向绑定,在Modal层中定制数据,然后双向改变.但是React是通过prop和state来改变view层的状态.下面是我写的一个轮播图组件,可以直接看一下.代码很简单.原理就是通过React在componentDidMount后改变setState,来动态改变css样式. 说明以下:看gif很卡,但是实际效果还是很好的. 以下是示例代码 LunBo.js require('styles/App.css'); req

  • create-react-app安装出错问题解决方法

    create-react-app慢的解决方法 在操作官方实例Create React App时,需要执行指令: create-react-app my-app 来创建一个新的React应用.由于某原因,在拉取各种资源时,往往会巨慢,一直卡在 fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch 解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已,而在寻求create-rea

  • 详解Ant Design of React的安装和使用方法

    详解Ant Design of React的安装和使用方法

    在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率.我们(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出一个中台设计语言 Ant Design.旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源. Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言.它模糊了产品经理.交互设计师.视觉设计师.前端工程师.开发工程师等

  • react-router实现跳转传值的方法示例

    前言 本文主要给大家介绍了关于react-router跳转传值的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: react-router跳转传值 1.引入包 import {hashHistory} from 'React-router' 2.跳转传值 handleClick = (value) => { hashHistory.push({ pathname: 'message/detailMessage', query: { title:value.title, time:va

  • 在React 组件中使用Echarts的示例代码

    在React 组件中使用Echarts的示例代码

    在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的 这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之前要先安装ECharts,在以往的开发模式中,我们很多使用就是把官网中的ECharts的核心js文件

  • 详解如何在项目中使用jest测试react native组件

    详解如何在项目中使用jest测试react native组件

    目前Javascript的测试工具很多,但是针对React的测试策略,Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址:https://facebook.github.io/jest/.我们可以看到Jest官网宣称的是:Painless JavaScript Testing.是Facebook用于测试服务和React应用程序的JavaScript单元测试框架. 所谓单元测试也就是对每个单元进行测试,通俗的将一般针对的是函数,类或单个组件,不涉及系统和集成.单元测试是

  • 详解在React项目中安装并使用Less（用法总结）

    less的安装配置 安装react-app-rewired,react-app-rewire-less,babel-plugin-import插件 执行命令: npm install react-app-rewired --save-dev npm install react-app-rewire-less --save-dev npm install babel-plugin-import --save-dev 配置package.json文件 找到scripts属性,修改start的值为re

  • React实现双向绑定示例代码

    前言 React.js现在已经很流行了,不会React.js都不好意思说自己会前端了. 那么下面就来看看关于React双向绑定的实现. 双向绑定的使用: 组件需要mixins:引用LinkedStateMixin.它提供一个linkState方法. 参数是state属性 双向绑定用valueLink={this.linkState(XX)} linkState方法返回一个对象,有一个value属性,指定state的属性. 还有一个requestChange回调方法,用来实现state的修改.参数

  • 如何对react hooks进行单元测试的方法

    写在前面 使用 react hook 来做公司的新项目有一段时间了,大大小小的坑踩了不少.由于是公司项目,因此必须要编写单元测试来确保业务逻辑的正确性以及重构时代码的可维护性与稳定性,之前的项目使用的是 react@15.x 的版本,使用 enzyme 配合 jest 来做单元测试毫无压力,但新项目使用的是 react@16.8 ,编写单元测试的时候,遇到不少阻碍,因此总结此篇文章算作心得分享出来. 配合 enzyme 来进行测试 首先,enzyme 对于 hook 的支持程度,可以参考这个 i

  • ReactJS实现表单的单选多选和反选的示例

    本文介绍了ReactJS实现表单的单选多选和反选的示例,分享给大家,希望对大家有所帮助. 需求是对列表实现单选,反选和多选,全部清除的操作 ...... this.state = { //初始化空数组,表示已经选择的 selectedStores:[], } ...... handleClick(e){ const newSelection = e.target.value;//拿到点击的具体一项 let newSelectionArray;//新建一个空数组 //判断点击项是否为选择状态,是的

随机推荐