Giter Club home page Giter Club logo

intro-react-todo's Introduction

Intro to React - Build a TODO App

  • What is react?
  • What is JSX?
  • create-react-app
  • Show message from state on page
  • Create New Todo Form
  • Call a function when the form is submitted
  • Create a string property on our state to store the user input
  • Listen for when the input changes and update state
  • Log the user input when the form is submitted
  • Create an array property on our state for todos
  • Add a new todo into the todos array, with done: false
  • Show the todos in a list
  • Check done on a todo to mark it as done
    • Show a line through the todo text
  • Add a button to remove a todo
  • Add a button to mark all todos as done
  • What are components?
  • What are props?
  • Create a TodoList Component
    • Pass the todo array down with props
    • Pass the mark done function down with props
    • Pass the remove todo function down with props
  • Create a TodoItem Component
    • Pass the todo down with props
    • Pass the mark done function down with props
    • Pass the remove todo function down with props
  • Create a Form Component
    • Pass the add todo function down with props

intro-react-todo's People

Contributors

w3cj avatar

Stargazers

Ivan Ocijime avatar Casiano Rodriguez-Leon avatar Val Delchev avatar avatar Farid Boucena avatar Roman XVX avatar sarath avatar PT Philip avatar Andrei Toma avatar Brian Stumbaugh avatar avatar avatar Manuel Garaboa avatar Kaushal Mehta avatar Ali avatar Vijay Makhija avatar L. Lester Johnson avatar Dan Levy avatar Julie Engel avatar Robert Quinones avatar

Watchers

James Cloos avatar Casiano Rodriguez-Leon avatar

Forkers

salimtaiyo crispinonicky tapanchoudhary vince7650 malibakiso shady727 x10-utils vstolyarov lfranckx to-olx maxcodextc sriharivv punjtani the-unknown-terrian aegli84 coderaulia sabinm677 susannaopal jmfleeno

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.