PaulTenna2000 PaulTenna2000 - 4 years ago 135
Javascript Question

Javascript ReactJs Put JsCss and Component in external files

I have this code in the app index.js file.

As you can see its got some styles and also a button component.

Here is the full code:

import React from 'react';
import ReactDOM from 'react-dom';

//Styles Here
var buttonStyle1 = {
margin: '10px 10px 10px 0',
padding: '4px 20px',
border: '1px solid grey'
};

var buttonStyle2 = {
margin: '10px 10px 10px 0',
padding: '4px 10px',
border: '1px solid blue',
borderRadius: 0
};

//Component Here
var Button = React.createClass({
render: function () {
return (
<button
name={this.props.name}
className={this.props.className}
style={buttonStyle1}
onClick={this.handleClick}>{this.props.label}
</button>
);
},
handleClick: function() {
alert('Button pressed name is: '+ this.props.name);
}

});

module.exports = Button;


ReactDOM.render(
<div>
<Button name="button1" label="Button" className="btn btn-success" />
<Button name="button200" label="Label Here" className="btn btn-default" />
<Button name="button20" label="Label again" className="btn btn-default" />
</div>,
document.getElementById('root')
);


What I nee to do is to add the part where it says //Styles Here into an external js file and the same to the part where it says //Component Here so they are both on external files.

How can I do this?

**//Update:**


Here's the current code all now in the same level as index.js

//index.js:
import React from 'react';
import ReactDOM from 'react-dom';

import Button from './Buttons';


ReactDOM.render(
<Button style={{fontSize: '14px'}} name='Hi' label='button'/>,
document.getElementById('root')
);

//ButtonStyles.js
module.exports = {
buttonStyle1 : {
margin: '10px 10px 10px 0',
padding: '4px 20px',
border: '1px solid grey'
};

buttonStyle2 : {
margin: '10px 10px 10px 0',
padding: '4px 10px',
border: '1px solid blue',
borderRadius: 0
};
}

//Buttons.js

import React from 'react';
import ReactDOM from 'react-dom';

var Button = React.createClass({
render: function () {
return (
<button
name={this.props.name}
className={this.props.className}
style={this.props.style}
onClick={this.handleClick}>{this.props.label}
</button>
);
},
handleClick: function() {
alert('Button pressed name is: '+ this.props.name);
}
});


No button is showing

Answer Source

Create the separate file for Button component, button.js like this:

import React from 'react';
import ReactDOM from 'react-dom';

var Button = React.createClass({
  render: function () {
    return (
      <button
        name={this.props.name}
        className={this.props.className}
        style={this.props.style}
        onClick={this.handleClick}>{this.props.label}
      </button>
    );
  },
  handleClick: function() {
     alert('Button pressed name is: '+ this.props.name);
  }

});

export default Button;

And import this file wherever you want like this:

import Button from './button' //path to file

Use it like this:

<Button />

For styling, create a file style.js, like this:

module.exports = {
  buttonStyle1 : {
     margin: '10px 10px 10px 0',
     padding: '4px 20px',
     border: '1px solid grey'
  },

  buttonStyle2 : {
     margin: '10px 10px 10px 0',
     padding: '4px 10px',
     border: '1px solid blue',
     borderRadius: 0
  }
} 

import this file like this:

import Style from './style' // path

And use it like this: <p style={Style.buttonStyle2}></p>

Let me know if you need any help in this.

check the jsfiddle: https://jsfiddle.net/jty8rggk/

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