新公司的项目前端架构用的是react.js 之前孤陋寡闻并没听说过，想着后期开发和维护多少要会点前端的东西，就简单研究一下。个人的学习习惯能写代码的就不写文字，必要的地方加两行注释，代码一行行敲下去，运行过有问题及时发现，存档当作日后小问题备查的工具。感觉前端尤如玄学，标点啥的处处要留心，一个后台的多少懂点吧。

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Hello React!</title>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/babel">

/**

function tick() {

  const element = (

    <div>

      <h1>Hello, world!</h1>

      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>

    </div>

  )

  ReactDOM.render(

    element,

    document.getElementById('example')

  )

}

setInterval(tick, 1000);

*/

/*自定义方法标签 < Clock date = {new Date()} />, date为其中一参数，可理解为属性*/

/**

function Clock(props){

    return(

        <div>

            <h1>Hello, world!</h1>

            <h2>现在是 {props.date.toLocaleTimeString()}  {props.name}.</h2>

        </div>

    )

}

function tick() {

  ReactDOM.render(

    <Clock date={new Date()} name='slowcity' />,

    document.getElementById('example')

  );

}

setInterval(tick, 1000);

*/

/*自定义类标签 < Clock date = {new Date()} />, date为类对象*/

/**

class Clock extends React.Component{

    render(){

        return(

            <div>

                <h1>hello world </h1>

                <h2>现在是{ this.props.date.toLocaleTimeString()}</h2>

            </div>

        )

    }

}

function tick(){

    ReactDOM.render(

        < Clock date = {new Date()} />,

        document.getElementById('example')

    )

}

setInterval(tick,1000)

*/

/*当element有多个标签时，多个标签放在div标签内部

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px

添加myStyle内联样式

*/

var i = 3;

var myStyle = {

    fontSize: 20,

    color: '#FF0000'

};

const element = (

<div>

 {/*注释需要写在花括号中... react不支持ifelse 但支持三元运算*/}

<h1>Hello, world! { i==2?'ture':'false'}</h1>

<h1  style = {myStyle}>Hello, world! { i==2?1+1:4}</h1>

<h1>Hello, world! { i==3?'ture':'false'}</h1>

</div> 

)

ReactDOM.render(

  element,

  document.getElementById('example')

);

</script>

</body>

</html>

React-菜鸟学习笔记（一）的更多相关文章

  1. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  2. The Road to learn React书籍学习笔记(第二章)

    The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...

  3. The Road to learn React书籍学习笔记(第三章)

    The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...

  4. React Native 学习笔记--进阶（二）--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  5. React+Redux学习笔记：React+Redux简易开发步骤

    前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...

  6. Java菜鸟学习笔记--数组篇(三):二维数组

    定义 //1.二维数组的定义 //2.二维数组的内存空间 //3.不规则数组 package me.array; public class Array2Demo{ public static void ...

  7. Linux shell 菜鸟学习笔记....

    20171123 Linux shell 基础学习笔记1. shell 的开始 一般是 #!/bin/bash 通过 #! 来唯一指定使用的shell路径 其他的 # 都表示注释.2. shell 的 ...

  8. React Redux学习笔记

    React Router React Router 使用教程 Redux中间件middleware ［译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性 ...

  9. The Road to learn React书籍学习笔记(第一章)

    react灵活的生态圈 Small Application Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styli ...

  10. 【React】学习笔记（一）——React入门、面向组件编程、函数柯里化

    课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...

随机推荐

  1. Android SDK manager里面什么是必须下载的？

    最近公司来了位新同事,由于需要配置Android环境,但是在配置的时候却发现sdk很大,很占用空间,想复制给同事也觉得不方便,于是根据下面的图删除了一些不必要的api. 根据官方文档的描述SDK To ...

  2. Linux命令工作中常用总结

    1. 搜索 在vi和vim中如果打开一个很大的文件,不容易找到对应的内容,可以使用自带的搜索关键字进行搜索定位: 在vi和vim界面中输入:"/"(反斜杠),之后会出现一个输入框让 ...

  3. matlab练习程序（求向量间的旋转矩阵与四元数）

    问题是这样,如果我们知道两个向量v1和v2,计算从v1转到v2的旋转矩阵和四元数,由于旋转矩阵和四元数可以互转,所以我们先计算四元数. 我们可以认为v1绕着向量u旋转θ​角度到v2,u垂直于v1-v2 ...

  4. eclipse配置环境变量 （特别是输入javac无显示问题）

    下载JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html 最近win10恢复了一下系统,重新给eclipse配一 ...

  5. JVM 之类加载

    一.概述 Java不同于C/C++这类传统的编译型语言,也不同于php这一类动态的脚本语言.可以说Java是一种半编译语言,我们所写的类会先被编译成.class文件,这个.class是一串二进制的字节 ...

  6. 我在 Mac 上都用什么

    我在 Mac 上都用什么 Homebrew Homebrew 是统一管理 macOS 中应用的最佳方法之一,而且大量优秀的应用都可以在 Homebrew 中找到. 就不做过多介绍了, 有兴趣可以看相关 ...

  7. 第十四届智能车队员培训 I/O的使用 数据方向寄存器和数据寄存器的配置 MC9S12D64处理器

    I/O的使用 数据方向寄存器和数据寄存器的配置 I/O输入输出的使用: 数据方向寄存器与数据寄存器 寄存器的概念: 寄存器,是集成电路中非常重要的一种存储单元,通常由触发器组成.在集成电路设计中,寄存 ...

  8. 【算法】LeetCode算法题-Length Of Last Word

    这是悦乐书的第155次更新,第157篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第14题(顺位题号是58).给定一个字符串,包含戴尔字母.小写字母和空格,返回最后一个单 ...

  9. SAP S/4嵌入式分析——虚拟数据模型（VDM）

    在本文中,我会通过CDS视图来介绍虚拟数据模型(Virtual Data Model,以下简称VDM). 在SAP HANA平台出现后,SAP的业务应用开发模式已经产生了变化,新的经验法则是:尽可能在 ...

  10. Python实现矿池

    自建P2POOL矿池详细教程(高级篇)http://8btc.com/article-1804-1.html p2pool比特币矿池教程综合篇(包含linux矿池教程)https://www.cybt ...