Nathan Hunzaker
f6fb03edff
* Add home component. Async load fixtures. This commit adds a homepage to the DOM fixtures that includes browser testing information and asynchronously loads fixtures. This should make it easier to find DOM testing information and keep the payload size in check as we add more components to the fixtures. * Adds experimental hydration fixture This commit adds a first pass at a fixture that makes it easier to debug the process of hydrating static markup. This is not complete: 1. It needs to be verified across multiple browsers 2. It needs to render with the current version of react Still, it at least demonstrates the idea. A fixture like this will also be helpful for debugging change events for hydrated inputs, which presently do not fire if the user changes an input's text before hydration. * Tweak select width * Manually join extra attributes in warning This prevents a bug where Chrome reports `Array(n)` where `n` is the size of the array. * Transform with buble * Eliminate dependencies * Pull in react-live for better editing * Handle encoding errors, pass react version * Load the correct version of React * Tweaks * Revert style change * Revert warning update * Properly handle script errors. Fix dom-server CDN loading * Fix 15.x releases * Use postMessage to reduce latency, support older browsers This commit makes a few tweaks to support older browsers and updates the code transition process to use window.postMessage. This avoids loading React on every single change. * Fix fixture renamespacing bug * Gracefully fallback to textarea in React 14 * Replace buble with babel, react-live with codemirror * Simplify layout to resolve production code-mirror issues * Tweak height rules for code-mirror * Update theme to paraiso * Format Code.js * Adjust viewport to fix CodeMirror resize issue in production build * Eliminate react-code-mirror * Improve error state. Make full stack collapsable * Add link to license in codemirror stylesheet * Make code example more concise * Replace "Hydrate" with "Auto-hydrate" for clarity * Remove border below hydration header * Rename query function in render.js * Use Function(code) to evaluate hydration fixture For clarity, and so that the Fixture component does not need to be assigned to the window, this commit changes the way code is executed such that it evaluates using a Function constructor. * Extend hydration fixture to fill width. Design adjustments This commit extends the hydration fixture such that it takes up the full screen view. To accomplish this, the container that wraps all fixtures has been moved to the FixtureSet component, utilized by all other fixtures. * Improve error scroll state * Lazy load CodeMirror together before executing This commit fixes an issue where CodeMirror wouldn't layout correctly in production builds because the editor executes before the stylesheet loaded. CodeMirror needs layout information, and was rendering off-screen without correct CSS layout measurements. * Fix indentation on error message * Do not highlight errors from Babel. Add setPrototypeOf polyfill This commit fixes an error in Safari 7.1 where Chalk highlighted Babel errors caused a crash when setPrototypeOf was called within the library. This is also an issue on IE9, however this fix does not resolve issues in that browser. * Increase resilience to bad errors in Hydration fixture - Reverts highlighting change. Polyfilling Safari 7.1 is sufficient - Do not render a details tag in IE9
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 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 own 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 Online Playgrounds to get a taste of React.
- Add React to a Website as a
<script>tag in one minute. - Create a New React App if you're looking for a powerful JavaScript toolchain.
You can use React as a <script> tag from a CDN, or as a react package on npm.
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:
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:
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('container')
);
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. If you're using React as a <script> tag, read this section on integrating JSX; otherwise, the recommended JavaScript toolchains handle it automatically.
Contributing
The main purpose of this repository is to continue to evolve 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 which have a relatively limited scope. This is a great place to get started.
License
React is MIT licensed.