We Keep Coding

When mixing Blaze with React, is there a way to pass in code from the html file as a react child?

I have an app that uses both Blaze and React, and we are slowly refactoring out the Blaze, but for the foreseeable future we will still have both.
I currently have a simple blaze template which has been changed into a React component. The template looks something like this:
<template name="myTemplate">
<div>
<h1>{{someTitle}}</h1>
<div>
{{> Template.contentBlock}}
</div>
</div>
</template>
The equivalent component currently looks like this:
export default class MyComponent extends React.Component {
static propTypes = {
someTitle: PropTypes.string.isRequired
}
render () {
return (
<div>
<h1>{this.props.someTitle}</h1>
<div>
{this.props.children}
</div>
</div>
)
}
}
The usage of the Template within another html file looks something like this:
<div>
Some Stuff
<div>
{{#myTemplate someTitle="Some Title"}}
<div>
More stuff within to go within my template
</div>
{{/myTemplate}}
</div>
</div>
What I am currently trying to do is get rid of myTemplate and replace it with MyComponent. Usually this could easily be done by simply putting in {{> React component=MyComponent someTitle="Some Title"}}, but for this case since I have content within the template that probably has to be passed in as the component's children, I am not sure how it should be done.
So the question becomes, how can I pass in that content that is to be rendered within the template to the React component? Is there any way around this?

How to apply CSS style to custom React component

I created a demo react app with 'npx create-react-app my-app'. When I try to apply style to React component nothing happens, but when I apply it to a normal HTML tag like <div or <p> it works. I do not why.
I also tried adding :local in the css file like: :local(.taken-frame)
// index.js =================
import './style.css';
ReactDOM.render(
<TakenFrame className="taken-frame"/>,
document.getElementById('root')
);
// style.css ===============
.taken-frame{
color: blue;
}

Css styles are applied to JSX elements in react but not to the component
Wrong way of applying css styles but className is still a valid prop to the component. You can access this using this.props.className and pass to the div as className like I mentioned in right way example
<TakenFrame className="taken-frame" />
Right way of applying css styles
class TakenFrame extends React.Component {
render(){
return(
<div className="taken-frame">
</div>
//OR
<div className={this.props.className}>
</div>
)
}
}

I use the following style:
import styles from 'yourstyles.css'
...
class TakenFrame extends React.Component {
render(){
return(
<div className={styles.classNameDeclaredInCssFile}>
</div>
)
}
}
yourstyles.css file should look something like:
.classNameDeclaredInCssFile{
//... your styles here
}
In your case you are simply passing a property called "className" to your component but not using it. In your component if you did something like:
class TakenFrame extends React.Component {
render(){
return(
<div className={this.props.className}>
</div>
)
}
}
It would work I expect but I prefer to keep my styles assigned to each component, I find it adds confusion for me as a developer when I am passing styles around the component hierarchy a lot. I hope this helps.

You could use styled components as-well. Please refer https://glamorous.rocks/basics

Aurelia component binding

I'm new to this framework and I was wondering whether or not there's a component binding that allows you to specify the component to be used on a regular HTML element and not a custom one.
Let's say we have a Message component. Would it be possible to use it as:
<div component="message"></div>
instead of
<message></message>
Knockout.js supports this for their components: The "component" binding.

Yep! You can use the as-element custom attribute to do this.
Here's an example: https://gist.run?id=5fc98df81dff7eec2868ea918f6342fb
app.html
<template>
<require from="./message"></require>
<message say="Say"></message>
<div as-element="message" say.bind="what"></div>
</template>
app.js
export class App {
what = 'What!'
}
message.html
<template>
<h1>${say}</h1>
</template>
message.js
import {bindable} from 'aurelia-framework';
export class MessageCustomElement {
#bindable say = '';
}
rendered

React | Multiple render

I just want to know if there is any way I can "draw" in my index.html multiple <div id = "x" /> <div id = "y" /> with REACT, i mean.. i have all my site on index.html with all my template, so i only need to use REACT on an specifics sections...
i tried this i didnt work
HTML
<div id="test" />
<div id="app" />
<script src="public/bundle.js" charset="utf-8"></script>
JSX
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return (<h1>App</h1>);
}
}
class Test extends React.Component {
render () {
return (<h1>Test</h1>);
}
}
render(<App/>, document.getElementById('app'));
render(<Test/>, document.getElementById('test'));
then when i load the page only prints the <h1>Test</h1>... why?

I created a JSFiddle to try a few things out here: http://jsfiddle.net/pof580fd/1/
I found out that by explicitly closing each of the <div> tags I could get it to work, i.e.:
<div id="test"></div>
<div id="app"></div>
I did a little research and it appears that as div is not one of the HTML5 "void elements" (Listed here: https://www.w3.org/TR/html5/syntax.html#void-elements) it is not self-closing and you must use </div>. See this SO question for more details: Are (non-void) self-closing tags valid in HTML5?
Possibly some browsers are lenient about this (I'm using Chrome 52 right now) - but React is not, it appears. The error message I see in the console is:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
(Make sure you're using the "dev" version of React to see these)

You can create a new component and call from that.
import App from "./App";
import Test from "./Test";
class Program extends React.Component {
render() {
<div>
<div id="app"><App /></div>
<div id="test"><Test /></div>
</div>
}
}
and then call
render(<Program />), document.getElementById('...'));

We created a framework to do this with great success.
Have a look at React Habitat.
With it you can just register components eg:
container.register('SomeReactComponent', SomeReactComponent);
Then they auto resolve in the dom via:
<div data-component="SomeReactComponent"></div>

Module breaks when using a react component within a nested component

I am trying to render a simple nested React component called Navbar but when I use another component (or a Link tag in this case) within it, the console gives me 'Uncaught Error: Cannot find module "../Navbar"'. If I remove the Link tag, the h1 tag is shown and there are no errors. I can use the Link tag in the App component so I know it should work in the project.
My App.js code looks like this:
import React from 'react';
import Navbar from '../Navbar';
import { RouteHandler, Link } from 'react-router';
export default React.createClass({
render: function() {
return (
<div className='App'>
<Link to="about">About</Link>
<Navbar />
<RouteHandler />
</div>
);
}
});
My Navbar.js code looks like this:
import React from 'react';
import { PureRenderMixin } from 'react/addons';
import { Link } from 'react-router';
export default React.createClass({
mixins: [PureRenderMixin],
render: function () {
return (
<h1>Navbar</h1>
<Link to="about">About</Link>
);
}
});
I'm using React-Router, Webpack, and Browser-Sync but besides nested components, routing, building, and syncing seem to be working fine.

Your render method in Navbar is trying to return two values at once, the <h1> and the <Link>. This is a syntax error. You need to wrap them in a single element, e.g. a <div>.
See also http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html