nullstack.github.io/docs/renderable-components.html at translation · devhector/nullstack.github.io

History

309 lines (265 loc) · 83.3 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

<!DOCTYPE html>

<html>

<head>

<title>Renderable Components - Nullstack</title>

</head>

<body>

<div id="application"><main class="light bgm1 cm3"><header class="x12 pftl bgm1 bs2"><div class="x xsb yy p5y"><div class="sm-x12 sm-xsb sm-p4x yy"><a title="Nullstack" href="/"><svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 511.5039 113.7368"><title> Nullstack </title><path d="M13.2736,39.964H28.7009v9.8922a20.3919,20.3919,0,0,1,7.743-8.479,21.2792,21.2792,0,0,1,11.2172-3.0031q7.36,0,11.3349,4.1218t3.9745,11.6588a48.9655,48.9655,0,0,1-1.06,8.8913l-8.3025,42.8665H36.3556L44.187,65.7546a31.2306,31.2306,0,0,0,.5888-5.5939q0-7.6542-6.3593-7.6547a10.7348,10.7348,0,0,0-8.4791,4.3278q-3.5922,4.328-5.0639,12.0415l-7.1248,37.0372H.4961Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M81.4691,107.62q-7.2426,0-11.2466-4.1807t-4.004-11.8943a46.3965,46.3965,0,0,1,1.001-8.6557L75.64,39.964H92.7746L85.0609,80.24a29.8175,29.8175,0,0,0-.5888,5.5938q0,7.6551,6.4771,7.6548A10.3547,10.3547,0,0,0,99.2811,89.19q3.4446-4.2978,4.9756-12.0709L111.44,39.964h17.1348l-12.7775,65.9485H100.37V96.138a18.7565,18.7565,0,0,1-7.4781,8.3908A21.4849,21.4849,0,0,1,81.4691,107.62Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M150.2958,113.7368q-11.4821,0-16.7815-3.3563t-5.2995-10.5989a43.049,43.049,0,0,1,1.1188-8.3613l11.9532-56.6451H123.2687l2.532-13.2486h35.2118L146.2918,92.4213q-.1767.825-.3238,1.7371a10.5763,10.5763,0,0,0-.1473,1.6781q0,4.6521,8.2436,4.6517h16.3694l-2.65,13.2486Z" transform="translate(-0.4961)" fill="#d22365"></path><path d="M181.897,92.21q-11.4822,0-16.7816-3.3563T159.816,78.255a43.0455,43.0455,0,0,1,1.1187-8.3613l11.9532-56.6451H154.87L157.4018,0h35.2118L177.8929,70.8947q-.1765.8248-.3238,1.737a10.5766,10.5766,0,0,0-.1472,1.6782q0,4.6519,8.2435,4.6517h16.3694l-2.65,13.2486Z" transform="translate(-0.4961)" fill="#d22365"></path><path d="M228.3106,107.62a72.47,72.47,0,0,1-23.6119-4.1218l3.003-15.0739q10.5988,6.7717,21.6688,6.7715,6.4176,0,10.0983-2.2965a7.1387,7.1387,0,0,0,3.68-6.3593,4.4873,4.4873,0,0,0-1.8253-3.8273q-2.3556-1.884-9.5979-3.9452l-5.1817-1.4132q-13.8969-3.8271-13.8963-16.9582a18.9819,18.9819,0,0,1,8.0375-16.0455q8.0374-5.976,22.4637-5.9766a60.6829,60.6829,0,0,1,10.1573.8538,63.0434,63.0434,0,0,1,10.5105,2.797L260.8727,56.981a33.7,33.7,0,0,0-19.3724-6.3q-5.9478,0-9.3623,2.09a6.2659,6.2659,0,0,0-3.4152,5.5056,5.102,5.102,0,0,0,2.2375,4.2984q2.4731,1.7082,9.6568,3.7685l4.3573,1.2365q7.4775,2.12,10.9816,6.271t3.5035,10.805q0,10.7172-8.2436,16.84T228.3106,107.62Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M297.9546,106.2069q-11.3055,0-16.6932-3.3857t-5.3878-10.57a47.7847,47.7847,0,0,1,1.06-8.3613l5.9472-30.6778H265.9813l2.532-13.2486h16.8993l3.5918-18.7247h17.2527L302.6063,39.964h22.5521l-2.532,13.2486h-22.552l-6.1827,31.6788A20.2915,20.2915,0,0,0,293.48,88.13a3.9534,3.9534,0,0,0,1.9431,3.68q1.9433,1.1482,6.2416,1.1482h13.2486l-2.532,13.2486Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M338.2138,107.62q-9.4224,0-14.6029-5.1228-5.1828-5.1228-5.1816-14.25,0-12.2469,9.3034-18.99t26.2617-6.7421h11.3643l.4711-2.8852a3.6427,3.6427,0,0,1,.1177-.7066v-1.001A5.6271,5.6271,0,0,0,362.974,52.8q-2.9748-1.7666-8.5086-1.7665a41.5275,41.5275,0,0,0-10.8933,1.59,85.9338,85.9338,0,0,0-13.3074,5.0639l2.7675-14.7206a74.3941,74.3941,0,0,1,24.6129-4.5929q12.07,0,18.6363,4.6518,6.5643,4.652,6.5655,13.72a36.323,36.323,0,0,1-.4711,5.5939q-.4716,3.003-1.1188,5.9471l-7.2425,37.626H358.47v-7.36A26.3115,26.3115,0,0,1,338.2138,107.62Zm7.1837-11.8354q6.476,0,11.2466-5.6822t6.3-15.3978h-6.6537q-19.9029,0-19.9023,12.13a8.3352,8.3352,0,0,0,9.009,8.95Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M415.1828,107.62q-13.72,0-21.1683-7.4192t-7.4486-21.4333a42.63,42.63,0,0,1,5.005-20.8444,36.7663,36.7663,0,0,1,13.9257-14.338,40.3978,40.3978,0,0,1,20.7562-5.2111A39.0215,39.0215,0,0,1,445.8607,43.32l-3.1208,15.78a22.7112,22.7112,0,0,0-16.075-6.7126,21.2393,21.2393,0,0,0-11.8059,3.2974A22.52,22.52,0,0,0,406.88,64.783a29.416,29.416,0,0,0-2.8853,13.278q0,8.0083,3.4741,11.7765T417.95,93.606q8.8324,0,19.3724-6.1238l-3.2974,16.2516A45.998,45.998,0,0,1,415.1828,107.62Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M458.1224,14.2911H475.375l-8.95,46.0463L490.2134,39.964H512L482.2643,64.5769l18.43,41.3356H482.382L469.31,75.058l-6.83,5.6527-4.8284,25.2018H440.3987Z" transform="translate(-0.4961)" fill="#2d3748"></path></svg></a><svg height="20" class="cm3" viewBox="0 0 512 512"><rect x="10" y="10" width="492" height="90.4043" rx="17.383" stroke-width="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><rect x="10" y="411.5957" width="492" height="90.4043" rx="17.383" stroke-width="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><rect x="10" y="210.7979" width="492" height="90.4043" rx="17.383" stroke-width="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect></svg></div><nav class="menu-links yy sm-p4 sm-off"><a href="/documentation" class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> Documentation </a><a href="/components" class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> Components </a><a href="/contributors" class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> Contributors </a><a href="https://github.com/nullstack/nullstack" target="_blank" rel="noopener" class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> Source </a><a href="/pt-br" class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> Português </a><button class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> Night Mode </button></nav><div class="sm-x12 sm-p4x sm-off"><a href="/getting-started" class="xx sm-x12 bci1 bgi1 bgm1:h cm1 ci1:h p4x p2y">Get Started</a></div></div></header><section class="x sm-p4x sm-p10y md+p20y"><h1 class="x12 sm-fs6 md+fs8 m6b"> Renderable Components </h1><article>The simplest component you can make is a renderable component.

Renderable components are very similar to web components, they give you the ability to create new HTML tags that shortcut a group of other HTML tags.

Create a file in your src folder with the name of your component and the <a href="/njs-file-extension">njs extension</a>.

In this example it is going to be called HelloWorld.njs.

All you have to do is to import Nullstack or any of its subclasses and extend your class from it, define an instance method called render that returns any JSX, and export the component.

✨ Install the official <a href="https://marketplace.visualstudio.com/items?itemName=ChristianMortaro.vscode-nullstack" target="_blank" rel="noopener">Nullstack VSCode Extension</a> to generate classes with a snippet.

</blockquote>

<pre><code class="language-jsx">import Nullstack from 'nullstack';

class HelloWorld extends Nullstack {

render() {

return (

<div> Hello World </div>

)

}

export default HelloWorld;

</code></pre>

The code above is just declaring the component, you still have to use it.

Importing the component in your application gives you the ability to use a new tag in your render.

This tag will be replaced with whatever you returned in your component render.

import './Application.scss';

import HelloWorld from './HelloWorld';

class Application extends Nullstack {

// ...

render({page}) {

return (

<main>

<h1> {page.title} </h1>

<a href="https://nullstack.app/documentation" target="_blank"> Read the documentation </a>

</main>

)

}

export default Application;

</code></pre>

<h2 id="using-html-attributes"><a href="#using-html-attributes">Using HTML attributes</a></h2>Nullstack JSX deviates a little from the spec.

You can use the normal HTML attributes like <code>class</code> and <code>for</code> directly.

<pre><code class="language-jsx"><label for="input" class="dont-label-me"> I am a label </label>

</code></pre>

<h2 id="headless-components"><a href="#headless-components">Headless components</a></h2>If you want to skip rendering the component at all you can simply return <code>false</code> from the render.

class Headless extends Nullstack {

render() {

return false;

}

export default Headless;

</code></pre>

This will allocate DOM space for when you decide to render markup there.

This is also useful for conditional rendering.

If all you want to do is to generate an invisible component you can skip defining the render method at all.

<h2 id="inner-components"><a href="#inner-components">Inner components</a></h2>Instead of creating a new component just to organize code-splitting, you can create an inner component.

Inner components are any method that the name starts with <code>render</code> followed by an uppercase character.

Inner components share the same instance and scope as the main component, therefore, are very convenient to avoid problems like props drilling.

To invoke the inner component use a JSX tag with the method name without the <code>render</code> prefix.

class Post extends Nullstack {

renderArticle() {

return (

<article> Content </article>

)

}

renderAside() {

return (

<aside> Related content </aside>

)

}

render() {

return (

<div>

</div>

)

}

export default HelloWorld;

</code></pre>

💡 Nullstack will inject a constant reference to the function at transpile time in order to completely skip the runtime lookup process!

</blockquote>

<h2 id="boolean-attributes"><a href="#boolean-attributes">Boolean attributes</a></h2>Attributes can be assigned as a boolean.

When the value is <code>false</code> the attribute will not be rendered at all.

When the value is <code>true</code> it will be rendered as a boolean attribute without a string value.

<pre><code class="language-jsx"><button disabled={false}> Button </button>

</code></pre>

You can shortcut attributes when you know the value will always be true.

</code></pre>

✨ Learn more about <a href="/context">attributes</a>.

</blockquote>

<h2 id="element-tag"><a href="#element-tag">Element tag</a></h2>If you need to decide the tag name at runtime, you can use the element tag and set the tag attribute conditionally.

some arbitrary text

</element>

</code></pre>

When the tag attribute is omitted, Nullstack will default to a <code>div</code>.

<h2 id="svg-elements"><a href="#svg-elements">SVG Elements</a></h2>SVG can be used as if it were any regular HTML tag.

You can manipulate the SVG using attributes and events normally.

</svg>

</code></pre>

✨ Learn more about <a href="/stateful-components">events</a>.

</blockquote>

<h2 id="components-with-children"><a href="#components-with-children">Components with children</a></h2>Your component can be invoked passing a block of content.

<h1> Hello World </h1>

</Header>

</code></pre>

This doesn't automatically render the block since it wouldn't know where to place it.

You can destructure the children on the render method and place it in your markup.

class Header extends Nullstack {

render({children}) {

return (

<div>{children}</div>

)

}

export default Header;

</code></pre>

✨ This is possible because the <code>children</code> key is part of the <a href="/context#the-available-instance-client-keys-are-">instance context</a>.

</blockquote>

<h2 id="lists"><a href="#lists">Lists</a></h2>You can map over lists without declaring a <code>key</code>.

Lists that may change length must be wrapped in a parent element just for them.

{list.map((item) => <li>{item.name}</li>)}

</ul>

</code></pre>

You can emulate a fixed-size list by returning <code>false</code> instead of an element to reserve dom space.

<pre><code class="language-jsx">{list.map((item) => (

item.visible ? <div>{item.name}</div> : false

)}

</code></pre>

It's a nice practice to use inner components combined with lists to clean up your code.

class List extends Nullstack {

items = [

{visible: true, number: 1},

{visible: false, number: 2},

]

renderItem({visible, number}) {

if(!visible) return false;

return (

<li> {number} </li>

)

}

render() {

return (

<ul>

{this.items.map((item) => <Item {...item} />)}

</ul>

)

}

export default List;

</code></pre>

✨ Sometimes you will notice keys in the map. Learn more about the <a href="/instance-self#instance-key">instance key</a>.

</blockquote>

<h2 id="inner-html"><a href="#inner-html">Inner HTML</a></h2>You can set the inner HTML of an element with the <code>html</code> attribute.

Links inside the HTML string will be replaced with <a href="/routes-and-params">routable anchors</a>.

content = `

Check this other post

</a>

`;

render() {

return (

)

}

export default Post;

</code></pre>

🔥 Be careful! When using user-generated HTML you are in risk of script injection

</blockquote>

<h2 id="the-head-tag"><a href="#the-head-tag">The head tag</a></h2>Renderable components can render inside the <code>head</code> tag an unlimited number of times at any depth of the application.

The <code>head</code> tag will only be updated during the <a href="/server-side-rendering">server-side rendering</a> process and changes will be ignored after the <a href="/full-stack-lifecycle">hydration</a> process.

// ...

render() {

return (

<main>

<div>

<head>

</head>

</div>

<head>

</head>

</main>

)

}

export default Application;

</code></pre>

🔥 You should not use the <code>head</code> tag to update <a href="/context-page">metatags</a> that Nullstack already controls

</blockquote>

<h2 id="next-step"><a href="#next-step">Next step</a></h2>⚔ Add state to your component using <a href="/stateful-components">stateful components</a>.

</article></section><footer class="xx m20t"><div class="x xr md+bcm2t yy md+p10y prtl"><a href="/waifu"><img src="/nullachan.png" alt="Nulla-Chan" title="Nulla-Chan: Nullstack's official waifu" class="pabl sm-p2l" height="160" loading="lazy"/></a><nav class="xr sm-x4 yy"><a href="https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww" rel="noopener" target="_blank" class="sm-xr sm-m1y sm-x12 md+bci1 sm-bcm2t sm-p4t ci1 md+cm1:h md+bgi1:h p4x p2y md+m2x">YouTube</a><a href="https://twitter.com/nullstackapp" rel="noopener" target="_blank" class="sm-xr sm-m1y sm-x12 md+bci1 sm-bcm2t sm-p4t ci1 md+cm1:h md+bgi1:h p4x p2y md+m2x">Twitter</a><a href="https://github.com/nullstack" rel="noopener" target="_blank" class="sm-xr sm-m1y sm-x12 md+bci1 sm-bcm2t sm-p4t ci1 md+cm1:h md+bgi1:h p4x p2y md+m2x">GitHub</a></nav></div></footer></main></div>

window.page = {"image":"/image-1200x630.png","status":200,"title":"Renderable Components - Nullstack","description":"Renderable components are very similar to web components they give you the ability to create new HTML tags that shortcut a group of other HTML tags"};

window.environment = {"client":false,"server":true,"development":false,"production":true,"static":true,"key":"9cdb5778f42a90a83e1427c9316c97d3"};

window.settings = {};

window.worker = {"enabled":true,"fetching":false,"preload":["/404","/about","/application-startup","/context-data","/context-environment","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/documentation","/components","/about","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2","/nullachan.png"],"headers":{},"queues":{},"online":true,"responsive":true};

window.params = {"slug":"renderable-components"};

window.project = {"type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","favicon":"/favicon-96x96.png","icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"disallow":[],"sitemap":true,"cdn":"","protocol":"https","name":"Nullstack","domain":"nullstack.app","color":"#d22365","backgroundColor":"#2d3748"};

window.context = {"mode":"light","oppositeMode":"dark"};

document.addEventListener('DOMContentLoaded', () => {

const script = window.document.createElement('script');

script.src = '/client-9cdb5778f42a90a83e1427c9316c97d3.js';

script.integrity = 'sha512-0uTc8acdgpOj0RrKj5FnYwXRpLXfqL4nWm0UipWJa7V9rarS5OyTT9S0p5UfMcWCCauR+1Jr68bzB5jKk/CKEA==';

script.crossOrigin = 'anonymous';

document.body.append(script);

});

</script>

</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

renderable-components.html

Latest commit

History

renderable-components.html

File metadata and controls