This is an Express view engine which renders React components on server. It renders static markup and *does not* support mounting those views on the client.

Overview

express-react-views

This is an Express view engine which renders React components on server. It renders static markup and does not support mounting those views on the client.

This is intended to be used as a replacement for existing server-side view solutions, like jade, ejs, or handlebars.

Usage

npm install express-react-views react react-dom

Note: You must explicitly install react as a dependency. Starting in v0.5, react is a peer dependency here. This is to avoid issues that may come when using incompatible versions.

Add it to your app.

// app.js

var app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());

Options

Beginning with v0.2, you can now pass options in when creating your engine.

option values default
doctype any string that can be used as a doctype, this will be prepended to your document "<!DOCTYPE html>"
beautify true: beautify markup before outputting (note, this can affect rendering due to additional whitespace) false
transformViews true: use babel to apply JSX, ESNext transforms to views.
Note: if already using babel-register in your project, you should set this to false
true
babel any object containing valid Babel options
Note: does not merge with defaults
{presets: ['@babel/preset-react', [ '@babel/preset-env', {'targets': {'node': 'current'}}]]}

The defaults are sane, but just in case you want to change something, here's how it would look:

var options = { beautify: true };
app.engine('jsx', require('express-react-views').createEngine(options));

Views

Under the hood, Babel is used to compile your views to code compatible with your current node version, using the react and env presets by default. Only the files in your views directory (i.e. app.set('views', __dirname + '/views')) will be compiled.

Your views should be node modules that export a React component. Let's assume you have this file in views/index.jsx:

var React = require('react');

function HelloMessage(props) {
  return <div>Hello {props.name}</div>;
}

module.exports = HelloMessage;

Routes

Your routes would look identical to the default routes Express gives you out of the box.

// app.js

app.get('/', require('./routes').index);
// routes/index.js

exports.index = function(req, res){
  res.render('index', { name: 'John' });
};

That's it! Layouts follow really naturally from the idea of composition.

Layouts

Simply pass the relevant props to a layout component.

views/layouts/default.jsx:

var React = require('react');

function DefaultLayout(props) {
  return (
    <html>
      <head><title>{props.title}</title></head>
      <body>{props.children}</body>
    </html>
  );
}

module.exports = DefaultLayout;

views/index.jsx:

var React = require('react');
var DefaultLayout = require('./layouts/default');

function HelloMessage(props) {
  return (
    <DefaultLayout title={props.title}>
      <div>Hello {props.name}</div>
    </DefaultLayout>
  );
}

module.exports = HelloMessage;

Questions

What about partials & includes?

These ideas don't really apply. But since they are familiar ideas to people coming from more traditional "templating" solutions, let's address it. Most of these can be solved by packaging up another component that encapsulates that piece of functionality.

What about view helpers?

I know you're used to registering helpers with your view helper (hbs.registerHelper('something', ...))) and operating on strings. But you don't need to do that here.

  • Many helpers can be turned into components. Then you can just require and use them in your view.
  • You have access to everything else in JS. If you want to do some date formatting, you can require('moment') and use directly in your view. You can bundle up other helpers as you please.

Where does my data come from?

All "locals" are exposed to your view in this.props. These should work identically to other view engines, with the exception of how they are exposed. Using this.props follows the pattern of passing data into a React component, which is why we do it that way. Remember, as with other engines, rendering is synchronous. If you have database access or other async operations, they should be done in your routes.

Caveats

  • I'm saying it again to avoid confusion: this does not do anything with React in the browser. This is only a solution for server-side rendering.
  • This currently uses require to access your views. This means that contents are cached for the lifetime of the server process. You need to restart your server when making changes to your views. In development, we clear your view files from the cache so you can simply refresh your browser to see changes.
  • React & JSX have their own rendering caveats. For example, inline <script>s and <style>s will need to use dangerouslySetInnerHTML={{__html: 'script content'}}. You can take advantage of ES6 template strings here.
<script dangerouslySetInnerHTML={{__html: `
  // Google Analytics
  // is a common use
`}} />
  • It's not possible to specify a doctype in JSX. You can override the default HTML5 doctype in the options.

Contributors

Comments
  • Failed to lookup view in views directory

    Failed to lookup view in views directory

    Hi,

    I'm experimenting with express-react-views, and the view engine is unable to lookup any view.

    Here's what I have so far that I find relevant.

    .
    ├── config
    │   └── application.js
    ├── app
        └── views
            └── index.jsx
    
    // config/application.js
    const Express = require('express');
    const path = require('path');
    
    const app = Express();
    
    // React views
    app.set('views', path.resolve(__dirname, '../app/views'));
    app.set('view engine', 'jsx');
    app.engine('jsx', require('express-react-views').createEngine());
    
    app.get('/', function (req, res) {
      res.render('index');
    });
    
    app.listen(process.env.PORT, function () {
      console.log('Server listening on port', process.env.PORT);
    });
    
    // app/views/index.jsx
    import React from 'React';
    
    export default class Index extends React.Component {
      render() {
        return (
          <!doctype html>
          <html>
            <head>
              <meta charset="utf-8" />
              <meta http-equiv="X-UA-Compatible" content="IE=edge" />
              <meta name="viewport" content="width=device-width, initial-scale=1" />
              <title>Hello!</title>
            </head>
            <body>
            </body>
          </html>
        );
      }
    }
    

    And here's the error.

    ➔ node config/application.js
    Server listening on port 3000
    ::1 - - [30/Apr/2016:07:17:36 +0000] "GET / HTTP/1.1" 500 1382 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.86 Safari/537.36"
    Error: Failed to lookup view "index" in views directory "/Users/ruipereira/code/deltaworx/webclient/app/views"
        at EventEmitter.render (/Users/ruipereira/code/deltaworx/webclient/node_modules/express/lib/application.js:579:17)
        at ServerResponse.render (/Users/ruipereira/code/deltaworx/webclient/node_modules/express/lib/response.js:961:7)
        at /Users/ruipereira/code/deltaworx/webclient/config/application.js:23:7
        at Layer.handle [as handle_request] (/Users/ruipereira/code/deltaworx/webclient/node_modules/express/lib/router/layer.js:95:5)
        at next (/Users/ruipereira/code/deltaworx/webclient/node_modules/express/lib/router/route.js:131:13)
        at Route.dispatch (/Users/ruipereira/code/deltaworx/webclient/node_modules/express/lib/router/route.js:112:3)
        at Layer.handle [as handle_request] (/Users/ruipereira/code/deltaworx/webclient/node_modules/express/lib/router/layer.js:95:5)
        at /Users/ruipereira/code/deltaworx/webclient/node_modules/express/lib/router/index.js:277:22
        at Function.process_params (/Users/ruipereira/code/deltaworx/webclient/node_modules/express/lib/router/index.js:330:12)
        at next (/Users/ruipereira/code/deltaworx/webclient/node_modules/express/lib/router/index.js:271:10)
    

    Am I missing something? I would appreciate any help. CCing @zpao Thanks.

    opened by rpereira 14
  • Switch from node-jsx to babel

    Switch from node-jsx to babel

    Babel appears to be the future of ES6 transpiling, and has built-in jsx support, so I think it makes sense to switch over to it from node-jsx.

    This pull does change/kinda break a few things:

    • jsx.harmony. Obviously if we're using babel, ES6 features will be allowed, so this option no longer makes sense.
    • jsx.stripTypes. Babel automatically strips out flow types, although that can be opted out of. Maybe I should implement that, in which case keeping this setting makes sense?

    I also added some very basic tests, to make sure everything still worked.

    CLA Signed 
    opened by boblauer 9
  • Handling events/onClick

    Handling events/onClick

    Hello,

    I have the following JSX component:

    /** @jsx React.DOM */
    
    var React = require('react');
    var VideoPlayer = require('../iplayer');
    
    var createFeedItem = function(feedId){
      var activeFeedId = this.state.activeFeed;
    
      return <dd className={'feed ' + (feedId === activeFeedId ? 'active' : '')} key={feedId}>
        <a href={'#' + feedId} onClick={this.activateFeed}>{feedId.toUpperCase()}</a>
      </dd>
    };
    
    var VideoComponent = React.createClass({
      getInitialState: function(){
        return {
          activeFeed: 'bbc1'
        };
      },
      activateFeed: function(event){
        this.setState({ activeFeed: false});
      },
      render: function(){
        var feeds = this.props.streams.map(createFeedItem, this);
    
        return (<div>
          <div className="panel">
            <h1 className="hd">{this.props.title}</h1>
    
            <dl className="feeds-switcher">
              <dt>Switch to Feed:</dt>
              {feeds}
            </dl>
          </div>
          <div className="panel control-panel">
            <VideoPlayer feed={this.state.activeFeed} />
          </div>
        </div>);
      }
    });
    
    module.exports = VideoComponent;
    

    The thing is the onClick is removed from the view and I do not see where I could grab the possibly generated autobinding/delegation JS code.

    Maybe I am missing something. Maybe I am missing how I should implement the same reactified view on the client side.

    opened by thom4parisot 8
  • React as PeerDependency

    React as PeerDependency

    Hello,

    I have tried to follow the README but here are 2 caveeats I encountered:

    • I need to do var React = require('react') in my jsx files
    • the react npm module needs to be a dependency of the express project as well

    So I guess react should be a peerDependency, injected into the middleware so as you would not have to possibly deal with 2 different versions.

    Let me know how do you feel about that.

    opened by thom4parisot 8
  • TypeError: Cannot read property 'props' of undefined

    TypeError: Cannot read property 'props' of undefined

    In the index.jsx file , if I don't use this.props, it will be OK:

    const React = require('react');
    
    let App = React.createClass({
        render: () => {
            return (
    
                <div>
                    Hello,this is jsx!
                </div>
            );
        }
    });
    
    module.exports = App;
    

    Here is the renderd html :

    <!DOCTYPE html><div>Hello,this is jsx!</div>
    

    If I want to use this.props, it will throw an error, and here is my code below:

    const React = require('react');
    
    let App = React.createClass({
        render: () => {
            return (
    
                <div>
                    Hello,this is jsx!{this.props.name}
                </div>
            );
        }
    });
    
    module.exports = App;
    

    In server.js , the code is like this:

    app.get('/',(req,res)=>{
    
        res.render('index', { name: 'John' });
    
    });
    

    The error log:

    TypeError: Cannot read property 'props' of undefined
        at [object Object].render (/Users/xinhengs/Desktop/QunarDevs/qact/webapps/views/index.jsx:8:36)
        at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/xinhengs/Desktop/QunarDevs/qact/server/node_modules/react/lib/ReactCompositeComponent.js:587:34)
        at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (/Users/xinhengs/Desktop/QunarDevs/qact/server/node_modules/react/lib/ReactCompositeComponent.js:607:32)
        at [object Object].wrapper [as _renderValidatedComponent] (/Users/xinhengs/Desktop/QunarDevs/qact/server/node_modules/react/lib/ReactPerf.js:66:21)
        at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/xinhengs/Desktop/QunarDevs/qact/server/node_modules/react/lib/ReactCompositeComponent.js:220:30)
        at [object Object].wrapper [as mountComponent] (/Users/xinhengs/Desktop/QunarDevs/qact/server/node_modules/react/lib/ReactPerf.js:66:21)
        at /Users/xinhengs/Desktop/QunarDevs/qact/server/node_modules/react/lib/ReactServerRendering.js:70:32
        at ReactServerRenderingTransaction.Mixin.perform (/Users/xinhengs/Desktop/QunarDevs/qact/server/node_modules/react/lib/Transaction.js:136:20)
        at Object.renderToStaticMarkup (/Users/xinhengs/Desktop/QunarDevs/qact/server/node_modules/react/lib/ReactServerRendering.js:68:24)
        at View.renderFile [as engine] (/Users/xinhengs/Desktop/QunarDevs/qact/server/node_modules/express-react-views/index.js:46:32)
    

    Does anyone knows why ?

    opened by 109km 7
  • Sample application: dynamic client-side app using express-react-views

    Sample application: dynamic client-side app using express-react-views

    Here is a 2nd sample application illustrating how to create a dynamic client-side application using this template middleware without modification. It works by using dangerouslySetInnerHTML inside of a static container template. There are a couple of outstanding pull requests with alternate solutions to this problem. Hopefully this one helps.

    opened by tenorviol 7
  • loading react components from a node module

    loading react components from a node module

    How can i load react components from modules ?

    seems like it is not working when i import react components from node modules (jsx and compiled js both).

    opened by JasonStewart1 6
  • Version 0.8.0 is broken on Windows: SyntaxError: Unexpected token <

    Version 0.8.0 is broken on Windows: SyntaxError: Unexpected token <

    Problem

    Version 0.8.0 is broken on Windows. See Error below.

    Steps To Reproduce

    1. Implement the basic example
      • https://github.com/reactjs/express-react-views/blob/master/README.md
    2. Access the '/' route
      • BUG: Error occurs
      • WORK-AROUND: Use back leveled version: 0.7.2.

    Error

                <DefaultLayout title={this.props.title}>
                ^
    SyntaxError: Unexpected token <
        at exports.runInThisContext (vm.js:73:16)
        at Module._compile (module.js:443:25)
        at Module._extensions..js (module.js:478:10)
        at Object.require.extensions.(anonymous function) [as .jsx] (C:\...\node_modules\express-react-views\node_modules\babel\node_modules\babel-core\lib\babel\api\register\node.js:161:7)
        at Module.load (module.js:355:32)
        at Function.Module._load (module.js:310:12)
        at Module.require (module.js:365:17)
        at require (module.js:384:17)
        at View.renderFile [as engine] (C:\...\node_modules\express-react-views\index.js:37:23)
        at View.render (C:\...\node_modules\express\lib\view.js:93:8)
    

    Issue Duplicate?

    https://github.com/reactjs/express-react-views/issues/32

    Node Package Versions

    "express-react-views": "0.8.0", "react": "0.13.3"

    OS Version

    Windows 7 Pro SP1 (64-bit)

    opened by mpawlow 6
  • Added client mounting

    Added client mounting

    Hi @zpao, we added client mounting ability to express-react-views. Can you look to this and maybe there will be a chance to merge our code with your? There would be great to hear some recommendations or comments about this. Thanks.

    opened by Zemelia 6
  • React is not defined

    React is not defined

    Hello guys,

    I am just starting with a project similar to the example, but I am getting the following error:

    ReferenceError: React is not defined
       at Object.<anonymous> ...X/views/index.jsx:3:20)
       at Module._compile (module.js:456:26)
       at Object.require.extensions.(anonymous function) [as .jsx] (...X/node_modules/express-react-views/node_modules/node-jsx/index.js:26:12)
       at Module.load (module.js:356:32)
       at Function.Module._load (module.js:312:12)
       at Module.require (module.js:364:17)
       at require (module.js:380:17)
       at View.renderFile [as engine] ...X/node_modules/express-react-views/index.js:36:23)
       at View.render (...X/node_modules/express/lib/view.js:76:8)
       at Function.app.render (...X/node_modules/express/lib/application.js:517:10)
    

    Any idea why?

    opened by jenil 6
  • add option for renderComponentToString

    add option for renderComponentToString

    Add ability to render on the server and skip rerendering on client.

    http://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostring

    opened by landau 6
  • React 17

    React 17

    I'm using this package to run with express in the node js 17. Hooks and events doens't work i need of this package to my project and it don't works, please help me

    opened by idezin 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump browserslist from 4.1.1 to 4.16.6

    Bump browserslist from 4.1.1 to 4.16.6

    Bumps browserslist from 4.1.1 to 4.16.6.

    Changelog

    Sourced from browserslist's changelog.

    4.16.6

    • Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

    4.16.5

    • Fixed unsafe RegExp (by Yeting Li).

    4.16.4

    • Fixed unsafe RegExp.
    • Added artifactory support to --update-db (by Ittai Baratz).

    4.16.3

    • Fixed --update-db.

    4.16.2

    4.16.1

    • Fixed Chrome 4 with mobileToDesktop (by Aron Woost).

    4.16

    • Add browserslist config query.

    4.15

    • Add TypeScript types (by Dmitry Semigradsky).

    4.14.7

    • Fixed Yarn Workspaces support to --update-db (by Fausto Núñez Alberro).
    • Added browser changes to --update-db (by @​AleksandrSl).
    • Added color output to --update-db.
    • Updated package.funding to have link to our Open Collective.

    4.14.6

    • Fixed Yarn support in --update-db (by Ivan Storck).
    • Fixed npm 7 support in --update-db.

    4.14.5

    • Fixed last 2 electron versions query (by Sergey Melyukov).

    4.14.4

    • Fixed Unknown version 59 of op_mob error.

    4.14.3

    • Update Firefox ESR.

    4.14.2

    • Fixed --update-db on Windows (by James Ross).
    • Improved --update-db output.

    4.14.1

    • Added --update-db explanation (by Justin Zelinsky).

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.15 to 4.17.21

    Bump lodash from 4.17.15 to 4.17.21

    Bumps lodash from 4.17.15 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ua-parser-js from 0.7.18 to 0.7.28

    Bump ua-parser-js from 0.7.18 to 0.7.28

    Bumps ua-parser-js from 0.7.18 to 0.7.28.

    Commits
    • 1d3c98a Revert breaking fix #279 and release as 0.7.28
    • 535f11b Delete redundant code
    • 642c039 Fix #492 LG TV WebOS detection
    • 3edacdd Merge branch 'master' into develop
    • acc0b91 Update contributor list
    • f726dcd Merge branch 'master' into develop
    • 383ca58 More test for tablet devices
    • 7c8aa43 Minor rearrangement
    • 09aa910 Add new device & browser: Tesla
    • 557cc21 More test for latest phones with unique form factor (fold/flip/qwerty/swivel)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • React setState did not rerender the page

    React setState did not rerender the page

    Hi, I'm having trouble getting the page rerendered with updated data. I have an array of arrays and I would like to render just 1 array at a time with some button to change the state to the next array. But I don't seem to be able to do this with the view engine for some reason, is it not supported?

    I have made this simple component to test state change that increments an index

    import React from 'react';
    
    export class Test extends React.Component {
      constructor(props) {
        super(props);
        this.state = { index: 0 };
        this.increment = this.increment.bind(this);
      }
    
      increment() {
        let idx = this.state.index + 1;
        if (idx > 10) {
          idx = 10;
        }
        this.setState({ index: idx});
      }
    
      render() {
        return (
          <div>
            <h1>
              Index: {this.state.index}
            </h1>
            <br />
            <button onClick={this.increment}>
              Increment
            </button>
          </div>
        );
      }
    }
    

    And this function that returns JSX

    const React = require('react');
    import { Body } from './default';
    import { Test } from './test';
    
    export default function TestFunction(props) {
      return (
        <Body>
          <Test />
        </Body>
      );
    }
    

    It works on React editors but when rendering with the express view engine it doesn't work at all. I'm limited to express due to the nature of my project.

    opened by Anthonykung 4
Owner
React Community
React website and its localizations
React Community
A JavaScript library that transitions between static HTML pages on navigation; no app server required.

TurboReact TurboReact applies only the differences between two HTML pages when navigating with links rather than create a new document, which enables

Ross Allen 274 Aug 19, 2022
Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.

React-Rails React-Rails is a flexible tool to use React with Rails. The benefits: Automatically renders React server-side and client-side Supports Web

React Community 6.5k Sep 25, 2022
Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance.

These are the docs for React on Rails 12. To see the version 11 docs, click here. News October 14, 2020: RUBY ROGUES RR 474: React on Rails V12 – Don’

ShakaCode 4.9k Sep 25, 2022
Render React components in the Play Framework with JDK8's JavaScript engine

React.js on the Play Framework JDK8 shipped with a JavaScript runtime: Nashorn React supports server side rendering via React.renderToString. The Play

Ross Allen 214 Jun 14, 2022
A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server

Backbone.React.Component Backbone.React.Component is a mixin and API that glues Backbone models and collections into React components. When used as a

José Magalhães 815 Aug 5, 2022
.NET library for JSX compilation and server-side rendering of React components

ReactJS.NET ReactJS.NET is a library that makes it easier to use Babel along with Facebook's React and JSX from C#. Features On-the-fly JSX to JavaScr

React Community 2.2k Sep 27, 2022
react.js on server-side java (with rhino or nashorn)

jreact react.js on server-side java (with rhino or nashorn) Usage To setup jreact create a de.matrixweb.jreact.JReact instance, call the #addRequirePa

Markus Wolf 168 Jul 19, 2022
Connect/Express middleware to use React to generate whole websites

This project is not actively maintained. Proceed at your own risk! react-page-middleware Middleware for building full page apps using React, JSX, and

Facebook Archive 106 May 1, 2022
DEPRECATED – Provides React JSX support for Coffeescript

Coffeescript React JSX Transformer CoffeeScript 2 has JSX built in. You should use that instead STATUS: DEPRECATED This tool is no longer maintained.

James Friend 435 Jul 19, 2022
(deprecated) A React component which wraps an Elm module to be used in a React application.

(DEPRECATED) Elm-React ⚠ This module has been deprecated. Have a look at react-elm-components instead ! ⚠ This component allows you to easily integrat

null 114 May 7, 2021
React mixin registration manager which allows mixins to have dependencies

react-mixin-manager Enhance React with full-featured mixin dependency management. Register mixins using a string alias Allow mixins to depend on other

Joe Hudson 33 Oct 1, 2017
ngx-react allows you to seamlessy use ⚛️ React and 🅰️ Angular components together.

ngx-react allows you to seamlessy use ⚛️ React and ??️ Angular components together. ?? This package will be the a perfect match to migrate from Angula

Olivier Guimbal 9 Apr 14, 2022
React components for use with backbone and backbone paginator

#Backbone-React-ui React components for use with Backbone, Bootstrap and Backbone.Paginator This project is based lightly on React-bootstrap but is fo

James Hrisho 18 Jan 4, 2020
Hooks, Context Providers, and Components that make it easy to interact with Firebase.

ReactFire Hooks, Context Providers, and Components that make it easy to interact with Firebase. What is ReactFire? Easy realtime updates for your func

null 3.1k Sep 30, 2022
Use React Components in Angular

Note: For a more modern alternative to ngReact, we recommend react2angular, angular2react, and ngimport. ngReact The React.js library can be used as a

null 2.6k Sep 15, 2022
Declarative managed event bindings for react components

react-events Declarative managed event bindings for React components No manual event cleanup All events are declared in a single place for easier read

Joe Hudson 82 Jun 10, 2021
Topcoat components built with the React library

React Topcoat Topcoat components built with React. Build tasks gulp defaults to gulp build gulp clean Test tasks gulp test:console runs mocha tests in

Daniel Walker 36 Aug 29, 2021
Write React components in Elm

Write React components in Elm This package makes it easy to turn Elm code into React components. Companies that use Elm in production usually start wi

Culture Amp 770 Sep 19, 2022
A complete and cross-platform card.io component for React Native (iOS and Android).

⚠️ Both iOS and Android SDKs have been archived As this wrapper depends on them, there is not much I can do to support new OS versions or fix bugs.. I

Yann Pringault 454 Sep 12, 2022