GithubHelp home page GithubHelp logo
react

facebook / react Goto Github PK

View Code? Open in 1sVSCode Editor NEW
188.3K 6.6K 37.4K 174.45 MB

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

Home Page: https://reactjs.org

License: MIT License

JavaScript 95.60% Shell 0.04% CoffeeScript 0.27% TypeScript 0.34% Python 0.01% C++ 0.71% C 0.08% Makefile 0.01% HTML 1.92% CSS 1.03%
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 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:

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:

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.

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.

react's People

Contributors

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 subtleGradient avatar nhunzaker avatar necolas avatar rickhanlonii avatar lunaruan avatar syranide avatar cpojer avatar flarnie avatar koba04 avatar aweary avatar eps1lon avatar marocchino avatar kohei-takata avatar jstejada avatar TheSavior avatar chicoxyzzy avatar keyz avatar

Stargazers

Ismanol García avatar  avatar Luiz Affonso avatar Hosein avatar  avatar Clement Lebon avatar Ali Faraji avatar  avatar Moinul Moin avatar Othmane Tozy avatar Greg Denys avatar  avatar  avatar Sebastiyan Georgiev avatar Chí Nguyễn Đắc avatar erfan avatar  avatar  avatar  avatar  avatar makoto yasuda avatar Alex Martynov avatar Ethan Winters avatar Jeremy Leonardo avatar Henry Burkhardt avatar JS avatar Jyotiman Lahkar avatar  avatar Diego avatar 奇奇屋 avatar Naoki Ishikawa avatar ibtihel ben salah avatar Shubham Gore avatar Xavier  Jones avatar Andrew Matanov avatar Snail avatar  avatar William Gitau avatar Milad Akbari avatar Henry avatar Isac Freire Bezerra avatar  avatar Jason avatar Ben Siewert avatar  avatar  avatar kakarot avatar sean brennan avatar Pedro Nogueira avatar Nikko Abucejo avatar Erica Noronha avatar Thiago Santaguida avatar Bernardo T. Abreu avatar Thy Tran avatar  avatar Samir Malek avatar  avatar Valentine Fernandes avatar raihaneong avatar  avatar  avatar DynamoBotz avatar  avatar Александр Бывальцев avatar JAE HYEON CHOI avatar Nguyễn Bá Nam avatar Steffan Perera avatar  avatar Amir Kheiru avatar  avatar R avatar Christian VAN DER ZWAARD avatar Bùi Thị Thanh Ngân avatar  avatar Przemysław Gawron avatar  avatar Hayyan avatar  avatar J4e6 avatar Paulo Castillo avatar Kazooki avatar Andreas avatar Luna Crafts avatar Jean-Luc Mupasa avatar Woundrite avatar dangdk avatar Sohrab Nazari avatar jpy avatar Ahammed Shaheedhudheen avatar  avatar ChenMengjie avatar oooopt avatar Taki Snani avatar  avatar Akash Rajpurohit avatar  avatar Akbar Uddin avatar Riku Aiba avatar Bhavya J Shah avatar  avatar

Watchers

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 Kris Hedges avatar Kozo Nishida avatar satzz avatar Tamsir SENE avatar Tom Occhino avatar Stig Kleppe-Jørgensen avatar Abd Shomad avatar Khang Pham avatar Arvind Gupta avatar Shawn Brinkman avatar keiji muraishi avatar Kohei Hasegawa 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

react's Issues

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.

Allow custom (nonstandard) attributes.

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

React.registerCustomAttributePrefix('e-');
React.registerCustomAttributePrefix('ng-');

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?

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.

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
exports.run JSXTransformer.js:46
execute JSXTransformer.js:101
runScripts

Full source:

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

Running Chrome 27.0.1453.93, issue also appears in Firefox 21.

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.

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: http://wiki.ecmascript.org/doku.php?id=harmony:quasis

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!

Ordering of componentDidMount events

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

http://jsfiddle.net/spicyj/udaq9/

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.

Agree/disagree?

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).)

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} {this.props.name}</div>;
    }
});

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

Link to discussion on Google Groups

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

require('react-tools').transform(someCode);

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.

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 https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager 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/
helloworld.js
[email protected]:
/www$ ls html/js/
[email protected]:/www$ jsx -w js/ html/js/
["helloworld"]
<edit helloworld.js, save edit>
[email protected]:
/www$ echo $?
1
[email protected]:/www$ ls html/js/
[email protected]:
/www$

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.

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

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.

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.

thanks!

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.

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

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 ' + this.props.name}</div>;
  }
});

it would be nice to support

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

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.

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...

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 facebook.github.io/react 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.

Hieu

onClick broken on iOS.

iOS Safari really doesn't want you clicking anything that's not an <a> tag. This is a known issue: http://stackoverflow.com/questions/5421659/html-label-command-doesnt-work-in-iphone-browser/6472181#6472181

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>

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.

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?

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.

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 ..)

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.