Skip to content

Instantly share code, notes, and snippets.

😄
Working on a React Redux project

Sélom Amouzou lomse

😄
Working on a React Redux project
Block or report user

Report or block lomse

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
View tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"jsx": "react",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"noUnusedLocals": true,
"noImplicitReturns": true,
@lomse
lomse / index.html
Created Aug 27, 2019
index.html for todos app with react hooks, typescript and redux
View index.html
<!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>React Hooks + Redux + Typescript</title></head>
<body>
<div id="root"></div>
<script src="./src/index.tsx"></script>
@lomse
lomse / App.tsx
Created Aug 27, 2019
App.tsx file for todos app with react hooks, typescript and redux
View App.tsx
import * as React from "react";
const App: React.FC = () => (
<div>Hello World!</div>
);
export default App;
@lomse
lomse / index.tsx
Created Aug 27, 2019
Index.tsx for todos app with react hooks, typescript and redux
View index.tsx
import * as React from "react";
import { render } from "react-dom";
import App from "./components/App";
render(
<App />,
document.getElementById("root"),
);
@lomse
lomse / .babelrc
Created Aug 27, 2019
.babelrc for todos app with react hooks, typescript and redux
View .babelrc
{
"presets": [
"@babel/preset-react",
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
@lomse
lomse / helper.test.js
Created Oct 20, 2018
helper.test.js file
View helper.test.js
import { addTodo } from './helper'
describe('addTodo', () => {
it('should add todo to the list', () => {
const startTodos = [
{ id: 1, name: 'one', isComplete: false },
{ id: 2, name: 'two', isComplete: false }
]
const newTodo = { id: 3, name: 'three', isComplete: false }
View helper.js
/**
* addTodo
*
* @param {Array} list
* @param {Object} item
*/
export const addTodo = (list, item) => [item, ...list]
/**
* generateId
@lomse
lomse / TodoList.jsx
Created Oct 20, 2018
TodoList component
View TodoList.jsx
import React from "react"
import styled from "styled-components"
import PropTypes from "prop-types"
import TodoItem from "./TodoItem"
const StyledUl = styled.ul`
padding: 0;
`
const TodoList = props => {
@lomse
lomse / TodoItem.jsx
Last active Oct 20, 2018
TodoItem component
View TodoItem.jsx
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;
`
@lomse
lomse / TodoForm.jsx
Last active Oct 20, 2018
TodoForm.jsx to add new todos
View TodoForm.jsx
import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
const FormInput = styled.input`
width: 235px;
outline: none;
font-size: 13px;
padding-top: 7px;
padding-bottom: 7px;
You can’t perform that action at this time.