I'm having a bit of a time with rendering in React:

1) For a project I'm working on, there is no problem displaying an image that is served from a website, but when I try to serve a file from my local machine/saved on my hard drive, I get 404 errors.

This works:

import React, { Component } from 'react'
import { render } from 'react-dom'


    export default class aPage extends Component {

      render() {
        return (
          <div>
            <div className="kittensExample">
               <img className="kittens" src = '' />
            </div>
          </div>
        )
      }
    }

This, does not:

import React, { Component } from 'react'
import { render } from 'react-dom'


export default class aPage extends Component {

  render() {
    return (
      <div>
        <div className="localCompKittens">
          <img className="kittens" src = './img/kittens.jpg' />

        </div>

      </div>
    )
  }
}

2) How can I display javascript snippets in jsx/react without any error? (like showing code snippets here on stack overflow). The browser seems to attempt to run the code (and rejects it) the '<script&gt';...'</script&gt';' implementation didn't work :)

Many thanks!

I'm having a bit of a time with rendering in React:

1) For a project I'm working on, there is no problem displaying an image that is served from a website, but when I try to serve a file from my local machine/saved on my hard drive, I get 404 errors.

This works:

import React, { Component } from 'react'
import { render } from 'react-dom'


    export default class aPage extends Component {

      render() {
        return (
          <div>
            <div className="kittensExample">
               <img className="kittens" src = 'https://kittensonsomewebpage.jpg' />
            </div>
          </div>
        )
      }
    }

This, does not:

import React, { Component } from 'react'
import { render } from 'react-dom'


export default class aPage extends Component {

  render() {
    return (
      <div>
        <div className="localCompKittens">
          <img className="kittens" src = './img/kittens.jpg' />

        </div>

      </div>
    )
  }
}

2) How can I display javascript snippets in jsx/react without any error? (like showing code snippets here on stack overflow). The browser seems to attempt to run the code (and rejects it) the '<script&gt';...'</script&gt';' implementation didn't work :)

Many thanks!

• javascript
• css
• image
• reactjs
• webpack-dev-server

2 Answers 2

So these seem like two different questions.

The first has to with where the file is being served from. Try removing the './' and change it to a / or whatever the public path is that's serving up your app locally. If you're using webpack, you can use a loader (file-loader) to let you do require('path to image') and when it gets spit out it it'll have the right path.

The second is actually really interesting. You can't just use <pre> and <code/> because JSX isn't normal HTML. It's a preprocesser that will do the work of creating React.createElement's for you where needed. Let's see what you might get if you tried the following

var Code = React.createClass({
  render() {
    return (
      <pre>
        <code>
          function foo() {}
        </code>
      </pre>
    );
  }
});

ReactDOM.render(
  <Code />,
  document.getElementById('container')
);

Close! You get function foo() rendered to the screen. We're missing the {} because that's one way JSX knows to evaluate a JavaScript expression. But we can actually use this to our advantage. Use the ES6 string literals, which can be multiline, surrounded by the JSX expression syntax ({}) to display a code snippets.

var Code = React.createClass({
  render: function() {
    return (
      <pre>
        <code>
         {`function foo() {}`}
        <code/>
      </pre>
    );
  }
});

ReactDOM.render(
  <Code />,
  document.getElementById('container')
);

That way, you can kind of get around some of the quirks/syntax JSX uses and still output code.

1. Use this syntax

<img className="kittens" src={require('./img/kittens.jpg')} />

Using url-loader with webpack. This will inline some images if it's not too big and copy the file to your distribution bundle if it's too big.

2. I believe you can have webpack escape all your code for you by using template literals:

   < div> {`my code`} < /div>