Gary Wu Chun-Lin

Web Front-End Developer

19 followers · 5 following

@wulin40063

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

Chun-Lin / History|-bed935b|WALg.json

Last active May 25, 2022 03:17

Visual Studio Code Settings Sync Gist

	{
	"sync.gist": "3d21f64bee06ae95f3d1b7064f3784ba"
	}

Chun-Lin / enzyme_render_diffs.md

Created July 5, 2018 08:05 — forked from fokusferit/enzyme_render_diffs.md

Difference between Shallow, Mount and render of Enzyme

Shallow

Real unit test (isolation, no children render)

Simple shallow

Calls:

constructor
render

Chun-Lin / Content.jsx

Last active August 22, 2018 07:31

This is a component using inline-style to adjust the style

	export default ({ skyblue }) => {
	/* inline-style */
	let style = {}
	if (skyblue) {
	style = { color: 'skyblue' }
	}

	return (
	<div className="content">
	<div className="content__img" />

Chun-Lin / App.js

Last active August 22, 2018 03:35

This is App component which give 'bold' props to Content component

	class App extends Component {
	render() {
	return (
	<div className="App">
	<Content skyblue/>
	</div>
	)
	}
	}

Chun-Lin / Content.css

Last active August 22, 2018 03:34

This is Content component's css file

	.content{
	width: 80%;
	height: 300px;
	box-shadow: 0 0 5px 2px #ccc;
	}

	.content__img{
	display: inline-block;
	width: 300px;
	height: 100%;

Chun-Lin / Content.jsx

Last active August 22, 2018 07:46

This is the component adding new css classes to adjust the style

	import React from 'react'
	import './content.css'

	export default ({ skyblue }) => {

	/* add new css classes */
	let titleStyles = ['content__title']
	if (skyblue) {
	titleStyles.push('content--skyblue')
	}

Chun-Lin / Content.jsx

Last active August 22, 2018 03:39

This is a component with its css classes

	export default () => (
	<div className="content">
	<div className="content__img" />
	<div className="content__info">
	<div className="content__title">Cute Puppy</div>
	<div className="content__description">
	Sed ut voluptatem neque cumque. Qui sed ut itaque est doloribus qui.
	Eos perferendis autem qui fugiat.
	</div>
	</div>

Chun-Lin / Content.css

Last active August 22, 2018 03:34

This is Content component's css file without media query

	.content{
	width: 80%;
	height: 300px;
	box-shadow: 0 0 5px 2px #ccc;
	}

	.content__img{
	display: inline-block;
	width: 300px;
	height: 100%;

Chun-Lin / Content.jsx

Created August 22, 2018 10:26

This is original Content.jsx with styled-components

	import React from 'react'
	import styled from 'styled-components'

	const ContentWrapper = styled.div`
	width: 80%;
	height: 300px;
	box-shadow: 0 0 5px 2px #ccc;
	`

	const Img = styled.div`

Chun-Lin / Content.jsx

Created August 22, 2018 10:27

This is Content.jsx with skyblue title implemented with styled-components

	import React from 'react'
	import styled from 'styled-components'

	const ContentWrapper = styled.div`
	width: 80%;
	height: 300px;
	box-shadow: 0 0 5px 2px #ccc;
	`

	const Img = styled.div`

OlderNewer