Gary Wu Chun-Lin

Web Front-End Developer

Chun-Lin / appEntryPoint.js

Created October 24, 2019 03:10 — forked from markerikson/appEntryPoint.js

Webpack React/Redux Hot Module Reloading (HMR) example

	import React from "react";
	import ReactDOM from "react-dom";

	import configureStore from "./store/configureStore";


	const store = configureStore();


	const rootEl = document.getElementById("root");

Chun-Lin / Content.jsx

Created August 23, 2018 10:02

Content.jsx combined with styled-components and CSS selector

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

	const Content = ({ skyblue, className }) => {
	return (
	<div className={className}>
	<div className="content__img" />
	<div className="content__info">
	<div className="content__title" skyblue>
	Cute Puppy

Chun-Lin / Content.jsx

Created August 23, 2018 09:08

Content.jsx render function

	export default ({ skyblue }) => {
	return (
	<ContentWrapper>
	<Img />
	<InfoWrapper>
	<Title skyblue>Cute Puppy</Title>
	<Description>
	Sed ut voluptatem neque cumque. Qui sed ut itaque est doloribus qui.
	Eos perferendis autem qui fugiat.
	</Description>

Chun-Lin / Content.jsx

Created August 23, 2018 08:24

This is Content.jsx modify Title's color 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`

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.css

Last active August 22, 2018 03:34

This is Content component's css file without media query

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.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.css

Last active August 22, 2018 03:34

This is Content component's css file