Coder Social home page Coder Social logo

facebook / react Goto Github PK

View Code? Open in Web Editor NEW
195.4K 6.6K 39.1K 180.11 MB

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Home Page:

License: MIT License

JavaScript 95.71% Shell 0.04% CoffeeScript 0.26% TypeScript 0.33% Python 0.01% C++ 0.69% C 0.08% Makefile 0.01% HTML 1.88% CSS 1.01%
javascript react frontend declarative ui library

react's Introduction

React · GitHub license npm version CircleCI Status PRs Welcome

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.


React has been designed for gradual adoption from the start, and you can use as little or as much React as you need:

You can use React as a <script> tag from a CDN, or as a react package on npm.


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.


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. If you're using React as a <script> tag, read this section on integrating JSX; otherwise, the recommended JavaScript toolchains handle it automatically.


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.


React is MIT licensed.

react's People


zpao avatar gaearon avatar sophiebits avatar acdlite avatar sebmarkbage avatar jimfb avatar trueadm avatar bvaughn avatar petehunt avatar chenglou avatar vjeux avatar benjamn avatar yungsters avatar lunaruan avatar subtleGradient avatar nhunzaker avatar necolas avatar rickhanlonii avatar syranide avatar cpojer avatar flarnie avatar koba04 avatar aweary avatar eps1lon avatar marocchino avatar kohei-takata avatar jstejada avatar kassens avatar TheSavior avatar chicoxyzzy avatar


Bünyamin Kırmızı avatar  avatar hulin avatar David Ketchel avatar  avatar Ilija Loncarevic avatar Evan Berard avatar Lennart Colpe avatar Mantas avatar Jon Divi avatar Quaye Henry avatar Felipe de Padua avatar Jean-Yves BADETTE avatar F. FERNANDES avatar Kyle Esterhuizen avatar  avatar Juan Jose Bascuñan avatar  avatar  avatar Ketan kudikyal avatar  avatar AZLegend avatar  avatar Zac Horton avatar Matt Granado avatar Benoit Maigret avatar  avatar  avatar "Xuan Bach Do" avatar Phạm Minh Hiếu avatar James Grogan avatar Guilherme de Souza avatar Joitaro avatar Arturo Barrantes Vasquez avatar Jan Weiß avatar  avatar Abdalla-Ayed avatar Michael avatar  avatar qzh avatar fyibin avatar  avatar Yogesh Bhawsar avatar Mario G.  avatar  avatar  avatar Andrejs Agejevs avatar Davide Carlier avatar Abhinav Achha avatar 张大彪 avatar Sashen Jayathilaka avatar Patrick Reis avatar Szikszai Gusztáv avatar GenesisMiuss avatar Young-il Cho avatar  avatar Qiu Zhong avatar Ibuki Aizawa avatar CK Aznable avatar li.bingbing avatar Belal Mazlom avatar Đinh Thái Mạnh avatar  avatar Dikaa avatar 黄曦 avatar  avatar Takoukam  Jordane avatar Max Dupley avatar Danilo Abrantes avatar Eddie Kuo avatar Vishwas avatar John Rood avatar Clare McDonald avatar Guillaume LEROY avatar Somraj Mukherjee avatar Linda Gardiner avatar CIEL Stake Pool avatar Agnieszka Czaplicka avatar Sandro Mileno avatar xuchao avatar  avatar  avatar Celia Kelly avatar Thineshraj S avatar Christian Lopez avatar Արսեն Գաբրիելյան / Arsen Gabrielyan avatar  avatar  avatar Jiwon Jeong avatar  avatar Maurice avatar Yannis PELOUTIER avatar Igor Gonçalves avatar Walid Hun avatar Andrei Kalpovskii avatar Michél Neumann avatar Angelo Qin avatar Ridha Majid avatar Andrias avatar Shantanoo Chandorkar avatar


Ivan Kozik avatar Jonas Grimfelt avatar Josh Deeden avatar William Stearns avatar Ali Mills avatar Kim Joar Bekkelund avatar Alvin Ye 叶冬开 avatar Sophie Alpert avatar Dario Alves Junior avatar Boram Yoon avatar Gordon L. Hempton avatar Deepak Kannan avatar Trek Glowacki avatar arden avatar Jan Kassens avatar Kris Hedges avatar Kozo Nishida avatar satzz avatar Tamsir SENE avatar Tom Occhino avatar Stig Kleppe-Jørgensen avatar Khang Pham avatar Arvind Gupta avatar Shawn Brinkman avatar azu avatar Dirk Sidney Jansen avatar Chris Barna avatar kejun avatar xhlv avatar  avatar Robby O'Connor avatar  avatar zbage avatar Garlin Gilchrist II avatar Rafael A. Salazar avatar Patrick Sanchez avatar Paul Pajo avatar Weliton Freitas avatar Anderson Bordin avatar  avatar Fernando Kreigne avatar Gonzalo Ruben Benitez avatar Tohru Hashimoto  avatar James Tindall avatar Facundo Cabrera avatar suman gurung avatar Piotr Szrajber avatar Alan Meira avatar anthony de silva avatar ZHOUQUAN YE avatar Jorge Luis avatar Chetan Sachdev avatar Ivan Willig avatar edwardt avatar Abhik Khanra avatar Syugo Saito avatar  avatar Derek avatar =david.l.woolfenden avatar Randy Lien avatar Anton Byrna avatar  avatar Chihiro SAKATOKU avatar Kevin M. Ryan avatar Blake Friedman avatar Howard Yeh avatar Renyi avatar Sho Tabata avatar Krisztian Nagy avatar balduran avatar Chance Jiang avatar Cyrille Bourgois avatar Wiktor avatar Noam  Vergain avatar Jeff Fox avatar Federico Bucchi avatar Imran Ansari avatar jonny avatar Jordan Alperin avatar Daniel Dias avatar Sebastian Markbåge avatar Gearoid Coughlan avatar Henry Huang avatar Chayapan Khannabha avatar sepahsalar avatar Panayiotis Tzagkarakis avatar James Z avatar Filipe Abreu avatar okupara avatar  avatar Miguel avatar Tzaddi Belding avatar Jessica Franco avatar  avatar okonomi avatar gittmaan avatar Abhijeet Kaulgud avatar Risent  avatar Ricardo Soares avatar  avatar

react's Issues

jsx not able to watch subdirs

Trying to run jsx to build into a subdir seems to just exit with no error message:
jsx -w src/ public/js (public/js does exist)

However, if run in directly in public it works without a hitch:
jsx -w src/ public

jsx overwrites modules without --relativize

I encountered this issue when demoing to airbnb today.

Steps to repro:

  • create src/ dir
  • create regular js module src/React.js containing module.exports = 7; and src/Component.jsx which contains require('./React')
  • run: jsx -x jsx src/ src/ to build .js files alongside .jsx (a very common use case of this tool)
  • Observe React.js gets overwritten with a file that throws an exception

This manifests itself as: any time you pass something to -x that is not js, if you require React (which are js files) it will get overwritten.

This is very confusing. I think we really need to turn all of the magic off in this tool unless --relativize is provided. That includes debranching __DEV__, relativizing module names, and this sort of thing. That is, only the JSX desugaring should happen.

Remove content property

We currently have 2 paths for having child content in ReactNativeComponents: this.props.children and this.props.content. Supporting both of these paths makes our code more complicated than it needs to be, and really a single child is the same as content.

We were using this for <option> to make sure it only had a single text child, thought it doesn't look like we are anymore...

Ordering of componentDidMount events

Currently, when mounting two nested components, componentDidMount fires on the outer element before the inner one:

I can't remember now why I was frustrated by this earlier in the week but I'd expect the inner component to be mounted completely before the outer component's componentDidMount method runs so that it can rely on the children being fully mounted.


Getting JSX syntax to play nicely with jslint?

I have been playing around with the library. I am trying to use their JSX syntax, and was just wondering how you guys get it to play nicely with jslint/jshint?

JSLint obviously does not like the JSX syntax - ("expected an identifier and instead saw ' <';" - JavaScript syntax error), so how do I get around this in my .jshintrc file?

commoner's grep for @providesModule turns up vim swap files

I was getting errors from grunt because of this and maybe this was also causing some confusion of mine before. Not sure what the right thing to do here, but perhaps it should filter by file extension (and hidden-ness? my vim swap filenames start with ..)

Id selection

Did a search and didn't find any related issue, so here I go:
Apparently react, as of today, still hijacks the DOM element id (haven't gotten the chance to try it yet), rendering it a bit unpractical for CSS. I was wondering why this rather than using an attribute like data-react-uid. Is this a performance/compatibility issue? What's the motivation behind using the id internally to target elements instead of an attribute?

Sure, it's still possible to use classes, bit I think one less quirky gotcha like this would make react much more appealing.

Can't require() react-tools module

I'm trying to programatically invoke the JSX transformer (using the version of react-tools in the npm registry) by running something like


Which then throws this error:

Error: Cannot find module './build/React'

If I comment out the lines in main.js that require/use ./build/React the react-tools module loads fine and the transformer runs correctly.

Make valid npm release

Please make "requireable" npm release, #10 already fixed and only new version on npm is needed. I've developed a source transform for JSX for browserify — reactify which doesn't work properly because of #10

Adding 0.1 incrementally with setState gives out approximate numbers

I'm not sure whether this is as intended, or a problem with JavaScript, but I fiddled around with your example on and tried this code:

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  tick: React.autoBind(function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 0.1});
  componentDidMount: function() {
    setInterval(this.tick, 100);
  render: function() {
    return React.DOM.div({},
      'Seconds Elapsed: ' + this.state.secondsElapsed

React.renderComponent(Timer({}), mountNode);

The result comes out as 0.1, 0.2, ... as intended, but at some point the adding will give out numbers such as 0.30000000004 or 0.79999999999

Hope this explains well.


Pending state updates may be confusing

If you have

componentWillReceiveProps: function() {
    this.setState({x: this.state.x + 1});
    this.setState({x: this.state.x + 1});

then x will only be incremented once because the new state will just be stored in _pendingState until receiveProps finishes. After my refactoring in #115, this will never increment twice, which is probably confusing.

Maybe this isn't a bug. We can fix this behavior by instead updating this.state immediately (but still updating the UI later). Right now I can't think of any situations where having this.state out of sync with the UI is a problem.

@vjeux suggested I open an issue, so here I am. Probably easiest for me to fix while updating #115 though.

Is es5-sham required for IE8?

NormalizedEventListener uses Object.create which is unavailable in IE8 and isn't added by es5-shim. (edit: no longer.)

It is added by es5-sham but the common questions doc on the React site doesn't say that es5-sham is also required. Not sure if this is a docs problem or if there's a good way to avoid Object.create.

(Side note: it's a little bit of a pain to test in IE8 since neither the website nor most of the examples include es5-shim (or es5-sham).)

Docs don't even mention reconciliation!

If you go on our site, there's nothing that talks about synthetic events, mock DOM, reconciliation, etc. I think documenting this would have a huge impact.

React + Browserify module issues

Hello! I've been using React and combining it with Browserify. My goal for this was to be able to use Node modules with React, by using this workflow:

  1. Write JSX logic, include require()'s to installed Node modules
  2. Use react-tools to compile the JSX to JS
  3. Browserify said JS, which would then include the Node modules

However, the compiled JSX from react-tools changes something like require('foo') to require('./foo'), and creates a stub file. This very much breaks importing modules. This seems to happens because of commoner, which is part of the compiling workflow.

Is there a workaround for this?

Scoped css?

The way React renders DOM is really interesting. I was wondering if there's any plan to include a functionality that sets the style of the rendered content without css name pollution. Something like the following:

style: function() {
  return {
    fruit: {border: '1px solid black'}
render: function() {
  return <div className="fruit">{'Hello'}</div>;

And initialize the style at the beginning by changing the key to something unique, say fruit-abrt2 (same for the rendered class name). Of course, then there's the concern that a css rule might not reach fruit anymore since the class name doesn't actually exists, but I see such a huge benefit here that I believe it's worth thinking over this and find a solution.

Consider allowing `setState` while UNMOUNTING

Should we let people invoke setState in componentWillUnmount? It seems harmless, but currently we throw. In theory, this.state should be cleared out when unmounting (but we do not for backward compatibility reasons).

Aside, as we get better at clearing asynchronous callbacks on unmount, we should seriously consider clearing this.state and this.props when unmounting.

Small update to Bower command

It could be preferable to use:

bower install --save react

So that the installation is automatically saved in the bower.json.

Allow custom (nonstandard) attributes.

Various frameworks uses custom attributes. React could allow to extend default data- and aria- prefixes. Something like this:


Uncaught SyntaxError: Unexpected token <

Even with the most basic tutorial code, I'm unable to get past this error thrown at JSXTransformer.js:46.

Error Trace:

Uncaught SyntaxError: Unexpected token < JSXTransformer.js:46 JSXTransformer.js:46
execute JSXTransformer.js:101

Full source:

    <title>Hello React</title>
    <script src="react.min.js"></script>
    <script src="JSXTransformer.js"></script>
    <div id="content"></div>
    <script type="text/jsx">
        var CommentBox = React.createClass({
          render: function() {
            return (
              <div class="commentBox">
                Hello, world! I am a CommentBox.
          <CommentBox />,

Running Chrome 27.0.1453.93, issue also appears in Firefox 21.

onClick broken on iOS.

iOS Safari really doesn't want you clicking anything that's not an <a> tag. This is a known issue:

The way you fix this is by putting an empty "onclick" attribute on nodes you wish to emit click events. Yep.

So presumably:

div({onClick: function(){alert('clicked');}}, 'click me');

should emit:

<div onclick>click me</div>

on iOS. Ensuring that the click event is actually reachable from an iOS device.

As the stack overflow link points out, this is also an issue for <label> elements associated with <input> elements. In order to behave as a clickable label, they must also include an empty "onclick" attribute.

label(null, input({type: 'checkbox'}), check me);
<label onclick><input type="checkbox> check me</label>

Maybe interpolate within JSX attributes?

Would be cool and useful if <div title="hello {there}"> compiled down into

React.DOM.div({title: "hello " + there})

or similar, though it looks like I'm fighting an uphill battle here:

22:56 < balpert> any reason why <div title="hello {there}"> shouldn't interpolate?
22:58 <@zpao> lbljeffmo: that's in your court :)
22:58 <@lbljeffmo> balpert: because that's hard :)
22:58 <@lbljeffmo> We'd basically need to eval strings
22:58 < balpert> I mean, <div>hello {there}</div> already works?
22:58 <@lbljeffmo> let me think for more than a second...
23:00 <@lbljeffmo> also, we'd need to escape the output
23:00 < balpert> what do you mean?
23:00 <@zpao> well, react will escape the whole attr when creating html
23:01 <@lbljeffmo> what would it interpolate to?
23:01 < balpert> {title: "hello " + there}?
23:01 < balpert> or maybe something like {title: ["hello ", there]} if we made that work
23:01 <@zpao> yea
23:01 <@zpao> same as <div title={'hello ' + there}/>
23:02 <@lbljeffmo> I'm hesitant because it changes the semantics of a string (but I'm still processing…)
23:02  * zpao isn't sure this is really quite a path we want to go down but it interesting to think about
23:02 < balpert> yeah, I'm unsure too
23:03 < balpert> a coworker asked though and it would seem to make JSX a bit more consistent
23:03 <@lbljeffmo> also, string literals would act differently from refs to string lits
23:03 < balpert> lbljeffmo: what do you mean?
23:03 <@zpao> well, JSX ≠ templating, which it sounds like your coworker actually wants
23:03 <@lbljeffmo> var stuff = "dude"; var myStuff = "Hello {stuff}"; <div title={stuff} />;
23:04 <@lbljeffmo> we only have the opportunity to re-write the string if we can analyze it at compile time
23:04 <@lbljeffmo> not at run time
23:04 < balpert> correct
23:04 < balpert> I definitely wouldn't expect that interpolation to work
23:05 <@lbljeffmo> seems unclear to a noob though who hasn't thought about the depths of the transform though
23:05 <@lbljeffmo> I'm inclined to suggest that this would be something you'd want to do with a templating library and then pass the result of the template processing in
23:07 < balpert> lbljeffmo: I dunno, it seems pretty simple to have JSX interpolate {...} in attrs and element bodies
23:07 < balpert> I don't think anyone who knows anything about how JSX works would get confused when var myStuff = "Hello {stuff}"; <div title={stuff} /> doesn't work
23:08 <@lbljeffmo> ya maybe not
23:09 < balpert> well, something to think about
23:09 <@zpao> at that point we might as well just make jsx handlebars
23:09 < balpert> obviously not a big deal
23:10 <@zpao> handlerbars + xml
23:10 <@lbljeffmo> but the "jsx is not a templating tool" argument still makes a lot of sense to me -- using a real templating utility seems more modular and less slippery-slopey down the new-templating-features slope
23:13 < balpert> this particular feature doesn't feel at all like "new features" to me, but I agree with your general argument
23:14 < balpert> obviously (to me, at least) it doesn't make sense to add loops or anything like that to JSX
23:14 < balpert> at least, certainly not some {{#each ...}} thing
23:14 <@lbljeffmo> see also:

JSX whitespace coalescing should work like regular HTML

Currently, when two escaped entities are outputted the space between them is removed. For the code below the expected output is "Hello World", but the actual output is "HelloWorld" (without a space between "Hello" and "World").

var Hello = React.createClass({
    render: function() {
        return <div>{this.props.greeting} {}</div>;

React.renderComponent(<Hello greeting="Hello" name="World" />, document.body);

Link to discussion on Google Groups

grunt test just hangs

I don't know what's going on - I tried cleaning the project, but grunt test just hangs without any output. My CPU fan starts spinning up so it's probably thinking about something very hard.

React in RequireJS ?

Learning the library. Any tips on getting it to play nice with RequreJS ?

Looks like it needs a shim but I can't figure out what exactly.


jsx offline transform exits with error code 1 on any change (Ubuntu 12.10)

Basically what the title says. After install react-tools, using jsx -w will correctly detect existing files (but not transform them), and upon any write to any watched file jsx will exit with error code 1. Commoner tests all pass.

Exact steps I followed, in Ubuntu 12.10:
0) Install node.js via manual instructions at for Ubuntu/Mint

  1. Install react-tools with 'sudo npm install -g react-tools'
  2. Create file helloworld.js in , as described by the Getting Started tutorial.
  3. In a new terminal, jsx -w
  4. Edit helloworld.js and add a comment.
  5. Notice that jsx exited, echo $? prints 1.

[email protected]:/www$ ls js/
[email protected]:
/www$ ls html/js/
[email protected]:/www$ jsx -w js/ html/js/
<edit helloworld.js, save edit>
[email protected]:
/www$ echo $?
[email protected]:/www$ ls html/js/
[email protected]:

Work with compile-to-JS languages (like CoffeeScript)

JSX is nice, but those using compile-to-JS language have to change the transpiler to connect to the JSX compiler. Is there any chance of adding alternative DOM syntax to JSX so it does not break every compile-to-JS language? Something gettext-style would be nice. So in addition to:

var HelloMessage = React.createClass({
  render: function() {
    return <div>{'Hello ' +}</div>;

it would be nice to support

var HelloMessage = React.createClass({
  render: function() {
    return _dom_("<div>{'Hello ' +}</div>");

Stop requiring docblock for JSX transformer

/** @jsx React.DOM */ is pretty annoying noise. Let's stop requiring it. We can probably keep it simple for now but if we want to make JSX more generic and standalone we might need to do this a bit more carefully.

Allow namespacing in component names in JSX

23:07 < balpert> can we add <Namespaced.Things /> to JSX?
23:07 < jwalke> I like that you chose the dot!
23:07 < jwalke> Keep it javascript-first.
23:07 < balpert> yes
23:08 < balpert> translating colon to dot would be absurd
23:08 < balpert> (in my opinion)
23:08 < jwalke> So you could have var MyComponentsPackage = {Typeahead:
                R.createClass.. }
23:08 < jwalke> <MyComponentsPackage.Typeahead />
23:08 < jwalke> I like it.
23:08 < jwalke> Make an issue!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.