Kent C. Dodds kentcdodds

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

Turning Off Github Issues

My friend Michael Jackson turned off github issues on one of his smaller projects. It got me thinking...

Maintainers getting burned out is a problem. Not just for the users of a project but the mental health of the maintainer. It's a big deal for both parties. Consumers want great tools, maintainers want to create them, but maintainers don't want to be L1 tech support, that's why they

Faster JavaScript with SliceJS 🍕

This gist is for my talk Faster JavaScript.

Rendering a function with React

No, this isn't about render props

I'm going to clean this up and publish it in my newsletter next week!

Context

So react-i18n (not the npm one... one we made at PayPal internally) has this

ESM modules in node: npm edition

The proposal you’re about to read is not just a proposal. We have a working implementation of almost everything we discussed here. We encourage you to checkout and build our branch: our fork, with the relevant branch selected. Building and using the implementation will give you a better understanding of what using it as a developer is like.

Our implementation ended up differing from the proposal on some minor points. As our last action item before making a PR, we’re writing documentation on what we did. While I loathe pointing to tests in lieu of documentation, they will be helpful until we complete writing docs: the unit tests.

This repo also contains a bundled version of npm that has a new command, asset. You can read the documentation for and goals of that comma

	exports.config = {
	// The address of a running selenium server.
	seleniumAddress: 'http://localhost:4444/wd/hub',

	// Capabilities to be passed to the webdriver instance.
	capabilities: {
	// 'browserName': 'internet explorer', - special installation needed
	// 'version':'10',
	'browserName': 'chrome',
	//'browserName': 'firefox'

	// In v2/3 you did this:
	import ReactDOM from 'react-dom'
	import { Router, browserHistory, Route } from 'react-router'

	ReactDOM.render(
	<Router>
	<Route path="/about" component={About}/>
	<Route path="/:username" component={User}/>
	</Router>
	)

	// ugly way

	var obj = {
	a: 1,
	b: 2,
	c: 3,
	[Symbol.iterator]() {
	var keys = Object.keys(this);
	var idx = 0;
	return {

	<body>
	<div id="⚛️"></div>
	<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
	<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/[email protected]/babel.js"></script>
	<script type="text/babel">
	ReactDOM.render(<div>Hello World!</div>, document.getElementById('⚛️'))
	</script>
	</body>

	// Which of these things is the "Higher Order Component?"

	function withFoo(Component) { // <-- this is a function, not a component
	class Wrapper extends React.Component { // <-- this is a component
	static displayName = `withFoo(${Component.displayName \|\| Component.name})`
	static propTypes = {innerRef: PropTypes.func}
	static WrappedComponent = Component
	render() {
	const {innerRef, ...remainingProps} = this.props
	return <Component {...remainingProps} foo="FOO!" ref={innerRef} />