Introduction to React.js (cont)
January 10, 2021
Table of Contents
On the previous post we created a basic sample React.js application using the create-react-app utility.
Now, on this post we are going to create the same application but using the React.js CDN Links. This method is more convenient when you already have an existing website to which you want to integrate React.js code.
When you use the CDN links you don't need to have installed either Node.js or the npm utility.
Sample App, using CDN Links
On a new html file on your website put the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<style>
.header {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.container {
margin: 10px;
border: 1px dashed black;
}
.item {
margin: 5px;
padding: 5px;
border: 1px dashed black;
}
</style>
<script type="text/babel">
const notes = [
{id: 1, title: 'Item 1' },
{id: 2, title: 'Item 2' },
{id: 3, title: 'Item 3' }
];
function Header() {
return (
<div className="header">Sample Notes App</div>
)
}
function Notes(props) {
const notes = props.notes;
return (
<div className="container">
{notes.map((note) =>
<Note key={note.id} value={note.title} />
)}
</div>
);
}
function Note(props) {
return (
<div className="item">{props.value}</div>
)
}
ReactDOM.render(
<>
<Header />
<Notes notes={notes} />
</>,
document.getElementById('root')
)
</script>
</body>
</html>
Then, open your browser and enter the url of your html page to view the sample app.