新公司的项目前端架构用的是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. 编程经验点滴----在 Oracle 数据库中保存空字符串

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

  2. C和C++头文件大全

    C.传统 C++ #include <assert.h> //设定插入点#include <ctype.h>  //字符处理#include <errno.h>   ...

  3. HBase快速安装

    配置hbase-env.sh #JAVA_HOME 需要Java 1.7+ export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64/ # Java CLA ...

  4. Windows四大傻X功能——那些拖慢系统性能的罪魁祸首

    最近新装了一个PC,配置还算蛮高,i7的CPU,8G内存,2T的硬盘,于是小心翼翼地装了一个干净的正版Win7,但是发现居然开机明显卡?所以做了些研究,发现即使全新安装的正版windows,居然也有些 ...

  5. Android重复依赖解决办法

    参考文章:https://blog.csdn.net/qq_24216407/article/details/72842614 在build.gradle引用了Vlc的安卓包:de.mrmaffen: ...

  6. eclipse版本对应名称以及下载地址

        Eclipse 1.0         2001年11月7日(Win32/Linux32 Motif) Eclipse 2.0         2002年6月27日(Linux32 Motif ...

  7. 利用uWSGI和nginx进行服务器部署

    搭建服务器虚拟环境 1)在本机进入虚拟环境,执行命令导出当前需要的所有包. pip freeze > plist.txt 2)通过ftp软件将项目代码和plist.txt文件上传到服务器. 3) ...

  8. LeetCode算法题-House Robber（Java实现）

    这是悦乐书的第187次更新,第189篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第46题(顺位题号是198).你是一个专业的强盗,计划在街上抢劫房屋. 每个房子都藏着一 ...

  9. Unity Shader 基础（4） 由深度纹理重建坐标

    在PostImage中经常会用到物体本身的位置信息,但是Image Effect自身是不包含这些信息的,因为屏幕后处其实是使用特定的材质渲染一个刚好填满屏幕的四边形面片(四个角对应近剪裁面的四个角). ...

  10. windows通过node环境搭建安装npm，cnpm，vue-cli

    1首先下载node,官网地址:https://nodejs.org/en/ 左边是稳定版,右边是最新版,安装过程一样,我选择的是稳定版. 按照步骤一步一步的安装就行,注意路径就可以了. 友情链接:ht ...