Validate Component Input with Prop Types in React
React gives us a mechanism called PropTypes to ensure that the property values passed into components are of the correct type. By ensuring the correct data is passed to our components, we can avoid potential bugs and more confidently share components with a team or as open source libraries.
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
}
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.