YvusBellator YvusBellator - 1 year ago 86
React JSX Question

React: Render issue with custom components

I just have started learn React. I have problem with rendering my components.
This is my JSX code:

"use strict";
import React from 'react';
import { render } from 'react-dom';
import ddd from './Components/ddd';
import { Button } from 'office-ui-fabric-react/lib/Button';

const aaa = () => {
return (<span>AAA component</span>);

class ccc extends React.Component {
render(){return (<span>CCC component</span>);}

const bbb = React.createClass({
render: function() {
return (<span>BBB component</span>);

<Button>Button Component</Button>

and this is result in browser

<div id="content">
<div data-reactroot="">
<button aria-labelledby="Button0" class="ms-Button">
<span class="ms-Button-label" id="Button0">Button Component</span>

As you can see my components (aaa,bbb,ccc,ddd) are not rendered properly. Only Button from office-ui-fabric-react works. There is no error from babel or webpack so I have no idea what is wrong.

Answer Source

React component must begin with an Upper-case letter:


From React:

To render a React Component, just create a local variable that starts with an upper-case letter

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download