<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>
　　//依赖项

    <script src="../node_modules/react/umd/react.development.js"></script>

    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>

    <script src="../node_modules/babel-standalone/babel.js"></script>

</head>

<body>

    <div id="app">

    </div>

    <script type="text/babel"> //jsx语法

        let a = ;

        ReactDOM.render(

        <h1 className='tit' style={{color:'red',fontSize:a+'px'}}></h1>, 
　　　　　　// 类名书写方式  内联样式 用{{}} 双括号 可以写变量

        // React.createElement('div',{style:{color:'red'}},'123'), 相当于render方法
　　　　　　//render(第一个参数是dom元素，第二个参数是样式，第三个参数显示的内容)

        document.getElementById('app')

    )

    </script>

</body>

</html>
//模板解析语法是{} 大括号一对

react初入门的更多相关文章

  1. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  2. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  3. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  4. 【转载】React初学者入门须知

    http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know react.js入门学习 看了一遍,没什么特 ...

  5. React Native入门教程 3 -- Flex布局

    上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...

  6. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

  7. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  8. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  9. React.js 入门与实战课程思维导图

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...

随机推荐

  1. 关于 chrome canary X64 在 win7 64bit 下面缺少openvr_api.dll的解决方法

    在github上下载openvr_api.dll放到chrome的安装目录下就可以. 其实放到系统目录下最好,以后其他程序要使用的时候也能使用的到. https://github.com/ValveS ...

  2. 【转】iOS中修改AVPlayer的请求头信息

    在开发中, 我们经常需要在网络请求时修改HTTP/HTTPS的请求头信息 1.普通AFN请求 #import "LMHTTPSessionManager.h" #import &l ...

  3. Hive学习之路 （一）Hive初识

    Hive 简介 什么是Hive 1.Hive 由 Facebook 实现并开源 2.是基于 Hadoop 的一个数据仓库工具 3.可以将结构化的数据映射为一张数据库表 4.并提供 HQL(Hive S ...

  4. 用Python实现大文件分割

    python代码如下: import sys,os kilobytes = 1024 megabytes = kilobytes*1000 chunksize = int(200*megabytes) ...

  5. BZOJ1023 SHOI2008 仙人掌图 仙人掌、单调队列

    传送门 求仙人掌的直径,可以由求树的直径进行拓展,只需要在环上特殊判断. 沿用求树的直径的DP,对于一条不在任何环内的边,直接像树的直径一样转移,然后考虑环的影响. 设环长为\(cir\),在\(df ...

  6. SpringBoot分布式 - Dubbo+ZooKeeper

    一:介绍 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务.它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护.域名服务.分布式同步.组服务等. Dubbo是Alib ...

  7. Spring+Struts2+Hibernate框架整合流程

    一:基本步骤 新建Maven项目,导入相关依赖(推荐) 在WEB-INF的web.xml中进行配置 ————–Hibernate配置 —————- 创建entity包,创建数据库相关实体类 根据实体类 ...

  8. C#中存储数据的集合：数组、集合、泛型、字典

    为什么把这4个东西放在一起来说,因为c#中的这4个对象都是用来存储数据的集合……. 首先咱们把这4个对象都声明并实例化一下: //数组 ]; //集合 ArrayList m_AList = new ...

  9. ASP.Net Core2.1中的HttpClientFactory系列一：HttpClient的缺陷

    引言: ASP.NET Core2.1 中出现了一个新的 HttpClientFactory 功能, 它有助于解决开发人员在使用 HttpClient 实例从其应用程序中访问外部 web 资源时可能遇 ...

  10. 朱晔和你聊Spring系列S1E9：聊聊Spring的那些注解

    本文我们来梳理一下Spring的那些注解,如下图所示,大概从几方面列出了Spring的一些注解: 如果此图看不清楚也没事,请运行下面的代码输出所有的结果. Spring目前的趋势是使用注解结合Java ...