Moved blog

This blog has been copied and will continue at

http://fullstacksoftware.blog

My First React App - code review changes

Full Stack Software Development Blog

Fortunately for me a couple of guys on my team at work are fluent in React. I asked them to do a code review and got a lot of good feedback. As a result of the feedback the step-10-code-review-refactor branch at https://github.com/gpratte/react-todo-list has the following changes

• Use .jsx extension for components
• Use lodash for better performance for map, filter, etc.
• Consider using destructuring syntax to avoid constantly referencing state or props, e.g. const { foo, bar, baz } = this.state
• Use lodash for better performance for map, filter, etc.
• Consistently use arrow methods vs regular old functions
• Count should probably be in the component state
• Unless there are things like dashes/dots, quotes are unnecessary for object keys
• With ES2015 you could use template literal for text substitution
• Spelled concatenate wrong
• Avoid creating new functions in render, this is bad for scalability as each render will create new functions that need to be garbage collected

My First React App - a TODO list

Full Stack Software Development Blog

I previously blogged about coding the reactjs.org's tutorial.

Since then I watched Wes Bos' React For Beginners course.

The next step was to write my own react app from scratch - a todo list which can be found at https://github.com/gpratte/react-todo-list.

The stumbling blocks were

• handing events
• state and properties

I went back and reviewed these topics more than once in both the reactjs.org tutorial and the Wes Bos course.

I also read some articles found from internet searching (e.g. How to Display a List in React).

As is my modus operandi, when developing new code, I built up the tutorial on branches.

Here are the branches:

• step-01-create-development-environment
• step-02-ui-markup
• step-03-render-html
• step-04-add-todo
• step-05-remove-todo
• step-06-update-text
• step-07-concatinate-text
• step-08-mark-done
• step-09-hide-done