Skip to content

Instantly share code, notes, and snippets.

View lomse's full-sized avatar
😄
Working on a React Redux project

Sélom lomse

😄
Working on a React Redux project
9 followers · 18 following
View GitHub Profile
@lomse
lomse / TodoList.jsx
Created October 7, 2018 14:46
TodoList.jsx - react-todo-app
import React from 'react'
const TodoList = () => (
<ul className="todoList">
<li>
<label htmlFor="todo-1">
<input type="checkbox" id="todo-1" />
Learn React.js
</label>
</li>
@lomse
lomse / App.jsx
Last active October 7, 2018 14:47
App.jsx - react-todo-app
import React from 'react'
import {render} from 'react-dom'
const App = () => <div>Hello World</div>
render(<App />, document.getElementById('app'))
@lomse
lomse / index.html
Last active October 7, 2018 14:47
index.html - react-todo-app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
@lomse
lomse / webpack.config.js
Last active October 7, 2018 14:49
webpack.config.js - react-todo-app
const path = require('path')
const config = {
context: __dirname,
entry: './src/App.jsx',
devtool: 'cheap-eval-source-map',
output: {
path: path.join(__dirname, 'public/js'),
filename: 'bundle.js'
},
@lomse
lomse / package.json
Last active October 7, 2018 21:10
package.json - react-todo-app
{
"name": "todo-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1",
"format": "prettier --write --single-quote --no-semi --print-width=120 --tab-width=2 \"src/**/*.{js,jsx} \"",
"lint": "eslint 'src/**/*.{js,jsx}' --quiet",
@lomse
lomse / App.jsx
Created October 9, 2018 09:12
Styled Components
import React from 'react'
import { render } from 'react-dom'
import styled from 'styled-components'
import TodoList from './components/TodoList'
import TodoForm from './components/TodoForm'
const Container = styled.div`
width: 250px;
margin: 10px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px
@lomse
lomse / TodoList.jsx
Created October 9, 2018 09:13
Styled Components
import React from 'react'
import styled from 'styled-components'
import TodoItem from './TodoItem'
const StyledUl = styled.ul`
padding: 0
`
const TodoList = () => (
<StyledUl>
<TodoItem id="todo-1" title="Learn React.js" />
<TodoItem id="todo-2" title="Learn Vue.js" />
@lomse
lomse / TodoItem.jsx
Last active October 9, 2018 09:16
Styled Components
import React from "react"
import PropTypes from "prop-types"
import styled from 'styled-components'
const StyledList = styled.li`
list-style: none;
overflow: hidden;
width: 100%;
margin-bottom: 10px
`
const StyledLabel = styled.label`
@lomse
lomse / TodoForm.jsx
Created October 9, 2018 09:20
Styled Component
import React from "react"
import styled from 'styled-components'
const FormInput = styled.input`
width: 235px;
outline: none;
font-size: 13px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 10px;
@lomse
lomse / TodoList.test.js
Last active October 11, 2018 00:30
Snapshot testing with Enzyme
import React from 'react'
import Enzyme, { shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import TodoList from './TodoList'
describe('TodoList Component', () => {
beforeAll(() => {
Enzyme.configure({ adapter: new Adapter() })
})