GithubHelp home page GithubHelp logo

facebook / react Goto Github PK

View Code? Open in Web Editor NEW
228.1K 228.1K 46.5K 607.4 MB

The library for web and native user interfaces.

Home Page: https://react.dev

License: MIT License

JavaScript 64.35% Shell 0.05% CoffeeScript 0.24% TypeScript 21.43% Python 0.01% C++ 0.59% C 0.07% Makefile 0.01% HTML 1.49% CSS 0.89% Rust 10.89% RenderScript 0.01%
declarative frontend javascript library react ui

react's Introduction

React · GitHub license npm version (Runtime) Build and Test (Compiler) TypeScript 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.

Installation

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

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.

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.

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.

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.

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

acdlite avatar benjamn avatar bvaughn avatar chenglou avatar cpojer avatar dependabot[bot] avatar eps1lon avatar flarnie avatar gaearon avatar gnoff avatar gsathya avatar hoxyq avatar jimfb avatar josephsavona avatar kassens avatar lunaruan avatar mofeiz avatar necolas avatar nhunzaker avatar petehunt avatar poteto avatar rickhanlonii avatar sebmarkbage avatar sophiebits avatar subtlegradient avatar syranide avatar trueadm avatar vjeux avatar yungsters avatar zpao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react's Issues

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.

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

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

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>");
  }
});

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.

akrieger@vb:/www$ ls js/
helloworld.js
akrieger@vb:
/www$ ls html/js/
akrieger@vb:/www$ jsx -w js/ html/js/
["helloworld"]
<edit helloworld.js, save edit>
akrieger@vb:
/www$ echo $?
1
akrieger@vb:/www$ ls html/js/
akrieger@vb:
/www$

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.

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

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

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.

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?

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.

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.

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?

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

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!

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-');

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>

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

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.

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.

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

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?

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.

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.

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.