新公司的项目前端架构用的是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 自定义弹出框带EditText

    EditText 布局页面 edittext_ownername_dialog.xml: <?xml version="1.0" encoding="utf-8&q ...

  2. 编程经验点滴----在 Oracle 数据库中保存空字符串

    写程序这么多年,近几天才发现,向 Oracle 数据库表中,保存空字符串 '' ,结果成了 null. 由于数据库数值 null 的比较.判断,与空字符串 '' 存在差异.一不留神,代码中留下了 bu ...

  3. （python）数据结构---字典

    一.描述 由键值key-value组成的数据的集合 可变.无序的,key不可以重复 字典的键key要可hash(列表.字典.集合不可哈希),不可变的数据结构是可哈希的(字符串.元组.对象.bytes) ...

  4. SQL Server如何查找表名或列名中包含空格的表和列

    最近发现一个数据库中的某个表有个字段名后面包含了一个空格,这个空格引起了一些小问题,一般出现这种情况,是因为创建对象时,使用双引号或双括号的时候,由于粗心或手误多了一个空格,如下简单案例所示: USE ...

  5. MyBatis笔记----SSM框架mybatis3整合springmvc spring4

    上节 无springmvc框架 http://www.cnblogs.com/tk55/p/6661786.html 结构 jar包 web.xml 与index.jsp <?xml versi ...

  6. mssql 怎么配置指定的表 不允许删除数据？

    http://www.maomao365.com/?p=5089 <span style="color:red;font-weight:bold;">前言: 前几天收到 ...

  7. Linux内核线程kernel thread详解--Linux进程的管理与调度（十）

    内核线程 为什么需要内核线程 Linux内核可以看作一个服务进程(管理软硬件资源,响应用户进程的种种合理以及不合理的请求). 内核需要多个执行流并行,为了防止可能的阻塞,支持多线程是必要的. 内核线程 ...

  8. 【Ubuntu16.04.4】常用配置

    1.为root用户设置密码 sudo passwd root 2.设置用户登陆界面 sudo gedit  /usr/share/lightdm/lightdm.conf.d/50-unity-gre ...

  9. MySql基本使用方法

    一,基本概念 1, 常用的两种引擎:         (1) InnoDB        a,支持ACID,简单地说就是支持事务完整性.一致性:         b,支持行锁,以及类似ORACLE的一 ...

  10. java学习（权限修饰符）

    Java中,可以使用访问控制符来保护对类.变量.方法和构造方法的访问.Java 支持 4 种不同的访问权限. default (即缺省,什么也不写): 在同一包内可见,不使用任何修饰符.使用对象:类. ...