GraphQL Editor Guide
Search…
React
How to use React inside JAMStack pages
You can use React inside our JAMStack engine.
components/Post
1
import React from 'https://cdn.skypack.dev/[email protected]'
2
3
export const Post = ({
4
avatar,
5
username,
6
sentence,
7
color = "indigo"
8
}) => <div className={`
9
flex
10
bg-white
11
p-10
12
shadow-md
13
space-x-4
14
transform
15
hover:scale-105
16
transition-transform
17
rounded-2xl
18
duration-200
19
cursor-pointer
20
mx-5
21
`}>
22
<div className="order-1">
23
<img className={`rounded-full ring-2 ring-${color}-500`} style={{ width: 50 }} src={avatar} />
24
</div>
25
<div className="order-2">
26
<div className="font-bold font-serif">
27
{username}
28
</div>
29
<p>{sentence}</p>
30
</div>
31
</div>
32
Copied!
index
1
import React from 'https://cdn.skypack.dev/[email protected]';
2
import ReactDOM from 'https://cdn.skypack.dev/[email protected]';
3
import {Post} from './components/Post.js'
4
5
const MainComponent = ({me,posts}) => {
6
return <div className="bg-gray-100 min-h-full pb-20">
7
<div className="container mx-auto p-5 space-y-2">
8
<div className="flex space-x-2">
9
<img className="w-6 rounded-full border-4 border-pink-300" src={me.avatar} />
10
<div>
11
Hello, <b className="font-serif">{me.username}</b>
12
</div>
13
</div>
14
</div>
15
<div
16
id="PostList"
17
className="container mx-auto space-y-5">
18
{posts.map(p => <Post username={p.Author.username} avatar={p.Author.avatar} sentence={p.sentence} color={p.Author.baseColor} />)}
19
</div>
20
</div>
21
}
22
export default async () =>{
23
const response = await Gql.query({
24
Twits: {
25
sentence: true,
26
Author: {
27
username: true,
28
avatar: true,
29
baseColor: true
30
},
31
},
32
Me: {
33
avatar: true,
34
username: true
35
}
36
})
37
38
const posts = response.Twits
39
const me = response.Me
40
const divek = document.createElement('div')
41
ReactDOM.render(<MainComponent posts={posts} me={me} />,divek)
42
return divek.innerHTML
43
}
Copied!
Code included in default function is used for Static Site Generation.
Last modified 6mo ago
Copy link