新公司的项目前端架构用的是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. 这几天上海移动网络可以直接打开 Google Play 了

    这几天上海移动网络可以直接打开 Google Play (谷歌应用商店)了. 速度还不错.基本无延迟. 想当初,为了防止国内应用市场里的木马或恶意软件,想从 Google Play 应用市场下载,折腾 ...

  2. python leetcode 字符串相乘

    给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例 1: 输入: num1 = "2", num ...

  3. 剑指Offer 答题截图

  4. C#-多态（十二）

    继承概念 多态:即一个接口,多个功能 同一种操作作用于不同的对象,可以有不同的解释,产生不同的执行结果 多态性可以是静态的或动态的.在静态多态性中,函数的响应是在编译时发生的.在动态多态性中,函数的响 ...

  5. javascript中(function($){...})(jQuery)写法是什么意思

    这里实际上是匿名函数function(arg){...}这就定义了一个匿名函数,参数为arg 而调用函数 时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:(functi ...

  6. Oracle数据库忘记用户名密码的解决方案

    1.windows+r输入sqlplus 2.依次输入: sys/manager as sysdba #创建新用户 SQL> create user c##username(自己的用户名) id ...

  7. python 中文报错

    解决的办法为:在程序的开头写入如下代码,这就是中文注释 #coding=utf-8

  8. [C#]关于路径的几则笔记

    测试环境 本文基于windows下的操作 windows 7 x64 unity 5.3.7p4 获取文件的路径 比如一个文件的路径为:e:\3d\client\trunk\Product\Apps\ ...

  9. ASP.NET -- WebForm -- .aspx与.aspx.cs文件

    ASP.NET -- WebForm --  .aspx与.aspx.cs文件 1. ASP.NET -- WebForm(C#)文件 .aspx文件:是Html页面,页面的布局,样式在该文件中设计. ...

  10. c#基础知识之 Dataset 索引0没有值

    datatable绑定到dataGrieView,在刷新datatable的数据时,常会bug:索引0没有值或索引(int)x没有值 昨天弄了一个下午,发现bug原因: dataGridView中有数 ...