react-helloword
1、在webpack项目中使用react
创建webpack项目步骤见:
webpack-dev-server 和 html-webpack-plugin的使用
1)运行cnpm i react react-dom -S安装包
react: 创建组件和虚拟DOM,生命周期
react-dom: 进行DOM操作的,最主要的应用场景就是ReactDOM.render()
2)在index.html页面创建容器:
<div id="app"></div>
3)导入包,创建虚拟DOM,将虚拟DOM渲染到页面
index.js
import React from 'react'
import ReactDOM from 'react-dom' // 创建虚拟DOM元素
// 参数1: 元素名称; 参数2: 属性; 参数3-n: 子节点
// const myh1 = React.createElement('h1', null, 'h1标签的文本')
const myh1 = React.createElement('h1', {id: 'myh1'}, 'h1标签的文本')
// 将虚拟DOM渲染到页面
// 参数1: 虚拟DOM元素; 参数2: 容器
ReactDOM.render(myh1, document.getElementById('app'))
2、使用React.createElement实现虚拟DOM嵌套
index.js
import React from 'react'
import ReactDOM from 'react-dom' // 创建虚拟DOM元素
// 参数1: 元素名称; 参数2: 属性; 参数3-n: 子节点
const myh1 = React.createElement('h1', {id: 'myh1'}, 'h1标签的文本')
const mydiv = React.createElement('div', null, 'div文本', myh1) // div中包含了h1
// 将虚拟DOM渲染到页面
// 参数1: 虚拟DOM元素; 参数2: 容器
ReactDOM.render(mydiv, document.getElementById('app'))
3、导入react相关js文件来使用react
4、安装react开发工具
React Developer Tools_0.15.3_0.crx
react-helloword的更多相关文章
- React.js 官网入门教程 分离文件 操作无法正常显示HelloWord
对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...
- React学习笔记-7-销毁阶段
销毁阶段可以使用的函数:componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器.因为这些函数都是开发者手动加上去的,react不知道,必须进行手动清理. 实例第一 ...
- React学习笔记-6-运行中阶段介绍
运行中可以使用的函数componentWillReceiveProps:父组件修改属性触发,可以修改新属性,修改状态.字面意思,组件将要接收属性,这个函数触发的时机就是组件的属性将要发生改变的时候,但 ...
- React Native01-开始 Windows环境安装配置篇
转载本文章的童鞋请注明原链接. 查阅文档之类的资料,建议到 http://reactnative.cn/ 本人使用环境Win10. 在阅读本文之前,请了解我们安装React Native之前,要安装P ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- 从一个例子中体会React的基本面
[起初的准备工作] npm init npm install --save react react-dom npm install --save-dev html-webpack-plugin web ...
- 160921、React入门教程第一课--从零开始构建项目
工欲善其事必先利其器,现在的node环境下,有太多好用的工具能够帮助我们更好的开发和维护管理项目. 我本人不建议什么功能都自己写,我比较喜欢代码复用.只要能找到npm包来实现的功能,坚决不自己敲代码. ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React-Native(五):React Native之Text学习
本章节主要学习Text的布局,仿照网易新网: 代码: /** * Sample React Native App * https://github.com/facebook/react-native ...
- React-Native(四):React Native之View学习
React Native实现以下布局效果:携html5(http://m.ctrip.com/html5/) 基于HelloWord修改项目代码: /** * Sample React Native ...
随机推荐
- 小a的强迫症 题解
题面: 小a是一名强迫症患者,现在他要给一群带颜色的珠子排成一列,现在有N种颜色,其中第i种颜色的柱子有num(i)个.要求排列中第i种颜色珠子的最后一个珠子,一定要排在第i+1种颜色的最后一个珠子之 ...
- 归并排序+归并排序求逆序对(例题P1908)
归并排序(merge sort) 顾名思义,这是一种排序算法,时间复杂度为O(nlogn),时间复杂度上和快排一样 归并排序是分治思想的应用,我们先将n个数不断地二分,最后得到n个长度为1的区间,显然 ...
- SOS--DP(基础版本)未压缩空间
#define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include <cstdio>//sprintf islower isupp ...
- Boot-crm管理系统开发教程(一)
ps:上周就把这个项目写完了,一直忘记记录,现在补上. Boot-crm是书上第十八章的内容,书上提供了前端的代码,所以只需要写后端的代码就可以了,①所以我们先把前端的代码移植到项目中. ②然后在li ...
- Fullscreen API:全屏操作
function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...
- app嵌套的vue项目更新后,页面没有更新
记录下解决过程 1.index.html增加下面meta标签 <meta http-equiv="pragram" content="no-cache"& ...
- js相关的时间获取方法
1.获取时间 var time=new Date();//返回的是GMT,格林尼治标准时间. console.log(time)://Thu Jul 27 2017 16:55:21 GMT+0800 ...
- vue实现吸顶
data(){ return{ list:[], swiperOption:"", xiding : "", // 轮播高度 SwiperHeight:'' } ...
- maven 父子工程打包 并且上传linux服务器
先对父工程进行 mvn clean 再对子工程执行 install wagon:upload-single wagon:sshexec 使用wagon前提: 本地maven 的settings.xml ...
- 理解Cookie和Session的区别及使用
资料一: Cookie和Session的区别 共同之处: cookie和session都是用来跟踪浏览器用户身份的绘画方式. 区别: cookie数据保存在客户端,session数据保存在服务端. s ...