React-菜鸟学习笔记（一）
新公司的项目前端架构用的是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-菜鸟学习笔记（一）的更多相关文章
- React 入门学习笔记整理目录
React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...
- The Road to learn React书籍学习笔记(第二章)
The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...
- The Road to learn React书籍学习笔记(第三章)
The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...
- React Native 学习笔记--进阶（二）--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React+Redux学习笔记：React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- Java菜鸟学习笔记--数组篇(三):二维数组
定义 //1.二维数组的定义 //2.二维数组的内存空间 //3.不规则数组 package me.array; public class Array2Demo{ public static void ...
- Linux shell 菜鸟学习笔记....
20171123 Linux shell 基础学习笔记1. shell 的开始 一般是 #!/bin/bash 通过 #! 来唯一指定使用的shell路径 其他的 # 都表示注释.2. shell 的 ...
- React Redux学习笔记
React Router React Router 使用教程 Redux中间件middleware ［译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性 ...
- The Road to learn React书籍学习笔记(第一章)
react灵活的生态圈 Small Application Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styli ...
- 【React】学习笔记（一）——React入门、面向组件编程、函数柯里化
课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...
随机推荐
- 使用 float 存储小数?
很多程序员就会使用 float 类型来存储小数.sql 的 float 类型和其他大多数编程语言的 float 类型一样, 根据IEEE 754 标准使用二进制格式编码实数数据. 但是很多程序员并不清 ...
- scala模式匹配详细解析
一.scala模式匹配(pattern matching) pattern matching可以说是scala中十分强大的一个语言特性,当然这不是scala独有的,但这不妨碍它成为scala的语言的一 ...
- 洗礼灵魂，修炼python（72）--爬虫篇—爬虫框架：Scrapy
题外话: 前面学了那么多,相信你已经对python很了解了,对爬虫也很有见解了,然后本来的计划是这样的:(请忽略编号和日期,这个是不定数,我在更博会随时改的) 上面截图的是我的草稿 然后当我开始写博文 ...
- The operation could not be performed because OLE DB provider "SQLNCLI11" for linked server "SDSSDFCC...
The operation could not be performed because OLE DB provider "SQLNCLI11" for linked server ...
- Linux环境下执行java -jar xxx.jar命令如何让springboot项目在后台运行
段落引用> 由于springboot内置了tomcat容器,我们通常会把项目打成jar或者war后直接使用java -jar xxx.jar命令去运行程序,但是当前ssh窗口被锁定或者按下ctr ...
- Mysql内置优化工具show profiles
一.概述: Mysql的explain工具目前还没有Oracle的explain plan工具那么强大,但是结合show profiles工具可以实现相似的效果.show profiles语句用于在当 ...
- 虚机抓取Hyper-V宿主的镜像流量（Windows Server 2012R2）
1.将交换机流量镜像到Hyper-V宿主的一块网卡(eth4) 2.在Hyper-V宿主上新建虚拟交换机(Network_Mirror),选择外部网络,扩展属性中启用“Microsoft NDIS捕获 ...
- Hibernate 5 入门指南-基于类注解
首先创建hibernate.cfg.xml配置文件并做简单的配置 <hibernate-configuration> <session-factory> & ...
- Java访问级别修饰符
用途 控制其他类可以访问的字段或方法 修饰符 public.protected.no modifier(未声明).private 访问级别 修饰符 当前类 包 子类 其他包 public √ √ √ ...
- 关于hightcharts如何在同一HTML画两个及以上图形问题
---恢复内容开始--- 写这篇博文也是因为做图表展示时被在同一网页上展示两个饼图难住,关键点在于views,py文件里面的render()函数,对于这个函数有三个参数: request----默认参 ...