Skip to content

Instantly share code, notes, and snippets.

@kraigh

kraigh/todo-guide.md

Last active December 4, 2018 01:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kraigh/515d8b90625a289c7fac1b8f6a713464 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kraigh/515d8b90625a289c7fac1b8f6a713464 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kraigh revised this gist Dec 4, 2018. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion todo-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,8 @@ The next steps are:
    1. Make sure you rename any `class` attributes to `className`
    2. Add props to your `Todo` component
    - Will probably need the `id` and `text` at a minimum.
    - Render those props instead of having them hardcoded (to test, pass them when you create the component, i.e. <Todo id="123" text="test" />
    - Render those props instead of having them hardcoded (to test, pass them when you create the component, i.e. `<Todo id="123" text="test" />`
    - Display the props inside the component, in `Todo.js`, i.e. `<p>{this.props.text}</p>`
    3. Add your AJAX GET call
    - Add a `constructor()` method to your `App` component and initialize `this.state` there with an empty `todos` array.
    - Make sure to call `super()` at the start of your constructor!
  2. kraigh revised this gist Nov 20, 2018. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion todo-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,13 @@
    # Steps to complete to turn Todo app into React
    After following the instructions (here)[https://gist.github.com/kraigh/b3258935d243c718577b0b38c8450da8], you should have the following:
    After following the instructions [here](https://gist.github.com/kraigh/b3258935d243c718577b0b38c8450da8), you should have the following:

    - Working react app
    - Ability to deploy react app to Github Pages
    - `App` component that does initial setup and composes your other components
    - `NewTodo` component containing the form for a new Todo
    - `Todo` component containing HTML for a single Todo
    - CSS files for each component

    The next steps are:
    1. Make sure you rename any `class` attributes to `className`
    2. Add props to your `Todo` component
  3. kraigh revised this gist Nov 20, 2018. 1 changed file with 15 additions and 15 deletions.
    30 changes: 15 additions & 15 deletions todo-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -12,21 +12,21 @@ The next steps are:
    - Will probably need the `id` and `text` at a minimum.
    - Render those props instead of having them hardcoded (to test, pass them when you create the component, i.e. <Todo id="123" text="test" />
    3. Add your AJAX GET call
    - Add a `constructor()` method to your `App` component and initialize `this.state` there with an empty `todos` array.
    - Make sure to call `super()` at the start of your constructor!
    - Use a `componentDidMount()` method in your `App` component and put your AJAX javascript there.
    - After the AJAX call is complete and successful, update `this.state.todos` with your new Todo items.
    - Add a `constructor()` method to your `App` component and initialize `this.state` there with an empty `todos` array.
    - Make sure to call `super()` at the start of your constructor!
    - Use a `componentDidMount()` method in your `App` component and put your AJAX javascript there.
    - After the AJAX call is complete and successful, update `this.state.todos` with your new Todo items.
    4. Render `Todo` component for each Todo item.
    - Use `.map` and the syntax from the slides to loop through your todos and render a new `<Todo>` for each of them.
    - Make sure to pass a `key` attribute
    - Use `.map` and the syntax from the slides to loop through your todos and render a new `<Todo>` for each of them.
    - Make sure to pass a `key` attribute
    5. Add event methods for completing and deleting a ToDo
    - Attach them to the buttons using an `onClick` prop.
    - Add your AJAX for completing and deleting inside those methods
    - Be sure to add the `bind` call from the slides.
    - Update `this.state` if necessary
    - Attach them to the buttons using an `onClick` prop.
    - Add your AJAX for completing and deleting inside those methods
    - Be sure to add the `bind` call from the slides.
    - Update `this.state` if necessary
    6. Add event method for submitting new Todo form.
    - Attach to your form using an `onSubmit` prop.
    - Add your AJAX for adding new Todos inside the event method
    - Be sure to add the `bind` call from the slides
    - Don't forget `event.preventDefault()`
    - Update `state` with your new Todo.
    - Attach to your form using an `onSubmit` prop.
    - Add your AJAX for adding new Todos inside the event method
    - Be sure to add the `bind` call from the slides
    - Don't forget `event.preventDefault()`
    - Update `state` with your new Todo.
  4. kraigh revised this gist Nov 20, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions todo-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,8 +9,8 @@ After following the instructions (here)[https://gist.github.com/kraigh/b3258935d
    The next steps are:
    1. Make sure you rename any `class` attributes to `className`
    2. Add props to your `Todo` component
    - Will probably need the `id` and `text` at a minimum.
    - Render those props instead of having them hardcoded (to test, pass them when you create the component, i.e. <Todo id="123" text="test" />
    - Will probably need the `id` and `text` at a minimum.
    - Render those props instead of having them hardcoded (to test, pass them when you create the component, i.e. <Todo id="123" text="test" />
    3. Add your AJAX GET call
    - Add a `constructor()` method to your `App` component and initialize `this.state` there with an empty `todos` array.
    - Make sure to call `super()` at the start of your constructor!
  5. kraigh created this gist Nov 20, 2018.
    32 changes: 32 additions & 0 deletions todo-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    # Steps to complete to turn Todo app into React
    After following the instructions (here)[https://gist.github.com/kraigh/b3258935d243c718577b0b38c8450da8], you should have the following:
    - Working react app
    - Ability to deploy react app to Github Pages
    - `App` component that does initial setup and composes your other components
    - `NewTodo` component containing the form for a new Todo
    - `Todo` component containing HTML for a single Todo
    - CSS files for each component
    The next steps are:
    1. Make sure you rename any `class` attributes to `className`
    2. Add props to your `Todo` component
    - Will probably need the `id` and `text` at a minimum.
    - Render those props instead of having them hardcoded (to test, pass them when you create the component, i.e. <Todo id="123" text="test" />
    3. Add your AJAX GET call
    - Add a `constructor()` method to your `App` component and initialize `this.state` there with an empty `todos` array.
    - Make sure to call `super()` at the start of your constructor!
    - Use a `componentDidMount()` method in your `App` component and put your AJAX javascript there.
    - After the AJAX call is complete and successful, update `this.state.todos` with your new Todo items.
    4. Render `Todo` component for each Todo item.
    - Use `.map` and the syntax from the slides to loop through your todos and render a new `<Todo>` for each of them.
    - Make sure to pass a `key` attribute
    5. Add event methods for completing and deleting a ToDo
    - Attach them to the buttons using an `onClick` prop.
    - Add your AJAX for completing and deleting inside those methods
    - Be sure to add the `bind` call from the slides.
    - Update `this.state` if necessary
    6. Add event method for submitting new Todo form.
    - Attach to your form using an `onSubmit` prop.
    - Add your AJAX for adding new Todos inside the event method
    - Be sure to add the `bind` call from the slides
    - Don't forget `event.preventDefault()`
    - Update `state` with your new Todo.