Web development technology for the component era
Web components are based on existing web standards. They enable web developers to extend HTML with new elements with encapsulated styling and custom behavior.
React code is made of entities called components. Components can be rendered to a particular element. A component is the core building block of a React application. Every component resides in the same space, but works independently from one another and merges all them in a parent component, which is the final UI of the application."
React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with cohesive components that contain both.
Markdown is a faster way of creating and maintaining web site content. It is a HTLM abstraction that is compiled to web standard HTML
John Gruber published the original Markdown Syntax Guide. Different flavors of Markdown have evolved since then.
"Markdown is a better way to write HTML. It is compiled into HTML at deploy time. Markdown is a lightweight plaintext markup language used to add formatting elements to documents. Markdown is now one of the world’s popular markup languages. Using Markdown is different from using a WYSIWYG editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown is not like that. In a Markdown-formatted file. Markdown syntax is added to the text to indicate which words and phrases look different."
Markdown has been characterized by an informal specification and a reference implementation for conversion to HTML. Over time, many Markdown implementations have appeared. They are driven by the need for additional features like tables, footnotes, definition lists, and HTML inside Markdown blocks. The behavior of additional features diverge from the reference implementation and informal specification, and have attracted attention. Not all flavors of Markdown are compatible or supported by all frameworks.
I'm hesitant creating web site content without using a version of Markdown. My preference is using MDX.
MDX is Markdown for the component era. It enables writing JSX directly in Markdown documents. This enables writing content containing components like tables, footnotes, and writing your own components without creating another Markdown implementation.
❤️ Powerful: MDX blends markdown and JSX syntax to fit perfectly in React/JSX-based projects.
💻 Everything is a component: Use existing components inside MDX file and import other MDX files as plain components.
🔧 Customizable: Decide which component is rendered for each markdown element.
📚 Markdown-based: The simplicity and elegance of markdown remains, JSX is interleaved when you want to.
🔥 Blazingly blazing fast: MDX has no runtime, all compilation occurs during the build stage."
"When working with Gatsby.js, the built-in command line interface (CLI) is used. This essential tool allows do things like creating new projects from starters, launching a dev server with hot-reloading, and generating production builds.
The Gatsby CLI tool lets you quickly create new Gatsby-powered sites and run commands for developing Gatsby sites. It is a published npm package. The Gatsby CLI is available via npm and should be installed globally by running: npm install -g gatsby-cli"
"MDX is Markdown for the component era enabling writing JSX embedded inside Markdown. This combination allows using Markdown’s terse syntax (such as # Heading) for content and JSX for more advanced or reusable components."
MDX makes writing with Markdown and JSX simpler while being more expressive. Writing is fun again when you combine components, that can even be dynamic or load data, with the simplicity of Markdown for long-form content."
"At times you will want to be able to edit your website’s navigation in response to a change in requirements. To achieve this, you can use Gatsby to dynamically generate your navigation. "