jgoux/App.jsx

## App.jsx
// 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 = () => (
  <Layout>
    <LastGistsNav />
    <Form />
  </Layout>
)

// Try to switch between https://gist.github.com/ and https://gist.github.com/discover, see the common parts ?
const Layout = ({ children }) => (
  <Page>
    <AppBar />
    {children}
    <Footer/>
  </Page>
)

// 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 = () => (
  <form>
    <DescriptionField />
    <FileEditorList />
    <ToolBar />
  </form>
)

// Zoom-in again, wow level 3, congratulations!
const ToolBar = () => (
  <div>
    <button>Add file</button>
    <button>Create secret gist</button>
    <button>Create public gist</button>
  </div>
)

// At the same level, we can also take a look at the FileEditorList
const FileEditorList = ({ files }) => (
  <div>
  {files.map(file =>
    <FileEditor {...files} />
  )}
  </div>
)

// Ok it was a simple one, what does the FileEditor looks like ? We reached the level 4.
const FileEditor = ({ title, body }) => (
  <div>
    <ToolBar {...{ title }} /> {/* Notice, another ToolBar, but a different context! I like to make folders, subfolders to define the context */}
    <Body value={body} />
  </div>
)

// 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 :)
	// 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 = () => (
	<Layout>
	<LastGistsNav />
	<Form />
	</Layout>
	)

	// Try to switch between https://gist.github.com/ and https://gist.github.com/discover, see the common parts ?
	const Layout = ({ children }) => (
	<Page>
	<AppBar />
	{children}
	<Footer/>
	</Page>
	)

	// 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 = () => (
	<form>
	<DescriptionField />
	<FileEditorList />
	<ToolBar />
	</form>
	)

	// Zoom-in again, wow level 3, congratulations!
	const ToolBar = () => (
	<div>
	<button>Add file</button>
	<button>Create secret gist</button>
	<button>Create public gist</button>
	</div>
	)

	// At the same level, we can also take a look at the FileEditorList
	const FileEditorList = ({ files }) => (
	<div>
	{files.map(file =>
	<FileEditor {...files} />
	)}
	</div>
	)

	// Ok it was a simple one, what does the FileEditor looks like ? We reached the level 4.
	const FileEditor = ({ title, body }) => (
	<div>
	<ToolBar {...{ title }} /> {/* Notice, another ToolBar, but a different context! I like to make folders, subfolders to define the context */}
	<Body value={body} />
	</div>
	)

	// 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 :)