CODEWITHSUNDEEP
reactjsjsxes6-moduleses6-class
Milton Valler
Milton Valler

Reputation: 63

How do I Make and Use React components?

I'm trying to understand how to create (export maybe?) and use (import ?) components in a React application? For example, the small React app below is an .HTML file and runs fine. It displays random numbers over and over. So, if I wanted to put the class ShowRandomNumbers extends React.Component into a separate file (with an extension....of what .JSX?) and use it in an HTML file with an import statement, what steps would I need to do?

I'm used to the concept of using external JS and CSS files, like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>

and

<link rel="stylesheet" href="../../css/base200.css" />

but those files I simply create with a simple editor and Save-As standalone files. I've Googled about export default and import, and I see syntax like export default App; and import App from './App.jsx'; But no clear "how to." Do I need utilities to create the JSX file?

Step by step would be appreciated. Thank You. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
<title>79E - ALL CDN</title>
</head>

<body>

<div id="container"></div>

<script type="text/babel">

class ShowRandomNumbers extends React.Component {

  constructor(props) {  super(props);  }  

  render() {
    var elapsed = Math.round(this.props.timeNow  / 100);
    var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
    var r1 = this.props.random1;

    return ( 
    <p >Running for  {seconds} seconds.  Random 1 is:  {r1}   Random 2 is:  {this.props.random2}      </p >
    ); 

  }  // render -- END
}  // Class - End

var start = new Date().getTime();

setInterval(function() {
    ReactDOM.render(
      <ShowRandomNumbers 
        timeNow={ new Date().getTime() - start  } 
        random1= { Math.floor(Math.random() * (500 - 100 + 1)) + 100 }
        random2= { Math.floor(Math.random() * (600 - 100 + 1)) + 100 }
      />,  
      document.getElementById('container')     
    );
 }, 50);
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>

</body>
</html>

Upvotes: 0

Views: 106

Answers (1)

TLadd
TLadd

Reputation: 6884

In order to take advantage of import/export, you need to use a module bundler. Webpack is the standard choice for React applications. Basically, this allows you to export components (and other javascript functions, constants, etc) from one file and import them into another file and use them. Webpack builds up a dependency graph by analyzying your imports/exports, starting from your root application file. It bundles all of the necessary code together and gives you a file that you can include via a script tag, like you are used to.

Learning how to setup a project with Webpack can be a little daunting and a stumbling block for a lot of people. If you are just starting out with React, I would strongly recommend checking out Create React App. It gives you a modern React development environment without having to worry about any of the configuration yourself.

Upvotes: 1

Related Questions