While you’d be forgiven for thinking that React can only be used along with npm, Webpack, and an assortment of other tooling, the truth is that React doesn’t need any of this. React works great by itself.

You can actually import React into any page on your application with two simple <script /> tags. Just as you’d import jQuery.

This snippet loads React from unpkg, a CDN that lets you load NPM packages as <script /> tags.

Did you notice how the data prop in the above example is just defined as a normal variable? Keep in mind that React code is Just JavaScript, and ReactDOM.render() is just a JavaScript function.

Once you’ve rendered a React Element to a DOM node, React will be in charge of managing that node’s children. If the component’s state changes due to an event, a network call, a Redux action, or any other reason, React will automatically update the DOM.

But what if you want to make some changes to the rendered element from the outside?

If you start modifying the DOM manually, React will lose track of the current state of the world, and will start doing funny things. If your application is important, these funny things will make you cry.

Do not manually change DOM nodes that were rendered by React.

Of course, your application can still communicate with your React components; you’ll just need to do so by passing in new props to your React Elements with ReactDOM.render(). For example:

// The first call to `ReactDOM.render()` creates appropriate DOM nodes
ReactDOM.render(<Chart data={[[1,0.1],[2,0.5],[3,0.3]]}/>,
document.getElementById('chart1'));// The second call to `ReactDOM.render()` just updates the props
ReactDOM.render(<Chart data={[[1,0.1],[2,0.5],[3,0.3],[4,0.2]]}/>,
document.getElementById('chart1'));

You can even pass in callback functions as props, allowing your components to communicate with your existing application code.

Of course, even if you haven’t got a build system, you can still use JSX! You’ll just need to make sure you compile it to JavaScript before it hits the browser.

The best way to build JSX into JavaScript this will depend on the platform you’re using. But you’ll always have the option of using a Webpack-based build system and plonking the output JavaScript files in your public directory. After all, React is just JavaScript.