Using CDN in React

user_13286499 0
Viewed 6956

I've installed React via NPM and I'm having difficulty using CDN.
I included the CDN scripts in the ./public/index.html file but when I use it in any component, it doesn't recognize the third-party package that I'm trying to use.

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>

Tried to use Axios but it doesn't work:

axios.post("https://burger-builder-c5a0d.firebaseio.com/orders.json", order)
            .then(response=>{
                alert("You ordered successfully!");  //shows an alert indicating a successful process
                console.log(response); //sends results to the server
                this.setState({
                    showModal: false, //closes the modal
                    loading:false,
                    purchasable: false
                })
               
            }).catch(error=>{
                       this.setState({
                            showModal: false,
                            purchasable: false,
                            loading: false
                        })
                console.log(error);
            })

Tried to use redux and it's also not being recognized

const reduxStore= redux.createStore;
       const store =  createStore();

Here's the error that I'm getting

react-router redux reactjs cdn
1 Answers

Did you import the axios or redux package via require? Like this:

const axios = require('axios');

EDIT

You're right. You don't even need to require something since you're importing from the CDN

I tried with the HTML boilerplate from the React.js documentation and imported the CDN from your source.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function fetch() {
        axios
          .get("https://jsonplaceholder.typicode.com/todos/1")
          .then(response => console.log(response.data));
      }
      ReactDOM.render(<h1>{fetch()}</h1>, document.getElementById("root"));
    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this section for a production-ready setup with JSX:
      https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

      In a larger project, you can use an integrated toolchain that includes JSX instead:
      https://reactjs.org/docs/create-a-new-react-app.html

      You can also use React without JSX, in which case you can remove Babel:
      https://reactjs.org/docs/react-without-jsx.html
    -->
  </body>
</html>
user_111456760
Related