新公司的项目前端架构用的是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. [Java]Socket和ServerSocket学习笔记

    对于即时类应用或者即时类的游戏,HTTP协议很多时候无法满足于我们的需求.这会,Socket对于我们来说就非常实用了.下面是本次学习的笔记.主要分异常类型.交互原理.Socket.ServerSock ...

  2. SQL Server 事务隔离级别

    一.事务隔离级别控制着事务的如下表现: 读取数据时是否占用锁以及所请求的锁类型. 占用读取锁的时间. 引用其他事务修改的行的读操作是否: 在该行上的排他锁被释放之前阻塞其他事务. 检索在启动语句或事务 ...

  3. Lua table笔记

    记录我在使用lua的过程中的一些笔记 默认key为数字递增 local tb={"A",[3]="C","B"} 这个tb通过下标1,2,3 ...

  4. February 21st, 2018 Week 8th Wednesday

    Our life is what our thoughts make it. 我们的思想成就了我们的生活. The mind is everything. What you think, you be ...

  5. IntelliJ IDEA 创建Spring+SpringMVC+mybatis+maven项目

    参考自:https://www.cnblogs.com/hackyo/p/6646051.html 第一步: 创建maven项目 输入项目名和工程id 选择maven 默认就可以了 刚开始时间比较长, ...

  6. Automatically migrating data to new machines kafka集群扩充迁移topic

    The partition reassignment tool can be used to move some topics off of the current set of brokers to ...

  7. 使用Intellij IDEA将web项目导出为war包

    前言:IDEA导出war包的方式与MyEclipse有一点不同,使笔者在使用的时候有点困惑,在网上查阅相关资料的时候,发现其描述十分不清晰,于是就有了这篇随笔的诞生.话不多说,直接进入正题. 注:ID ...

  8. Loj #3057. 「HNOI2019」校园旅行

    Loj #3057. 「HNOI2019」校园旅行 某学校的每个建筑都有一个独特的编号.一天你在校园里无聊,决定在校园内随意地漫步. 你已经在校园里呆过一段时间,对校园内每个建筑的编号非常熟悉,于是你 ...

  9. C#事件の事件聚合器（二）

    WPF中时常会遇到ViewModel之间的通讯,ViewModel并不知道自己的View,但是一个View发生的更改需要通知另外一个View. 举一个例子,软件界面上有个人信息,打开一个界面更改用户的 ...

  10. CAS适用场景

    转载:http://www.jb51.net/article/86192.htm 下面小编就为大家带来一篇Java并发编程总结——慎用CAS详解.小编觉得挺不错的, 现在就分享给大家,也给大家做个参考 ...