I am basically starting out with React and I am following on from this tutorial https://reactjs.org/docs/hello-world.html and Getting started guide to React https://reactjs.org/docs/add-react-to-a-website.html.
My template now looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root')
);
</script>
</body>
</html>
This works but some packages I would like to try out don't have CDNs to load them from. Specifically https://www.draftail.org/docs/getting-started.
Do I have to set up a node enviroment next with npm init -y and then npm install --save draftail draft-js@0.10.5 react react-dom ? But I already have react install through the CDN so what should I be doing now as I have no idea if these packages will conflict or not.
How can I bring something installed in node_modules into the browser at this point along with CSS files?
If the package doesn't exist in a format for immediate browser consumption, the right approach is to build your app from Node so that you can import the package and use it.
You will have to remove all of these script tags:
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root')
);
</script>
Instead, once your Node project is set up, use Webpack (or whatever bundler you're using)'s bundled output script and host it on your site. It'll probably look something along the lines of
<script src="bundle.js"></script>
Transitioning to a Node-based project has other benefits as well:
Note that create-react-app is a great starting boilerplate for a React project - just install it and you won't really have to mess with much of the setup at all, you'll be able to just start writing the code you want.