Skip to content

Instantly share code, notes, and snippets.

Created February 15, 2017 21:51
What would you like to do?
Let's rebuild the GithubGist interface with react !
// I leave out all the props & state, this is not the point here
// Level 1, can you directly grasp what's the page purpose?
// Assuming the component is in a "pages" folder, no need to append "Page" to it, it's all about context!
// Same apply for the Form component, the context says that we're here to create a new gist, no need to overthink the name.
// Putting the boring layout stuff into it's own component so you can focus on the page's domain.
const NewGist = () => (
<LastGistsNav />
<Form />
// Try to switch between and, see the common parts ?
const Layout = ({ children }) => (
<AppBar />
// Zoom-in, level 2! Let's dig inside the <Form />
// You can describe your gist and add multiple files, let's reflect these functionalities right into our components
const Form = () => (
<DescriptionField />
<FileEditorList />
<ToolBar />
// Zoom-in again, wow level 3, congratulations!
const ToolBar = () => (
<button>Add file</button>
<button>Create secret gist</button>
<button>Create public gist</button>
// At the same level, we can also take a look at the FileEditorList
const FileEditorList = ({ files }) => (
{ =>
<FileEditor {...files} />
// Ok it was a simple one, what does the FileEditor looks like ? We reached the level 4.
const FileEditor = ({ title, body }) => (
<ToolBar {...{ title }} /> {/* Notice, another ToolBar, but a different context! I like to make folders, subfolders to define the context */}
<Body value={body} />
// And so on until you find the Higgs boson...
// The end of the story is that your components should be self-describatory.
// When you start looking at your component and you don't understand right away what's going on,
// maybe it's time to extract the hard part and give it a name.
// Also think at the other humans that could read your code :)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment