JeromeFranco

import React, { useEffect } from 'react';
import * as d3 from 'd3';

const width = 450;
const height = 450;
const margin = 40;
const colors = ["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"];

function PieChart({ data }) {
  useEffect(() => {

JeromeFranco

// TodoPage.js
class TodoPage extends React.Component {
  state = {
    todos: [
      { id: 1, desc: 'Check email', completed: false },
      { id: 2, desc: 'Write blog post', completed: false },
    ],
    user: { name: 'John', canDelete: true },
  };

JeromeFranco

// TodoPage.js
export const TodoContext = createContext({});

class TodoPage extends React.Component {
  state = {
    todos: [
      { id: 1, desc: 'Check email', completed: false },
      { id: 2, desc: 'Write blog post', completed: false },
    ],
    user: { name: 'John', canDelete: true },

JeromeFranco

const TodoItem = ({ todo, onDelete, canDelete }) => {
  return (
    <div>
      <div>{todo.desc}</div>
      <div>
        <button disabled={!canDelete} onClick={() => onDelete(todo)} />
      </div>
    </div>
  );
};

JeromeFranco

const TodoList = ({ todos, onDelete, canDelete }) => {
  return (
    <div>
      <Title value="Todo List" />
      <div>
        {todos.map(todo => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onDelete={onDelete}

JeromeFranco

class TodosPage extends React.Component {
  state = {
    todos: [
      { id: 1, desc: 'Check email', completed: false },
      { id: 2, desc: 'Write blog post', completed: false },
    ],
    user: { name: 'John', canDelete: true },
  };

  handleDelete = todo => {

JeromeFranco

showMessage();

console.log(name);

function showMessage() {
  console.log('Hello world');
}

var name = 'John Doe';

JeromeFranco

import { createSlice } from 'redux-starter-kit';

const todoSlice = createSlice({
  slice: 'todos',
  initialState: [],
  reducers: {
    addTodo(state, action) => [ ...state, action.payload],
    removeTodo(state, action) => state.filter(todo => todo !== action.payload),
  },
});

JeromeFranco

// todo-actions.js
import { createAction } from 'redux-starter-kit';

// Create an action creator
export const addTodo = createAction('TODO/ADD_TODO');


// todo-reducers.js
import { addTodo } from './todo-actions';

JeromeFranco

import { configureStore, getDefaultMiddleware } from 'redux-starter-kit';
import monitorReducersEnhancer from './enhancers/monitorReducers'; 
import loggerMiddleware from './middleware/logger';
import rootReducer from './reducers';

const store = configureStore({ 
   reducer: rootReducer, 
   middleware: [loggerMiddleware, …getDefaultMiddleware()],
   preloadedState, 
   enhancers: [monitorReducersEnhancer],