[{"_1":2,"_45":-5,"_46":-5},"loaderData",{"_3":4,"_8":9},"root",{"_5":-5,"_6":7},"theme","isLoggedIn",false,"routes/topic.$name",{"_10":11,"_16":17,"_41":42},"topic",{"_12":13,"_14":15},"name","coding","icon","💻","posts",[18,32],{"_19":20,"_21":22,"_23":24,"_10":13,"_25":26,"_30":31},"title","Making a simple todo app using react and bulma","slug","making-a-simple-todo-app-using-react-and-bulma","date","2018-10-27","tags",[27,28,29],"react","frontend","redux","content","

Redux is now the famous state management library but it can be overwhelming.\nIn this tutorial we will make a simple todo app with React, Redux and Bulma. Bulma is a awesome UI library. Here is a screenshot of what we will be making today

\n $\"redux\"$ \n

Use create react app to make the react app.

yarn create react-app my-app

You will see the following packages in the package.json

  \"react\": \"^16.5.2\",\n  \"react-dom\": \"^16.5.2\",\n  \"react-scripts\": \"1.1.5\"

Add redux to the project

yarn add redux\nyarn add react-redux

Add provider and store to the index file. Provider makes the redux store available to the components. CreateStore creates the redux store that holds the state tree.\nThe data in the store can be changed by calling dispatch() on it. This is how the index file will look like after adding store.

// Import store to the project\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { createStore } from 'redux'\nimport { Provider } from 'react-redux'\nimport App from './components/App'\nimport rootReducer from './reducers'\n \nconst store = createStore(rootReducer)\n \nrender(\n  <Provider store={store}>\n    <App />\n  </Provider>,\n  document.getElementById('root')\n)

Create following folders and files to better organize the project.

|   index.css\n|   index.js\n|   registerServiceWorker.js\n|\n+---actions\n|       index.js\n|\n+---components\n|       App.js\n|       App.test.js\n|       Header.js\n|       Main.js\n|       TodoInput.js\n|       Todolist.js\n|\n+---constants\n|       ActionTypes.js\n|\n+---containers\n|       Header.js\n|       Main.js\n|       VisibleTodolist.js\n|\n\\---reducers\n        index.js\n        todos.js

Add two actions to the Action.js

import * as types from '../constants/ActionTypes'\n \nexport const addTodo = text => ({ type: types.ADD_TODO, text })\nexport const completeTodo = id => ({ type: types.COMPLETE_TODO, id })

Add todos reducer

import { ADD_TODO, COMPLETE_TODO } from '../constants/ActionTypes';\n \nconst initialState = [\n  {\n    id: 0,\n    text: 'Wash Jeans',\n    completed: false\n  },\n];\n \nconst todos = (state = initialState, action) => {\n  switch (action.type) {\n    case ADD_TODO:\n      return [\n        ...state,\n        {\n          id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,\n          completed: false,\n          text: action.text,\n        },\n      ];\n    case COMPLETE_TODO:\n      debugger;\n      let filtertodo =  state.filter(\n        todo => todo.id !== action.id\n      )\n      return filtertodo\n    default:\n      return state;\n  }\n}\n \nexport default todos

Add following code to App.js

import React, { Component } from \"react\";\nimport Header from \"../containers/Header\";\nimport Main from \"./Main\";\nimport { Hero, Section, Container } from \"react-bulma-components/full\";\nimport Navbar from \"react-bulma-components/lib/components/navbar\";\nimport { Columns } from \"react-bulma-components\";\nclass App extends Component {\n  render() {\n    return (\n      <div>\n        <Hero color=\"primary\">\n          <Hero.Head>\n            <Navbar>\n              <Navbar.Brand>\n                <Navbar.Item renderAs=\"a\" href=\"#\">\n                  <h1>ashish.me</h1>\n                </Navbar.Item>\n              </Navbar.Brand>\n            </Navbar>\n          </Hero.Head>\n        </Hero>\n        <Section>\n          <Container>\n            <Columns>\n              <Columns.Column />\n              <Columns.Column>\n                <Header />\n                <br />\n                <Main />\n              </Columns.Column>\n              <Columns.Column />\n            </Columns>\n          </Container>\n        </Section>\n      </div>\n    );\n  }\n}\n \nexport default App;

",{"_19":33,"_21":34,"_23":35,"_10":13,"_25":36,"_30":40},"Setting up my dev environment on windows 10","setting-up-my-dev-environment-on-windows-10","2017-03-01",[37,38,39],"windows","vscode","setup","

I got a brand new Dell Latitude latpop just a few weeks ago. Here are some of the softwares I installed and settings I did to customise it. I wanted to share this because I have been enjoying what I have got going on.

Softwares

Visual studio 2017 for .Net Core projects
Visual studio Code as my main text editor
Hyper as my terminal
Trello for project management
Microsoft Todo for tracking todos
DBeaver for database
FileZilla for ftp

Setting up WSL

Install ZSH and oh-my-zsh

# Set http_proxy if you are behind proxy\n# sudo http_proxy=http://yourserver apt-get update\nsudo apt update\nsudo apt upgrade\nsudo apt-get install zsh\nsudo apt-get install git\nsudo apt-get install hugo\ngit config --global user.name \"John Doe\"\ngit config --global user.email johndoe@example.com\ngit config --global http.sslverify false\ngit config --global core.autocrlf input\nsh -c \"$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)\"

Make zsh as your default shell by adding below line in your ~/.bashrc

if test -t 1; then\nexec zsh\nfi

Disable permission errors by adding below in your ~/.zshrc

alias ls='ls 2>/dev/null

Remove username from agnoster theme by changing the prompt_context() with below code

prompt_context() {\n  prompt_segment $PRIMARY_FG default  \"  🌈  \"\n}\n \nprompt_dir() {\n  prompt_segment blue $PRIMARY_FG ' %c '\n}

Add below plugins in ~/.zshrc

plugins=(\n    git\n    node\n    npm\n    npx\n    nvm\n    z\n)

Install nodejs and yarn

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -\nsudo apt-get install -y nodejs\ncurl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -\necho \"deb https://dl.yarnpkg.com/debian/ stable main\" | sudo tee /etc/apt/sources.list.d/yarn.list\nsudo apt update\nsudo apt install --no-install-recommends yarn\nyarn --version

Setup npm

npm config set strict-ssl false\n# To set proxy for npm installs -> npm config set proxy http://proxy_host:port

Setup Yarn

yarn config set proxy http://username:password@host:port\nyarn config set https-proxy http://username:password@host:port

Fix permission errors when installing global npm modules

mkdir ~/.npm-global\nnpm config set prefix '~/.npm-global'\nvim ~/.profile

Add below line in your .profile

export PATH=~/.npm-global/bin:$PATH

Update system variables

source ~/.profile

Change theme of oh-myzsh

You can change theme of the shell by changing the value of ZSH_THEME=\"agnoster\" in ~/.zshrc

Some theme may want powerline fonts which can be found in below repository. Use the install script in the repo to install all the fonts at once.

Set-ExecutionPolicy Bypass\ngit clone https://github.com/powerline/fonts.git\n.\\install.ps1

Install monospaced version of powerline fonts from below link for internal terminal of VSCode and then change the integrated\nterminal font family to Menlo for Powerline

git clone https://github.com/abertsch/Menlo-for-Powerline.git

Plugins for Visual Studio Code

Code Runner
Eslint
Markdown All in One
Prettier
Snazzy Operator
stylelint

Extensions for Google Chrome

Grammarly
ColorPick Eyedropper
React developer tools
Redux developer tools
Tampermonkey
Video speed controller
Adblock plus

","relatedTopics",[43],{"_12":44,"_14":-7},"Life","actionData","errors"]

💻 coding

coding

Making a simple todo app using react and bulma

Setting up my dev environment on windows 10

Related Categories