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 ...
随机推荐
- leetcode-67.二进制求和
leetcode-67.二进制求和 Points 数组 数学 题意 给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = &qu ...
- 有字库API方法使用一二
有字库是全球第一中文web font(在线字体)服务平台,官网写的有点牛X 需要注册帐号才可以使用,免费字体有限制,一页字数不可以超过500 个,超过500个字体就不会为标签添加字体样式,比较坑爹! ...
- 【软件需求工程与建模 - 小组项目】第6周 - 成果展示3 - 软件设计规格说明书V4.1
成果展示3 - 软件设计规格说明书V4.1
- A problem has been detected and windows has been shut down to prevent damage to your computer.他么啥意思？看这里！【蓝屏】
A problem has been detected and windows has been shut down to prevent damage to your computer. 检测到问 ...
- SqlServer2017下载地址
https://www.microsoft.com/zh-CN/download/details.aspx?id=55994
- C++多线程同步技巧（二）--- 事件
简介 Windows在线程控制方面提供了多种信号处理机制,其中一种便是使用 CreateEvent() 函数创建事件,然后使用信号控制线程运行.其中将事件变为有信号可使用 SetEvent() 函数, ...
- 关于激活Windows10专业版2018长期服务版
之前重装了一次系统,偷懒用了小白一键重装,装好之后显示的是Windows10专业版2018长期服务版,当时也没想太多就放着用了. 然后 ,这几天一直提示 “你的windows许可证即将过期” ,就按 ...
- LeetCode算法题-Factorial Trailing Zeroes（Java实现）
这是悦乐书的第183次更新,第185篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第42题(顺位题号是172).给定一个整数n,返回n!中的尾随零数.例如: 输入:3 输 ...
- February 13th, 2018 Week 7th Tuesday
You are your greatest asset. 你就是你自己最大的资本. For most of us, there are few things that we can count on ...
- Unity 琐碎(2): Shader 颜色调试
Shader的调试有点蛋疼,最近在测试Image Effect中深度还原时,不知道输出的结论是否正确,后面就采取了这种策略.在物体上世界坐标位转换区间到[0,1],然后作为颜色进行输出.然后Image ...