Initial commit

Co-authored-by: Dan Abramov <dan.abramov@me.com>
Co-authored-by: Sebastian Markbåge <sema@fb.com>
Co-authored-by: Joseph Savona <josephsavona@users.noreply.github.com>
Co-authored-by: Andrew Clark <git@andrewclark.io>

.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# notes
+notes/*.md
+
+# misc
+.DS_Store
+.eslintcache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# vscode
+.vscode

.prettierignore

@@ -0,0 +1,27 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.eslintcache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*.html
+*.json
+*.md

.prettierrc.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+module.exports = {
+  arrowParens: 'always',
+  bracketSpacing: false,
+  singleQuote: true,
+  jsxBracketSameLine: true,
+  trailingComma: 'es5',
+  printWidth: 80,
+};

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at <opensource-conduct@fb.com>. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

LICENSE

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

README.md

@@ -0,0 +1,114 @@
+# React Server Components Demo
+
+* [What is this?](#what-is-this-)
+* [When will I be able to use this?](#when-will-i-be-able-to-use-this-)
+* [Setup](#setup)
+* [DB Setup](#db-setup)
+  + [Step 1. Create the Database](#step-1-create-the-database)
+  + [Step 2. Connect to the Database](#step-2-connect-to-the-database)
+  + [Step 3. Run the seed script](#step-3-run-the-seed-script)
+* [Notes about this app](#notes-about-this-app)
+  + [Interesting things to try](#interesting-things-to-try)
+* [Built by (A-Z)](#built-by--a-z-)
+* [Code of Conduct](#code-of-conduct)
+* [License](#license)
+
+## What is this?
+
+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.
+
+## When will I be able to use this?
+
+Server Components are an experimental feature and **are not ready for adoption**. For now, we recommend experimenting w Server Components via this demo app. **Use this in your own projects at your own risk.**
+
+## Setup
+
+  ```
+  npm install
+  npm start
+  ```
+
+(Or `npm run start:prod` for a production build.)
+
+Then open http://localhost:4000.
+
+The app won't work until you set up the database, as described below.
+
+## DB Setup
+
+This demo uses Postgres. First, follow its [installation link](https://wiki.postgresql.org/wiki/Detailed_installation_guides) for your platform.
+
+The below example will setup the database for this app, assuming that you have a UNIX-like platform:
+
+### Step 1. Create the Database
+
+```
+psql postgres
+
+CREATE DATABASE notesapi;
+CREATE ROLE notesadmin WITH LOGIN PASSWORD 'password';
+ALTER ROLE notesadmin WITH SUPERUSER;
+ALTER DATABASE notesapi OWNER TO notesadmin;
+\q
+```
+
+### Step 2. Connect to the Database
+
+```
+psql -d postgres -U notesadmin;
+
+\c notesapi
+
+DROP TABLE IF EXISTS notes;
+CREATE TABLE notes (
+  id SERIAL PRIMARY KEY,
+  created_at TIMESTAMP NOT NULL,
+  updated_at TIMESTAMP NOT NULL,
+  title TEXT,
+  body TEXT
+);
+
+\q
+```
+
+### Step 3. Run the seed script
+
+Finally, run `npm run seed` to populate some data.
+
+And you're done!
+
+## Notes about this app
+
+The demo is a note taking app called **React Notes**. It consists of a few major parts:
+
+- It uses a Webpack plugin (not defined in this repo) that allows us to only include client components in build artifacts
+- An Express server that:
+  - Serves API endpoints used in the app
+  - Renders Server Components into a special format that we can read on the client
+- A React app containing Server and Client components used to build React Notes
+
+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).
+
+### Interesting things to try
+
+- 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?
+- 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?
+- 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?
+- Search while on Slow 3G, observe the inline loading indicator.
+- Switch between two notes back and forth. Observe we don't send new responses next time we switch them again.
+- Uncomment the `fetch('http://localhost:4000/sleep/....')` calls in `NoteServer.js` and/or `NoteList.server.js` to introduce an artificial delay and trigger Suspense.
+
+## Built by (A-Z)
+
+- [Andrew Clark](https://twitter.com/acdlite)
+- [Dan Abramov](https://twitter.com/dan_abramov)
+- [Joe Savona](https://twitter.com/en_JS)
+- [Lauren Tan](https://twitter.com/sugarpirate_)
+- [Sebastian Markbåge](https://twitter.com/sebmarkbage)
+- [Tate Strickland](http://www.tatestrickland.com/) (Design)
+
+## [Code of Conduct](https://engineering.fb.com/codeofconduct/)
+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.
+
+## License
+This demo is MIT licensed.

credentials.json

@@ -0,0 +1,7 @@
+{
+  "host": "localhost",
+  "database": "notesapi",
+  "user": "notesadmin",
+  "password": "password",
+  "port": "5432"
+}