Validate Component Input with Prop Types in React

Just to follow up, this shows up as a javascript error and could cause confusion and will eventually not work.

npm run start

bam@Johns-MacBook-Pro:~/.npm/_logs

0 info it worked if it ends with ok 1 verbose cli [ '/Users/bam/.nvm/versions/node/v7.0.0/bin/node', 1 verbose cli '/Users/bam/.nvm/versions/node/v7.0.0/bin/npm', 1 verbose cli 'run', 1 verbose cli 'start' ] 2 info using npm@5.0.4 3 info using node@v7.0.0 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info lifecycle todo_react@0.1.0~prestart: todo_react@0.1.0 6 silly lifecycle todo_react@0.1.0~prestart: no script for prestart, continuing 7 info lifecycle todo_react@0.1.0~start: todo_react@0.1.0 8 verbose lifecycle todo_react@0.1.0~start: unsafe-perm in lifecycle true 9 verbose lifecycle todo_react@0.1.0~start: PATH: /Users/bam/.nvm/versions/node/v7.0.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/bam/Documents/practice_work/todo_react/node_modules/.bin:/Users/bam/.rbenv/shims:/Users/bam/.rbenv/bin:/Users/bam/.nvm/versions/node/v7.0.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/usr/local/share/dotnet:/usr/local/git/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/bam/.fzf/bin 10 verbose lifecycle todo_react@0.1.0~start: CWD: /Users/bam/Documents/practice_work/todo_react 11 silly lifecycle todo_react@0.1.0~start: Args: [ '-c', 'react-scripts start' ] 12 info lifecycle todo_react@0.1.0~start: Failed to exec start script 13 verbose stack Error: todo_react@0.1.0 start: react-scripts start 13 verbose stack spawn ENOENT 13 verbose stack at ChildProcess.<anonymous> (/Users/bam/.nvm/versions/node/v7.0.0/lib/node_modules/npm/lib/utils/spawn.js:33:16) 13 verbose stack at emitTwo (events.js:106:13) 13 verbose stack at ChildProcess.emit (events.js:191:7) 13 verbose stack at maybeClose (internal/child_process.js:877:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5) 14 verbose pkgid todo_react@0.1.0 15 verbose cwd /Users/bam/Documents/practice_work/todo_react 16 verbose Darwin 16.6.0 17 verbose argv "/Users/bam/.nvm/versions/node/v7.0.0/bin/node" "/Users/bam/.nvm/versions/node/v7.0.0/bin/npm" "run" "start" 18 verbose node v7.0.0 19 verbose npm v5.0.4 20 error file sh 21 error code ELIFECYCLE 22 error errno ENOENT 23 error syscall spawn 24 error todo_react@0.1.0 start: react-scripts start 24 error spawn ENOENT 25 error Failed at the todo_react@0.1.0 start script. 25 error This is probably not a problem with npm. There is likely additional logging output above. 26 verbose exit [ 1, true ]

I just had to install react-scripts...

If anyone is interested, this is how I dealt with PropTypes (I did use prop-types package), but I also kept the stateless functional components. In addition, I am NOT using create-react-app: https://github.com/interglobalmedia/react-todo-app/commit/ab3053135cd490bb745c3c346ffd1df850369d73?diff=unified

Why is PropTypes depreacted? Is it cause of performance issues or what?

If you're using React 15.5.0 or higher, then you have to to import PropTypes first. Like this:

import React from 'react'
import PropTypes from 'prop-types'

export const TodoForm = (props) => (
  {/*code goes here.. */}
)

TodoForm.propTypes = {
  currentTodo:  PropTypes.string
}

Learn more about this here

Coming from years of Angular.... and.. honestly I am blown away by React. React enforces best practices such as presentational components naturally, and the code is just so much easier to work with. Angular's @input() / @output bindings are a huge mess compared to stateless functional components.