1、在webpack项目中使用react

  创建webpack项目步骤见:

    创建基本的webpack4.x项目

    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的更多相关文章

  1. React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

    对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...

  2. React学习笔记-7-销毁阶段

    销毁阶段可以使用的函数:componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器.因为这些函数都是开发者手动加上去的,react不知道,必须进行手动清理. 实例第一 ...

  3. React学习笔记-6-运行中阶段介绍

    运行中可以使用的函数componentWillReceiveProps:父组件修改属性触发,可以修改新属性,修改状态.字面意思,组件将要接收属性,这个函数触发的时机就是组件的属性将要发生改变的时候,但 ...

  4. React Native01-开始 Windows环境安装配置篇

    转载本文章的童鞋请注明原链接. 查阅文档之类的资料,建议到 http://reactnative.cn/ 本人使用环境Win10. 在阅读本文之前,请了解我们安装React Native之前,要安装P ...

  5. React入门 (1)—使用指南(包括ES5和ES6对比)

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  6. 从一个例子中体会React的基本面

    [起初的准备工作] npm init npm install --save react react-dom npm install --save-dev html-webpack-plugin web ...

  7. 160921、React入门教程第一课--从零开始构建项目

    工欲善其事必先利其器,现在的node环境下,有太多好用的工具能够帮助我们更好的开发和维护管理项目. 我本人不建议什么功能都自己写,我比较喜欢代码复用.只要能找到npm包来实现的功能,坚决不自己敲代码. ...

  8. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  9. React-Native(五):React Native之Text学习

    本章节主要学习Text的布局,仿照网易新网: 代码: /** * Sample React Native App * https://github.com/facebook/react-native ...

  10. React-Native(四):React Native之View学习

    React Native实现以下布局效果:携html5(http://m.ctrip.com/html5/) 基于HelloWord修改项目代码: /** * Sample React Native ...

随机推荐

  1. #import "msado15.dll" no_namespace rename("EOF","adoEOF")

    引入动态链接库msado15.dll的信息, no_namespace--无命名空间 rename(“EOF”,“adoEOF”)--把文件结束符“EOF”,更换成“adoEOF”

  2. 如何给django admin.py配置超级管理员?注册表格?

    admin.py是django给我们提供的功能非常强大的后台,况且支持拓展,,如果你要是觉得admin的后台不够牛逼你可以自己写一个!如何自己写一个后台,后面我有时间了会给大家更新!一起学习!一起进步 ...

  3. springboot实现上传并解析Excel

    添加pom依赖 <!-- excel解析包 --> <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> ...

  4. mysql创建表空间和用户

    创建表空间名 create database 空间名 default character set utf8 collate utf8_bin; 创建用户create user 用户名 identifi ...

  5. [转载]VS2005的工程用VS2010打开后,用VS2005不能打开的解决方法

    首先,在“项目”菜单里,把项目属性“目标平台”改为框架2.0,保存退出. 然后,用记事本或用编辑文本文件的方式打开你的项目文件,后缀为.sln 第一行:把“Microsoft Visual Studi ...

  6. js获取图片信息

    网络图片: fetch(item.path).then(function(res){ // 计算图片大小 return res.blob() }).then(function(data){ conso ...

  7. 微信小程序iOS下拉白屏晃动,坑坑坑

    感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText ...

  8. (๑•̀ㅂ•́)و✧QQ用户信息管理系统

    这是第二篇文章,就直接切主题 这次剖析的也是自己的作业之一:QQ信息管理系统 一:(此处省略了建Proarams类,其实目的只是想强调把连接语句单独放一个类里更容易调用,命名规范如图) 二:(导入SQ ...

  9. mybatis批量更新表setting parameters 错误

    mybatis中想用 foreach标签 批量update set表 下面是mapper.xml <update id="updateMonitorById" paramet ...

  10. pycharm问题合集

    一  打开pycharm出现 点击右上角的配置之后 配置正确的python路径 又出现 解决办法 删除所有的解释器,据说是重名导致的. 然后在配置一次 二  ModuleNotFoundError: ...