9a5b6bd84f
When developing in an RSC environment, you should be able to work in a single environment as if it was a unified environment. With thrown errors we already serialize them and then rethrow them on the client. Since by default we log them via onError both in Flight and Fizz, you can get the same log in the RSC runtime, the SSR runtime and on the client. With console logs made in SSR renders, you typically replay the same code during hydration on the client. So for example warnings already show up both in the SSR logs and on the client (although not guaranteed to be the same). You could just spend your time in the client and you'd be fine. Previously, RSC logs would not be replayed because they don't hydrate. So it's easy to miss warnings for example. With this approach, we replay RSC logs both during SSR so they end up in the SSR logs and on the client. That way you can just stay in the browser window during normal development cycles. You shouldn't have to care if your component is a server or client component when working on logical things or iterating on a product. With this change, you probably should mostly ignore the Flight log stream and just look at the client or maybe the SSR one. Unless you're digging into something specific. In particular if you just naively run both Flight and Fizz in the same terminal you get duplicates. I like to run out fixtures `yarn dev:region` and `yarn dev:global` in two separate terminals. Console logs may contain complex objects which can be inspected. Ideally a DevTools inspector could reach into the RSC server and remotely inspect objects using the remote inspection protocol. That way complex objects can be loaded on demand as you expand into them. However, that is a complex environment to set up and the server might not even be alive anymore by the time you inspect the objects. Therefore, I do a best effort to serialize the objects using the RSC protocol but limit the depth that can be rendered. This feature is only own in dev mode since it can be expensive. In a follow up, I'll give the logs a special styling treatment to clearly differentiate them from logs coming from the client. As well as deal with stacks.
React · 
React is a JavaScript library for building user interfaces.
- Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
- Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
- Learn Once, Write Anywhere: We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.
Learn how to use React in your project.
Installation
React has been designed for gradual adoption from the start, and you can use as little or as much React as you need:
- Use Quick Start to get a taste of React.
- Add React to an Existing Project to use as little or as much React as you need.
- Create a New React App if you're looking for a powerful JavaScript toolchain.
Documentation
You can find the React documentation on the website.
Check out the Getting Started page for a quick overview.
The documentation is divided into several sections:
- Quick Start
- Tutorial
- Thinking in React
- Installation
- Describing the UI
- Adding Interactivity
- Managing State
- Advanced Guides
- API Reference
- Where to Get Support
- Contributing Guide
You can improve it by sending pull requests to this repository.
Examples
We have several examples on the website. Here is the first one to get you started:
import { createRoot } from 'react-dom/client';
function HelloMessage({ name }) {
return <div>Hello {name}</div>;
}
const root = createRoot(document.getElementById('container'));
root.render(<HelloMessage name="Taylor" />);
This example will render "Hello Taylor" into a container on the page.
You'll notice that we used an HTML-like syntax; we call it JSX. JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML.
Contributing
The main purpose of this repository is to continue evolving React core, making it faster and easier to use. Development of React happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React.
Code of Conduct
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
Contributing Guide
Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.
Good First Issues
To help you get your feet wet and get you familiar with our contribution process, we have a list of good first issues that contain bugs that have a relatively limited scope. This is a great place to get started.
License
React is MIT licensed.