-
React uses the same APIs to control and update the DOM that we did in the previous lesson.
-
Instead of creating DOM elements, we’ll create React elements and then hand those off to
react-domto handle turning those into DOM elements and putting them into the page. -
If you’ve ever learned or used React before, you’re probably more familiar with JSX than React’s
createElementAPI, but it’s important to understand thecreateElementAPI first so you understand the magic. -
Get
reactandreact-domfrom unpkg.com, using a fixed version:
unpkg.com/[email protected]/umd/react.production.min.js
unpkg.com/[email protected]/umd/react-dom.production.min.js
- And add a
scripttag to the page:
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script><body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script type="text/javascript">
const rootElement = document.getElementById('root');
// specify properties on creation, as an object
const element = React.createElement('div', {
className: 'container',
children: 'Hello World'
});
// use `react-dom` to render those elements to the page
console.log(element);
// props argument is what we passed as a second argument
// we can also specify it as an array
// Example: children: ['Hello World', ", Goodbye World"]
ReactDOM.render(element, rootElement);
</script>
</body>- Now with
reactyou can createReact.createElementand usereact-domto render those elements to the page. React.createElementAPI is as simple as the element that you want to create<div>, and then an object that has all of the props that you want to have applied,className,children.- Just as a convenience, you can provide the
childrenwith any number of arguments after the props argument as well.