视频地址

main.js

import React from "react"
import { render } from "react-dom"
import App from "./App.js" render(
<App></App>,
document.getElementById("app-container")
)

App.js

// 引入 React 和 Component 组件
import React, { Component } from "react";
import Bar from "./components/Bar/Bar.js";
import "./app.less"; class App extends Component {
constructor() {
super() this.state = {
r: 128,
g: 128,
b: 128
} // 三个 Bar 实例
this.bars = ['r', 'g', 'b'].map((item, index) => {
return <Bar key={index} v={this.state[item]} color={item} setColor={(this.setColor).bind(this)}></Bar>
})
} // 设置函数,可以改变 color 颜色为 value
setColor(color, value) {
this.setState({ [color]: value })
}
render() {
return (
<div>
<div className="box" style={{ "backgroundColor": `rgb(${this.state.r},${this.state.g},${this.state.b})` }}></div>
{this.bars}
</div>
)
}
} //向外暴露
export default App;

app.less

.box {
width: 200px;
height: 200px;
border: 1px solid #333;
}

Bar.js

import React from "react";
import "./css.less";
import {PropTypes} from "prop-types"; class Bar extends React.Component {
constructor(props) {
super() this.state = {
v: props.v
} // 绑定this
this.change = (this.change).bind(this) this.setColor = props.setColor
} // 改变颜色
change(event) {
this.setState({'v': parseInt(event.target.value)})
this.setColor(this.props.color, this.state.v)
} render() {
return (
<div className="Bar_kaola">
<div className="bar">
{this.props.v}
<input type="range" min="0" max="255" value={this.state.v} onChange={this.change} />
<input type="number" min="0" max="255" value={this.state.v} onChange={this.change} />
</div>
</div>
)
}
} Bar.propTypes = {
v : PropTypes.number.isRequired,
color : PropTypes.string.isRequired,
setColor : PropTypes.func.isRequired
} //向外暴露
export default Bar

Bar/css.less:

.Bar_kaola {
.bar {
input[type="number"] {
width: 50px;
position: relative;
top: -2px;
} margin-bottom: 10px;
}
}

package.json:

  "devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"style-loader": "^0.23.1",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.2"
},
"dependencies": {
"@babel/runtime": "^7.4.4"
}

webpack.config.js

const path = require('path');

module.exports = {
entry: "./app/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "all.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.less$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "less-loader" // compiles Less to CSS
}
]
}
]
},
watch: true
}

B站 React教程笔记day1(4)调色板案例的更多相关文章

  1. [转]React 教程

    本文转自:http://www.runoob.com/react/react-install.html React 可以直接下载使用,下载包中也提供了很多学习的实例. 本教程使用了 React 的版本 ...

  2. Docker 入坑教程笔记

    Docker 入坑教程笔记 视频网址B站:点这里 查询命令 man docker 简单启动和退出 docker run --name [容器名] -i -t ubuntu /bin/bash 交互启动 ...

  3. Swagger快速入门教程笔记

    现在市面上大多数公司都摒弃了传统 jsp 开发,采用前后端分离式的开发规则,前端使用 Vue,Angular,React 等等完成页面,后端省掉了视图跳转的过程,直接书写接口返回 json 数据供前端 ...

  4. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

  5. React使用笔记1-React的JSX和Style

    React使用笔记1-React的JSX和Style Date: 2015-11-27 20:56 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1 ...

  6. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  7. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  8. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  9. react系列笔记1 用npx npm命令创建react app

    react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...

随机推荐

  1. python-python基础4

    本章内容: 装饰器 生成器 迭代器 json & pickle 模块 软件目录结构规范 一.装饰器 装饰器 在不改动函数代码的基础上无限制扩展函数功能的一种机制,本质上讲,装饰器是一个返回函数 ...

  2. (实例)Linux 内核添加exfat驱动

    背景: 由于exfat是常用的文件系统格式,而Linux由于版权的问题,没有在官方中添加有关的驱动. 但是 微软也同意开源了,所以比较新的 Linux 会支持这一块. 为了支持exfat的驱动,我们需 ...

  3. Python安全基础编写

    python所写的程序都是应用程序 python的环境编译型:一次性将所有程序编译成二进制文件缺点:开发效率低,不能跨平台优点:运行速度快使用语言:C,C++等等 解释型:当程序执行时,一行一行的解释 ...

  4. Ubuntu系统配置Zabbix前端及中文乱码解决方案

    Ubuntu系统配置Zabbix前端及中文乱码解决方案  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装zabbix 博主推荐阅读: https://www.cnblogs ...

  5. 新闻网大数据实时分析可视化系统项目——18、Spark SQL快速离线数据分析

    1.Spark SQL概述 1)Spark SQL是Spark核心功能的一部分,是在2014年4月份Spark1.0版本时发布的. 2)Spark SQL可以直接运行SQL或者HiveQL语句 3)B ...

  6. Day7 - C - Saddle Point ZOJ - 3955

    Chiaki has an n × m matrix A. Rows are numbered from 1 to n from top to bottom and columns are numbe ...

  7. 原生JS 实现 dom ready

    记录一下项目技术问题: 记得:放在head标签内的脚本,第一时间执行 var baseTools = { // dom ready ready: function( f ){ var ie = !!( ...

  8. C语言中可变参数的原理——printf()函数

    函数原型: int printf(const char *format[,argument]...) 返 回 值: 成功则返回实际输出的字符数,失败返回-1. 函数说明: 使用过C语言的人所再熟悉不过 ...

  9. windows查看所有进程:netstat -ano

    windows查看所有进程:netstat -ano ------------------------------------------------------------------------- ...

  10. (转)linux shell 的here document 用法 (cat << EOF)

    什么是Here Documen: Here Document 是在Linux Shell 中的一种特殊的重定向方式,它的基本的形式如下 cmd << delimiter Here Docu ...