Skip to content

Commit d8c2851

Browse files
yamalightyamalight
committed
Add official react server components demo
0 parents  commit d8c2851

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+9843
-0
lines changed

‎server-components-demo/.gitignore

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
/dist
14+
15+
# notes
16+
notes/*.md
17+
18+
# misc
19+
.DS_Store
20+
.eslintcache
21+
.env
22+
.env.local
23+
.env.development.local
24+
.env.test.local
25+
.env.production.local
26+
27+
npm-debug.log*
28+
yarn-debug.log*
29+
yarn-error.log*
30+
31+
# vscode
32+
.vscode

‎server-components-demo/.prettierignore

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# dependencies
2+
/node_modules
3+
/.pnp
4+
.pnp.js
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
/dist
12+
13+
# misc
14+
.DS_Store
15+
.eslintcache
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
*.html
26+
*.json
27+
*.md

‎server-components-demo/.prettierrc.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
*/
8+
9+
'use strict';
10+
11+
module.exports = {
12+
arrowParens: 'always',
13+
bracketSpacing: false,
14+
singleQuote: true,
15+
jsxBracketSameLine: true,
16+
trailingComma: 'es5',
17+
printWidth: 80,
18+
};

‎server-components-demo/CODE_OF_CONDUCT.md

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# Code of Conduct
2+
3+
## Our Pledge
4+
5+
In the interest of fostering an open and welcoming environment, we as
6+
contributors and maintainers pledge to make participation in our project and
7+
our community a harassment-free experience for everyone, regardless of age, body
8+
size, disability, ethnicity, sex characteristics, gender identity and expression,
9+
level of experience, education, socio-economic status, nationality, personal
10+
appearance, race, religion, or sexual identity and orientation.
11+
12+
## Our Standards
13+
14+
Examples of behavior that contributes to creating a positive environment
15+
include:
16+
17+
* Using welcoming and inclusive language
18+
* Being respectful of differing viewpoints and experiences
19+
* Gracefully accepting constructive criticism
20+
* Focusing on what is best for the community
21+
* Showing empathy towards other community members
22+
23+
Examples of unacceptable behavior by participants include:
24+
25+
* The use of sexualized language or imagery and unwelcome sexual attention or
26+
advances
27+
* Trolling, insulting/derogatory comments, and personal or political attacks
28+
* Public or private harassment
29+
* Publishing others' private information, such as a physical or electronic
30+
address, without explicit permission
31+
* Other conduct which could reasonably be considered inappropriate in a
32+
professional setting
33+
34+
## Our Responsibilities
35+
36+
Project maintainers are responsible for clarifying the standards of acceptable
37+
behavior and are expected to take appropriate and fair corrective action in
38+
response to any instances of unacceptable behavior.
39+
40+
Project maintainers have the right and responsibility to remove, edit, or
41+
reject comments, commits, code, wiki edits, issues, and other contributions
42+
that are not aligned to this Code of Conduct, or to ban temporarily or
43+
permanently any contributor for other behaviors that they deem inappropriate,
44+
threatening, offensive, or harmful.
45+
46+
## Scope
47+
48+
This Code of Conduct applies within all project spaces, and it also applies when
49+
an individual is representing the project or its community in public spaces.
50+
Examples of representing a project or community include using an official
51+
project e-mail address, posting via an official social media account, or acting
52+
as an appointed representative at an online or offline event. Representation of
53+
a project may be further defined and clarified by project maintainers.
54+
55+
## Enforcement
56+
57+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
58+
reported by contacting the project team at <[email protected]>. All
59+
complaints will be reviewed and investigated and will result in a response that
60+
is deemed necessary and appropriate to the circumstances. The project team is
61+
obligated to maintain confidentiality with regard to the reporter of an incident.
62+
Further details of specific enforcement policies may be posted separately.
63+
64+
Project maintainers who do not follow or enforce the Code of Conduct in good
65+
faith may face temporary or permanent repercussions as determined by other
66+
members of the project's leadership.
67+
68+
## Attribution
69+
70+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71+
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72+
73+
[homepage]: https://www.contributor-covenant.org
74+
75+
For answers to common questions about this code of conduct, see
76+
https://www.contributor-covenant.org/faq

‎server-components-demo/Dockerfile

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
FROM node:14.15.3
2+
3+
WORKDIR /opt/notes-app
4+
5+
COPY package.json package-lock.json ./
6+
7+
RUN npm install
8+
9+
COPY . .
10+
11+
ENTRYPOINT [ "npm", "run" ]
12+
CMD [ "start" ]

‎server-components-demo/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) Facebook, Inc. and its affiliates.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎server-components-demo/README.md

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
# React Server Components Demo
2+
3+
* [What is this?](#what-is-this)
4+
* [When will I be able to use this?](#when-will-i-be-able-to-use-this)
5+
* [Setup](#setup)
6+
* [DB Setup](#db-setup)
7+
+ [Step 1. Create the Database](#step-1-create-the-database)
8+
+ [Step 2. Connect to the Database](#step-2-connect-to-the-database)
9+
+ [Step 3. Run the seed script](#step-3-run-the-seed-script)
10+
* [Notes about this app](#notes-about-this-app)
11+
+ [Interesting things to try](#interesting-things-to-try)
12+
* [Built by (A-Z)](#built-by-a-z)
13+
* [Code of Conduct](#code-of-conduct)
14+
* [License](#license)
15+
16+
## What is this?
17+
18+
This is a demo app built with Server Components, an experimental React feature. **We strongly recommend [watching our talk introducing Server Components](https://reactjs.org/server-components) before exploring this demo.** The talk includes a walkthrough of the demo code and highlights key points of how Server Components work and what features they provide.
19+
20+
## When will I be able to use this?
21+
22+
Server Components are an experimental feature and **are not ready for adoption**. For now, we recommend experimenting with Server Components via this demo app. **Use this in your projects at your own risk.**
23+
24+
## Setup
25+
26+
You will need to have nodejs >=14.9.0 in order to run this demo. [Node 14 LTS](https://nodejs.org/en/about/releases/) is a good choice!
27+
28+
```
29+
npm install
30+
npm start
31+
```
32+
33+
(Or `npm run start:prod` for a production build.)
34+
35+
Then open http://localhost:4000.
36+
37+
The app won't work until you set up the database, as described below.
38+
39+
<details>
40+
<summary>Setup with Docker</summary>
41+
<p>You can also start dev build of the app by using docker-compose.</p>
42+
<p>Make sure you have docker and docker-compose installed then run:</p>
43+
<pre><code>docker-compose up</code></pre>
44+
<h4>Running seed script</h4>
45+
<p>1. Run containers in the detached mode</p>
46+
<pre><code>docker-compose up -d</code></pre>
47+
<p>2. Run seed script</p>
48+
<pre><code>docker-compose exec notes-app npm run seed</code></pre>
49+
</details>
50+
51+
## DB Setup
52+
53+
This demo uses Postgres. First, follow its [installation link](https://wiki.postgresql.org/wiki/Detailed_installation_guides) for your platform.
54+
55+
Alternatively, you can check out this [fork](https://github.com/pomber/server-components-demo/) which will let you run the demo app without needing a database. However, you won't be able to execute SQL queries (but fetch should still work).
56+
57+
The below example will set up the database for this app, assuming that you have a UNIX-like platform:
58+
59+
### Step 1. Create the Database
60+
61+
```
62+
psql postgres
63+
64+
CREATE DATABASE notesapi;
65+
CREATE ROLE notesadmin WITH LOGIN PASSWORD 'password';
66+
ALTER ROLE notesadmin WITH SUPERUSER;
67+
ALTER DATABASE notesapi OWNER TO notesadmin;
68+
\q
69+
```
70+
71+
### Step 2. Connect to the Database
72+
73+
```
74+
psql -d postgres -U notesadmin;
75+
76+
\c notesapi
77+
78+
DROP TABLE IF EXISTS notes;
79+
CREATE TABLE notes (
80+
id SERIAL PRIMARY KEY,
81+
created_at TIMESTAMP NOT NULL,
82+
updated_at TIMESTAMP NOT NULL,
83+
title TEXT,
84+
body TEXT
85+
);
86+
87+
\q
88+
```
89+
90+
### Step 3. Run the seed script
91+
92+
Finally, run `npm run seed` to populate some data.
93+
94+
And you're done!
95+
96+
## Notes about this app
97+
98+
The demo is a note-taking app called **React Notes**. It consists of a few major parts:
99+
100+
- It uses a Webpack plugin (not defined in this repo) that allows us to only include client components in build artifacts
101+
- An Express server that:
102+
- Serves API endpoints used in the app
103+
- Renders Server Components into a special format that we can read on the client
104+
- A React app containing Server and Client components used to build React Notes
105+
106+
This demo is built on top of our Webpack plugin, but this is not how we envision using Server Components when they are stable. They are intended to be used in a framework that supports server rendering — for example, in Next.js. This is an early demo -- the real integration will be developed in the coming months. Learn more in the [announcement post](https://reactjs.org/server-components).
107+
108+
### Interesting things to try
109+
110+
- Expand note(s) by hovering over the note in the sidebar, and clicking the expand/collapse toggle. Next, create or delete a note. What happens to the expanded notes?
111+
- Change a note's title while editing, and notice how editing an existing item animates in the sidebar. What happens if you edit a note in the middle of the list?
112+
- Search for any title. With the search text still in the search input, create a new note with a title matching the search text. What happens?
113+
- Search while on Slow 3G, observe the inline loading indicator.
114+
- Switch between two notes back and forth. Observe we don't send new responses next time we switch them again.
115+
- Uncomment the `fetch('http://localhost:4000/sleep/....')` call in `Note.server.js` or `NoteList.server.js` to introduce an artificial delay and trigger Suspense.
116+
- If you only uncomment it in `Note.server.js`, you'll see the fallback every time you open a note.
117+
- If you only uncomment it in `NoteList.server.js`, you'll see the list fallback on first page load.
118+
- If you uncomment it in both, it won't be very interesting because we have nothing new to show until they both respond.
119+
- Add a new Server Component and place it above the search bar in `App.server.js`. Import `db` from `db.server` and use `db.query()` from it to get the number of notes. Oberserve what happens when you add or delete a note.
120+
121+
You can watch a [recorded walkthrough of all these demo points here](https://youtu.be/La4agIEgoNg?t=600) (with timestamps).
122+
123+
## Built by (A-Z)
124+
125+
- [Andrew Clark](https://twitter.com/acdlite)
126+
- [Dan Abramov](https://twitter.com/dan_abramov)
127+
- [Joe Savona](https://twitter.com/en_JS)
128+
- [Lauren Tan](https://twitter.com/sugarpirate_)
129+
- [Sebastian Markbåge](https://twitter.com/sebmarkbage)
130+
- [Tate Strickland](http://www.tatestrickland.com/) (Design)
131+
132+
## [Code of Conduct](https://engineering.fb.com/codeofconduct/)
133+
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the [full text](https://engineering.fb.com/codeofconduct/) so that you can understand what actions will and will not be tolerated.
134+
135+
## License
136+
This demo is MIT licensed.

‎server-components-demo/credentials.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
host: process.env.DB_HOST || 'localhost',
3+
database: 'notesapi',
4+
user: 'notesadmin',
5+
password: 'password',
6+
port: '5432',
7+
};

‎server-components-demo/docker-compose.yml

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
version: "3.8"
2+
services:
3+
postgres:
4+
image: postgres:13
5+
environment:
6+
POSTGRES_USER: notesadmin
7+
POSTGRES_PASSWORD: password
8+
POSTGRES_DB: notesapi
9+
ports:
10+
- '5432:5432'
11+
volumes:
12+
- ./scripts/init_db.sh:/docker-entrypoint-initdb.d/init_db.sh
13+
- db:/var/lib/postgresql/data
14+
15+
notes-app:
16+
build:
17+
context: .
18+
depends_on:
19+
- postgres
20+
ports:
21+
- '4000:4000'
22+
environment:
23+
DB_HOST: postgres
24+
volumes:
25+
- ./notes:/opt/notes-app/notes
26+
- ./public:/opt/notes-app/public
27+
- ./scripts:/opt/notes-app/scripts
28+
- ./server:/opt/notes-app/server
29+
- ./src:/opt/notes-app/src
30+
- ./credentials.js:/opt/notes-app/credentials.js
31+
32+
volumes:
33+
db:

‎server-components-demo/notes/.gitkeep

Whitespace-only changes.

0 commit comments

Comments
 (0)