const Component = () => (
<div>
<h1 className="title">Hello, world!</h1>
<img src={user.avatarUrl} />
</div>
);
- v1.0.0-latest-prod
Here we cover the technologies used in the starter app.
The JavaScript framework built by Facebook. Their docs.
Next.js is a React Framework that provides abstractions for handling
code bundling and compiling
server side and static rendering
production-build code optimizations
The compilation part is very important for developer quality-of-life while the server-side and static rendering matter primarily for SEO. A JavaScript compiler let’s us right code using TypeScript, JSX, and the latest ECMAScript standard.
This is the JavaScript specification. Older browsers will use an older version, while newer browsers are inconsistent in how much they implement of the newer specs. The compiler will transform the syntax to be compatible with the lowest-common denominator and add polyfills for missing features in older browsers. This let’s us use the latest and greatest while developing without needing to think too much about browser compatibility, as far as JS goes.
JSX is a syntax extension for JavaScript that let’s us write JS like it’s HTML. Under-the-hood, everything is a JS object. A big advantage with this is not just the convenience of the more familiar HTML-ish syntax, but it also gives us all the power of JS for custom logic.
const Component = () => (
<div>
<h1 className="title">Hello, world!</h1>
<img src={user.avatarUrl} />
</div>
);const H1 = React.createElement(
'h1',
{className: 'title'},
'Hello, world!'
);
const Img = React.createElement(
'img',
{src: user.avatarUrl}
)
const Content = React.createElement(
'div',
null,
[H1, Img]
);<div>
<h1 class="title">
Hello, world!
</h1>
<img th:src="${user.avatarUrl}" />
</div>We’re using Jest and the React Testing Library for unit testing. We plan on adding Cypress for functional testing. See the Testing doc for more info.
We’re using TailwindCSS and PostCSS. See Style Sheet Best Practices for more info.