Basic Steps

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.</script><script src="”https://unpkg.com/react@16.4.1
/umd/react.production.min.js" "="">
</script>
<script src="”https://unpkg.com/react-dom@16.4.1
/umd/react-dom.production.min.js" "="">
</script>

Designing Components

In a typical React app, your entire page’s content will be rendered by a single top-level component. For example, apps generated by create-react-app will have a top-level <app> component. But when using React within an existing application, you’ll probably only want to React to handle specific parts of each page.</app>

In fact, both can be implemented using exactly the same function: ReactDOM.render()

Starting React

The ReactDOM.render() function is how you start React. More specifically, it lets you add a React Component to an existing DOM node.

In a typical React app with a top-level <app> element, the application will be started by rendering <app> to an HTML element that is styled to take up the entire viewport.</app></app>

This example is taken from create-react-app. See the original source on GitHub.

ReactDOM.render(<app>,
document.getElementById(‘root’));
</app>

Of course, React doesn’t limit you to rendering a single component that takes up the entire screen. It lets you render as many components as you like, to whichever nodes you like. For example, you could render a <signupform pitch="’Join" the="" party!’="">element to the #sidebar div, and a <chart data="{data}"> element to #chart1:</chart></signupform>

Make sure that you don’t run this script until the elements with ids sidebar and chart1 exist!
If it helps, you can call
ReactDOM.render() from a window.onload handler.
ReactDOM.render(<signupform title="’Join" the="" party!’="">,
document.getElementById(‘sidebar’));
const data = [[1, 0.1], [2, 0.5], [3, 0.3]];
ReactDOM.render(<chart data="{data}">,
document.getElementById(‘chart1’));</chart>
</signupform>

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?

React without JSX

Your browser doesn’t understand JSX. It only understands vanilla JavaScript. And if you’re not using Babel or Webpack to compile your existing JavaScript code, you won’t be able to use JSX. you don’t need to use JSX.

The thing about JSX is it is just a shorthand way of writing React.createElement(). If your application doesn’t use Babel, you can still manually write out React.createElement().

For example, here is the above code example, but with JSX elements converted into React.createElement() calls:

ReactDOM.render
(<app>
,document.getElementById(‘root’));
</app>

ReactDOM.render(
React.createElement(SignUpForm, { title: ‘Join the party!’ }),
document.getElementById(‘sidebar’)
);const data = [[1, 0.1], [2, 0.5], [3, 0.3]]
ReactDOM.render(
React.createElement(Chart, { data: data }),
document.getElementById(‘chart1’)
);

React with JSX

You can use a bundler like a webpack or Browserify, so you can write modular code and bundle it together into small packages to optimize load time.

The smallest React example looks like this:

For example, here is the above code example, but with JSX elements converted into React.createElement() calls:

import React from ‘react’;
import ReactDOM from ‘react-dom’;ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘root’)
);

This code renders into a DOM element with the id of root, so you need <div id="”root”"></div> somewhere in your HTML file.

Similarly, you can render a React component inside a DOM element somewhere inside your existing app is written with any other JavaScript UI library.