React has allowed the company to grow its development team from 1 React developer and 6 total frontend developers to 1 React developer and 40 total frontend developers over 11 months. The document discusses the learning curve for React, including an initial phase of hatred, then a phase of understanding how to properly structure applications using concepts like actions, stores, and unidirectional data flow. It emphasizes keeping components small and testable. The future of React is discussed, noting that while the framework continues to evolve and introduce changes, it does so without breaking existing code.
4. React.js?
The V from the MVC.
The rest? M? C?
Checkbox.jsx
import React from 'react';
import { Input } from 'react-bootstrap';
class Checkbox extends React.Component {
render() {
return (
<Input
{...this.props}
type='checkbox'
labelClassName='formControl'
label={this.props.label}
/>
);
}
}
Checkbox.propTypes = {
label: React.PropTypes.string
};
export default Checkbox;
5. React views can consume some data
passed via props.
You can use any framework to render the react view.
import React from 'react';
import ReactDOM from 'react-dom';
import Checkbox from './Checkbox.jsx';
ReactDOM.render(<Checkbox label='meetJS' />, 'body');
14. Knowing where to place my code
is definitely a big win.
- What to put inside the action?
- When to use props or state?
- Where to pour data into your app?
15. Old MVC habits can mislead you.
Treat the component like an instruction.
Components are the presentation of received data.
They can’t wait with executing callback after fired action.
17. One point of entry can be all you need.
Pass all necessary data at the top component and let the data
flow down the component tree, allowing child components
to align themselves.
Pass all “globals” at the top component.
18. PropTypes
are good for you.
Providing component
propTypes is one step
closer to build long
maintainable app.
./components/LoginForm.jsx
LoginForm.propTypes = {
isAuthenticating: React.PropTypes.bool,
email: React.PropTypes.string,
focusedElement: React.PropTypes.string,
errorMessages: React.PropTypes.shape({
password: React.PropTypes.string,
email: React.PropTypes.string
}),
onValidationSuccess: React.PropTypes.func,
onValidationFailure: React.PropTypes.func
};
19. You can always tell how component will
render based on the input
PropTypes are defining the input data of the component with
validation.
Warning: Failed propType: Required prop `appId` was
not specified in `FacebookScript`. Check the render method of `Login`.
20. Forgetting about propTypes definition is
not a problem with a little help
of eslint-react plugin.
5:50 error 'baseUrl' is missing in props validation react/prop-types
21. STACK EVOLUTION
IT’S A GOOD TIME TO START WRITING IN REACT,
BUT IT WASN’T ALWAYS THAT GOOD.
24. ./test/unit/mocha.opts
--slow 5
--reporter dot
--recursive
--require ./test/unit/setup.js
--require ./test/throwOnWarnings.js
--compilers jsx:./test/babelCompiler.js
./package.json
"scripts": {
"test:unit": "NODE_ENV=test mocha test/unit --opts test/unit/mocha.opts"
}
command line:
npm run test:unit
Our working unit test
stack example.
25. ./test/throwOnWarnings.js
const consoleError = console.error;
console.error = function (firstMessage, ...rest) {
if (firstMessage.startsWith('Warning:')) {
throw new Error(`Unexpected React Warning: ${firstMessage}`);
}
return consoleError(firstMessage, ...rest);
};
Never forget
about React warnings.
26. ./test/throwOnWarnings.js
const hooks = require.extensions;
const extensions = Object.keys(hooks);
const limit = 15;
let count = 0;
extensions.forEach(function (extension) {
const originalHook = hooks[extension];
require.extensions[extension] = function (module, filename) {
if (filename.endsWith('node_modules/unwantedLibrary/index.js')) {
count += 1;
}
return originalHook(module, filename);
};
});
Made a mistake
in introducing
some lib?
27. ./test/throwOnWarnings.js
process.on('exit', function () {
const diff = count - limit;
if (count > 0) {
console.log('Number of unwantedLibrary usages:', count);
}
if (diff > 0) {
throw new Error(
`The number of unwantedLibrary usages has been increased by ${diff}`
);
}
});
Restrict it usage!
Remove usages
and decrease
the limit over time.
31. Keeping the components small is the key.
Testing small component is a beautiful thing.
Isolating some parts of well determined behaviour allows you
to control the component only by changing input data and
testing the results.
33. Two ways of Reacting.
2. Stateful components
Why? Extendable.
./stateful/Header.jsx
import { detectSomething } from '../../lib/detectors';
class Header extends React.Component {
render() {
const link = detectSomething(this.props.baseUrl) === 'meetJS'
? '/meetRegistration' : '/leave';
return (
<header>
<h1>Register</h1>
<a href={link} className='register-link'>Register now</a>
</header>
);
}
}
34. THE FUTURE OF
REACT
We have started knowing react when he was 0.13.0
Now he is 0.14.7 - what changed?
35. React is evolving.
He is kind enough not to break our code.
Every version introduces some changes, but they are well
described, showing developers that things will change.
This gave us some time, to remove more than 200 warnings
from our code, before version changed. Now we have 0.
36. React announced its stability.
In a strange way.
From the begining
people were expecting the final version 1.0.0
38. SO… why we react?Artur Szott
@arturszott
Simplicity (after some trials and errors)
Testability (after learning finding good tools and setup)
Performance (haven’t encountered bottlenecks as fast as with backbone)
39. Bonus.
Inspire yourself by reading following articles:
Artur Szott
@arturszott
JSX looks like abomination, but it’s good for you.
https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918
9 things every React.js beginner should know
https://camjackson.net/post/9-things-every-reactjs-beginner-should-know
Using React is a Business Decision, Not a Technology Choice
https://blog.formidable.com/using-react-is-a-business-decision-not-a-technology-choice-
63c4641c5f7
40. The end.
You can work with me at HolidayCheck.
github.com/holidaycheck/jobs
Artur Szott
@arturszott
Photo: https://twitter.com/notbrent/status/696091475256352768 | Backgrounds: Unsplash.com