![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
A JSX template engine
The vast majority of server side JSX tools end up turning into gigantic frameworks built against React or Svelt. What do you do if you just want to render html using JSX? No state management, no client side hydration, just plain old HTML generation.
Well there's template-jsx
, but it only supports syncronous function calls, and it renders when the elements are created. What if you want to defer rendering? What if you want to perform async IO? What if you want context passing?
That's where Essex comes in. Essex components do not render anything until you pass your component tree to the render()
function. They perform no state management, there's no hooks or eventing, and every component renders asyncronously.
This is not React
You cannot use React hooks with this code, you cannot use most React components with this code. I'm working on getting Emotion working with it, but even that will be limited. If you're building anything other than a static site generator or a progressively enhanced backend driven website, this probably isn't the right library for you. But if you ARE doing server-side rendering... you might find this useful.
Essex works seamlessly with @babel/preset-react
, all you need to do is tell Babel how to find the JSX runtime.
{
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
"runtime": "automatic",
"importSource": "essex",
},
],
]
}
import { compile } from "@mdx-js/mdx";
const __dirname = path.dirname((new URL(import.meta.url)).pathname);
const source = await fs.readFile(path.resolve(__dirname, 'markdown.mdx'));
const result = await compile(source, {
jsxRuntime: "automatic",
jsxImportSource: "essex"
});
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "essex",
//...
}
}
import { render } from 'essex';
function Title ({ title, date }) {
return <h1>{title}{date && <span>({date})</span>}</h1>
}
async function MyComponent () {
const res = await fetch("http://example.com/movie.json");
const data = await res.json();
return (
<div class="movie">
<Title title={data.title} date={data.releaseDate} />
<p>{data.description}</p>
</div>
)
}
const html = render(<MyComponent />);
Contexts can be created either as unique symbols only accessible with the original context, or they can be created as named properties available via this
.
Example 1:
import { createContext } from 'essex';
const MyContext = createContext('MyContext');
function App () {
return (
<MyContext.Provider value={{ foo: 'bar' }}>
<div>
<UIElement />
</div>
</MyContext.Provider>
)
}
function UIElement () {
const context = this.getContext(MyContext);
return <em>{context.foo}</em>
}
import { ContextProvider } from 'essex';
function App () {
return (
{/* NOTE: Some scope names are reserved for the parent Context prototype. */}
<ContextProvider scope="foo" value="bar">
<div>
<UIElement />
</div>
</MyContext.Provider>
)
}
function UIElement () {
return <em>{this.foo}</em>
}
Further documentation TBD
FAQs
A JSX template engine
The npm package essex receives a total of 1 weekly downloads. As such, essex popularity was classified as not popular.
We found that essex demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.