Skip to content

Instantly share code, notes, and snippets.

🏠
Working from home

Yuri chocolat5

🏠
Working from home
Block or report user

Report or block chocolat5

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@chocolat5
chocolat5 / index.jsx
Created Oct 9, 2019
React state simple example 2
View index.jsx
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const InformationArea = () => {
const [flag, setFlag] = useState(false);
const handleOpenEverything = () => {
setFlag(!flag);
@chocolat5
chocolat5 / index.jsx
Created Oct 9, 2019
React state simple example
View index.jsx
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const ViewFlagValue = ({ flag }) => {
return <p>{flag ? '有効' : '無効'}</p>;
}
const SwitchFlag = ({handleUpdateFlag}) => {
@chocolat5
chocolat5 / index.md
Created Sep 21, 2019
Increment ++ and Decrement
View index.md

後置き

代入してから「++」が実行される

let x = 5;
let y;
y = x++;

console.log(y); //5
@chocolat5
chocolat5 / index.js
Last active Sep 21, 2019
Calculate Tax
View index.js
let total = (price) => {
let tax = 0.08;
return price + price * tax;
}
console.log(total(2000));
@chocolat5
chocolat5 / README.md
Last active Aug 5, 2019
React + webpack + SASS default
View README.md

webpackのインストール

npm install webpack webpack-cli webpack-dev-server --save-dev

Babelのインストール

npm install @babel/core @babel/cli @babel/preset-env babel-loader @babel/preset-react @babel/polyfill --save-dev
@chocolat5
chocolat5 / custom-data-attribute.md
Created Jun 8, 2019
custom data attribute (HTML5)
View custom-data-attribute.md

HTML

<ul>
  <li id="item1" class="item" data-selected="true">item1</li>
  <li id="item2" class="item" data-selected="false">item2</li>
  <li id="item3" class="item" data-selected="false">item3</li>
</ul>
@chocolat5
chocolat5 / package.json
Last active Aug 9, 2019
webpack + babel (IE11) + Sass使用
View package.json
{
"private": true,
"name": "default",
"version": "1.0.0",
"description": "",
"main": "src/js/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production",
View スクロールを検知してclassを切り替え
class Header extends Component {
constructor(props) {
super(props)
this.state = { 'onScroll': false }
this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
You can’t perform that action at this time.