1

I've started working on a project with uses ReactJS that I'm new to and I don't understand the structure of the React components, it doesn't look like most examples I find in tutorials. This is pretty much what I got from the structure now:

React are loaded via downloaded javascripts in html file:

<script src="vendor/babel.min.js"></script>
<script src="vendor/react.production.min.js"></script>
<script src="vendor/react-dom.production.min.js"></script>
<script src="vendor/reactstrap.min.js"></script>

A typical component in the project looks like this:

export default class ExamplePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return <p>Example page</p>
  }
}

From most examples I see in tutorials, they start with:

import React from 'react';

Why is that not needed here? There is also no package.json file from npm to be found in the project at all, just a vendor map with all of the libraries used.

Further on, I now would like to use the Input component from reactstrap, so I downloaded it from cdn:

https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js

and added a reference to it similar to the first code snippet and changed render method above to:

render() {
    return (
      <div>
        <p>Buy orders</p>
          <Input type="email"
                 name="email"
                 className="border-right-0"
                 placeholder="Enter email"/>
      </div>
    )
  }

But I'm getting "Input is not defined" in console output once it runs, it obviously can't find the component.

dance2die
  • 35,807
  • 39
  • 131
  • 194
Lucas Arrefelt
  • 3,879
  • 5
  • 41
  • 71
  • Does the `index.html` file contain a `babel-standalone` script? – Tholle Aug 07 '18 at 20:38
  • Except from babel on the first row in the first code snippet, it seems to be used like this also: – Lucas Arrefelt Aug 07 '18 at 20:42
  • `babel.min.js` is most likely the [`babel-standalone`](https://www.npmjs.com/package/babel-standalone). It's fine for some use cases listed in the package readme, but it will be difficult to get working with all the different modules that exist. It might be worth introducing a build step like Webpack, which would allow you to do `import React from 'react';` like you mentioned. – Tholle Aug 07 '18 at 20:49
  • Hmm okay, could you maybe link a tutorial that could point me in the right direction regarding adding a webpack? I'm developing in IntelliJ if that matters. – Lucas Arrefelt Aug 07 '18 at 20:53
  • It's difficult to say without knowing more about your project, but it might be possible to migrate to something like [Create React App](https://www.google.se/search?q=create+react+app&rlz=1C5CHFA_enSE715SE715&oq=create+react+app&aqs=chrome..69i57j69i60l3j35i39l2.1719j0j7&sourceid=chrome&ie=UTF-8). The [Webpack docs](https://webpack.js.org/) are also a great resource if you want to do the Webpack configuration yourself. – Tholle Aug 07 '18 at 20:55
  • I understand that, unfortunately there is really not that much more to share. What really flies over my head is that cannot be found even though I added reactstrap.min.js to scripts. Any thought on that? – Lucas Arrefelt Aug 07 '18 at 21:00
  • 1
    It might be that by using the UMD version of `reactstrap`, you have to use `Reactstrap.Input` instead. – Tholle Aug 07 '18 at 21:04
  • That worked. However my IDE marks it red and I cant go to it's implementation. Is that something you think would improve with imports instead? What is the downside of this, just harder management? – Lucas Arrefelt Aug 07 '18 at 21:12
  • You might be able to go to implementation in npm packages, but it might just be minified unreadable code as well. Doing it with one script tag per package gets messy when you have dependencies with dependencies, and trying to have a proper version management gets hairy quick. – Tholle Aug 07 '18 at 21:14
  • 1
    I understand, thanks for your input and help! – Lucas Arrefelt Aug 07 '18 at 21:18

1 Answers1

1

The global that reactstrap exposes from its UMD is Reactstrap, so you need to use the Reactstrap.Input component.

Example

render() {
  return (
    <div>
      <p>Buy orders</p>
      <Reactstrap.Input
        type="email"
        name="email"
        className="border-right-0"
        placeholder="Enter email"
      />
    </div>
  );
}
Tholle
  • 108,070
  • 19
  • 198
  • 189