I'm using django-pipeline along with browserify based on the documentation here -
http://gregblogs.com/how-django-reactjs-and-browserify/
I have it working perfectly fine when loading NPM/Bower packages like so -
'build_js': {
'source_filenames': (
'js/bower_components/jquery/dist/jquery.js',
'bootstrap/js/bootstrap.js',
'js/bower_components/react/react-with-addons.js',
'js/bower_components/react/react-dom.js',
'datatables/js/jquery.dataTables.js',
'datatables/js/dataTables.bootstrap.js',
'js/node_modules/marked/marked.min.js',
'js/node_modules/react-router/umd/ReactRouter.js',
'js/child.js',
'js/parent.js',
'js/build.browserify.js',
),
'output_filename': 'js/build_js.js',
The problem is I'm trying to reference the child.js and parent.js within the build.browserify.js
This is the contents of the 3 files -
child.js
var Child = React.createClass({
render: function(){
return (
<div>
and this is the <b>{this.props.name}</b>.
</div>
)
}
});
parent.js
var Parent = React.createClass({
render: function(){
return (
<div>
<div> This is the parent. </div>
<Child name="child"/>
</div>
)
}
});
build.browserify.js
ReactDOM.render(
<Parent />,
document.getElementById('content')
);
I actually get 3 errors in my browser -
The following happens on my child.js and parent.js files both on line 4 -
Uncaught SyntaxError: Unexpected token <
And then I get this on my build.browserify.browserified.js at line 3
Uncaught ReferenceError: Parent is not defined
This is the contents of that file -
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
ReactDOM.render(
React.createElement(Parent, null),
document.getElementById('content')
);
},{}]},{},[1]);
edit -
If I put all code in a single build.browserify.js file like this it works -
var Child = React.createClass({
render: function(){
return (
<div>
and this is the <b>{this.props.name}</b>.
</div>
)
}
});
var Parent = React.createClass({
render: function(){
return (
<div>
<div> This is the parent. </div>
<Child name="child"/>
</div>
)
}
});
ReactDOM.render(
<Parent />,
document.getElementById('app')
);
#taylorc93 is on the right track with this, but you're missing an additional step.
In addition to having to do require('./parent') in any file where you want to include the parent module, you also need to actually export the content of the parent.js file. So, parent.js should look like:
child.js
var React = require('react');
modules.export = React.createClass({
displayName: 'Child', // Always setting React component's displayName will make your error messages easier to understand
render: function(){
return (
<div>
and this is the <b>{this.props.name}</b>.
</div>
)
}
});
parent.js
var React = require('react');
var Child = require('./child');
modules.export = React.createClass({
displayName: 'Parent', // Always setting React component's displayName will make your error messages easier to understand
render: function(){
return (
<div>
<div> This is the parent. </div>
<Child name="child"/>
</div>
)
}
});
build.browserify.js
var ReactDOM = require('react-dom');
var Parent = require('./parent');
ReactDOM.render(
<Parent />,
document.getElementById('app')
);
Also, while not required, it's good practice to give Component files uppercase names, just like you would class files in Java. Most apps will also name the root file as app.js or main.js or something like that, rather than build.browserify.js which is a bit vague since technically the file has nothing to do with building or with Browserify.
Related
I'm trying to use DRY in React JS. I'm trying to use the same HTML partial in different files
partial:
var AdminMenu = React.createClass({
getInitialState: function() {
return {};
},
render: function() {
return (
<h1>Menu</h1>
);
}
});
I'm requeiring it in another file:
require('./scripts/adminMenu.js');
ReactDOM.render(
<AdminMenu/>,
document.getElementById('content')
);
But I'm getting an error:
Uncaught ReferenceError: require is not defined
this scripts are included on html page like:
<script type="text/babel" src="scripts/admin.js"></script>
I'm using webpack
If you are not using any module bundler like webpack or etc.
You should assign you components to some javascript global object, because objects from .jsx are not put in global scope
So here is the solution (used window object here)
Defined module:
window.AdminMenu = React.createClass({
getInitialState: function() {
return {};
},
render: function() {
return (
<h1>Menu</h1>
);
}
});
Where you use it:
ReactDOM.render(
<window.AdminMenu/>,
document.getElementById('content')
);
You have to use
const { Component } = React;
const { render } = ReactDOM;
in place of
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
Consider to use ES6 modules instead of require with React
export a module:
// src/hello.js
// export as default
export default const hello = ({name}) => (
<h1>Hello {name}</h1>
)
import a module:
// src/index.js
// import from relative directory (src)
import Hello from './hello'
const App = () => {
return (
<div>
<Hello name="Pavel" />
</div>
)
}
You should read more about modules for example here: https://www.sitepoint.com/understanding-es6-modules/
The main problems in your existing code are:
It looks, in spite of that you are using Webpack, you use it wrong way. In your final bundle (final JS file), it shouldn't contain any 'require' keywords. Did you use Babel with your webpack? Please, show us your WebPack config.
Your AdminMenu file looks not like module. Your adminMenu file should contain 'export' keyword, after that you will be able to 'require' or 'import' it from other files.
Also, you can write questions in comments with Russian if it is more convenient for you
When I run my code on browser, I'm getting this error message.
Uncaught Invariant Violation: MyComponent.render(): A valid React
element (or null) must be returned. You may have returned undefined,
an array or some other invalid object.
I'm using Atom as my code editor and running on a chrome web server. Here is my code.
<body>
<div id="react-comp"></div>
<script type="text/babel">
var MyComponent = React.createClass({
render: function() {
return
<div>
<h1>{this.props.text}</h1>
</div>;
}
});
ReactDOM.render(
<div>
<MyComponent text="Hello World"/>
<MyComponent text="Hello"/>
</div>
, document.getElementById('react-comp'));
</script>
</body>
It might be a jsx transforming issue? or any other thing?
You are likely hitting JavaScripts automatic semicolon insertion after return. Just remove the line break before your div.
var MyComponent = React.createClass({
render: function() {
return <div> // Change this line
<h1>{this.props.text}</h1>
</div>;
}
});
I don't know which version of React you are using, as I know some old version makes error if the JSX syntax isn't wrapped with ().
Try to do this on MyComponent's render method:
render: function() {
return (
<div>
<h1>{this.props.text}</h1>
</div>
);
}
Just change your render function to
var MyComponent = React.createClass({
render: function() {
return (
<div>
<h1>{this.props.text}</h1>
</div>
);
}
});
Daniel's suggestion is also correct.
The react class myComponent is not rendering inside the element example1.
what I am able to get in console is
You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx
code
<script type="text/jsx">
var myComponent = React.createClass({
render: function() {
return (
<h2>{this.props.name} wants to eat {this.props.food}</h2>
);
}
});
React.render(
<div>
<myComponent food="fruits" name="Raj1"/>
<myComponent food="Veggies" name="Raj2"/>
<myComponent food="Chicken" name="Raj3"/>
<myComponent food="Burger" name="Raj4"/>
</div>,
document.getElementById('example1'));
</script>
You must capitalize your react classes
var MyComponent = React.createClass({
render: function() {
return (
<h2>{this.props.name} wants to eat {this.props.food}</h2>
);
}
});
working fiddle example
I've followed a couple of examples in an attempt to get access to a parameter from a Route in the React component that handles it. However the result of console.log on this.props from inside the render or componentDidMount is always {} when I'd expect it to contain the gameId from the gamesView route.
client.js which starts the Router:
// HTML5 History API fix for local
if (config.environment === 'dev') {
var router = Router.create({ routes: routes });
} else {
var router = Router.create({ routes: routes, location: Router.HistoryLocation });
}
router.run(function(Handler) {
React.render(
<Handler />,
document.getElementById('app')
);
});
routes.js with some routes removed for simplicity:
var routes = (
<Route name='home' path='/' handler={app}>
<DefaultRoute handler={home} location="/" />
<Route name='gamesView' path='/games/:gameId' handler={gamesView} />
</Route>
);
module.exports = routes;
...and app.js which wraps the other routes, I've tried it both with and without {...this.props} in the RouteHandler. If I console.log(this.props) from inside the render function here is also returns {}:
var App = React.createClass({
render: function() {
return (
<div className='container'>
<div className='row'>
<RouteHandler {...this.props} />
</div>
</div>
);
}
});
module.exports = App;
Finally the gamesView React component that I expect to see the props object. Here this.props is also {} and the following results in the error TypeError: $__0 is undefined var $__0= this.props.params,gameId=$__0.gameId;:
var GamesView = React.createClass({
render: function() {
var { gameId } = this.props.params;
return (
<div>
<h1>Game Name</h1>
<p>{gameId}</p>
</div>
);
}
});
module.exports = GamesView;
Anybody have any ideas?
You won't see those params until you are at the component defined in your router. App won't know anything about them. If you put the console.log(this.props.params) in your gamesView component, however, you should see them.
After discussing on the React Router (RR) Github it turned out this was due to me using an older version of RR (v0.11.6).
Looking at the example in the docs for that release it showed that I needed to use a Router.State mixin and then get the expected param via var gameId = this.getParams().gameId;.
Without upgrading RR the working version of my original example for GamesView becomes:
var React = require('react');
var Router = require('react-router');
var { Route, RouteHandler, Link } = Router;
var GamesView = React.createClass({
mixins: [ Router.State ],
render: function() {
var gameId = this.getParams().gameId;
return (
<div>
<h1>Game Name</h1>
<p>{gameId}</p>
</div>
);
}
});
module.exports = GamesView;
Hi i made different and separated react .jsx modules (files) and i want to call them and render from a single file called app.jsx.
This is one of the modules:
var React = require('react'),
mui = require('material-ui'),
DatePicker = mui.DatePicker;
var DatePicker = React.createClass({
render: function() {
return (
<div className="DatePicker">
<DatePicker hintText="Elige una fecha" mode="landscape" />
</div>
);
},
});
module.exports = DatePicker;
This is the app.jsx file where i want to launch the render of the separated modules:
(function () {
var React = require('react'),
injectTapEventPlugin = require("react-tap-event-plugin"),
Main = require('./components/main.jsx'); // Our custom react component
DatePicker = require('./components/DatePicker.jsx');
//Needed for React Developer Tools
window.React = React;
//Needed for onTouchTap
//Can go away when react 1.0 release
injectTapEventPlugin();
React.render(<Main />, document.body);
React.render(<DatePicker />, document.getElementById('DatePicker'));
})();
The Main component is rendering but not the DatePicker, is this the correct method to render multiple separated components or i have to change my mind and build the application in a different way?
Regards,
Javier
This line is causing issues:
React.render(<Main />, document.body);
This will replace the content of the <body> tag with a React.js component. It's why the following line isn't working:
React.render(<DatePicker />, document.getElementById('DatePicker'));
The <div id='DatePicker' /> was replaced by your <Main /> component.
So you have to either do the following:
<body>
<div id='Main'></div>
<div id='DatePicker'></div>
</body>
React.render(<Main />, document.getElementById('Main'));
React.render(<DatePicker />, document.getElementById('DatePicker'));
Or let the <Main /> component render the <DatePicker /> component.
var Main = React.createClass({
render: function () {
return <div><DatePicker /></div>;
}
});