Get Started with Modern React: Intro, Setup, and ES6 Basics
S01・V03: Try React without JSX
- We will set up a very basic HTML page from scratch.
- We will load “react” and “react-dom” from a content delivery network, for both development and production deployment.
- We will render a simple React component on our webpage.
Set Up
First, let’s create a new HTML page from scratch.
Using Terminal, we’ll create a folder called try-react-without-jsx.
mkdir try-react-without-jsxChange directory into the new folder.
cd try-react-without-jsxCreate an index.html file.
touch index.htmlNow, we’ll open the folder in a code editor. We’ll be using Atom.
atom .HTML
We can now start writing HTML.
Declare the DOCTYPE to be HTML, and add html tags.
Add the head and body.
Within the head tags, set UTF-8 as the character encoding for the page Add a title to the page.
Now, within the body, let’s add an h2 header, and a couple of ps.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Try React without JSX</title>
</head>
<body>
<h2>My Website</h2>
<p>This could be a very simple website somewhere on the web.</p>
<p>Imagine there is some content here...</p>
</body>
</html>Save the file, and open the file in the browser. Now, we have a very basic HTML page showing in our browser.
React
We can now add React to our existing webpage. We will add a “Like” button, using a React component.
First, we will add a node, that will act like a container for our React functionality, within our HTML webpage. We will add an empty div under our last p, with an id of like_button_container.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Try React without JSX</title>
</head>
<body>
<h2>My Website</h2>
<p>This could be a very simple website somewhere on the web.</p>
<p>Imagine there is some content here...</p>
<div id="like_button_container"></div> </body>
</html>This will serve as the container for rendering our React component.
Now, we will need to load react before we can use it. We will load it from a content delivery network.
Let’s add a script tag. We will add the source of the React from the CDN. The React documentation recommends that we add a crossorigin attribute.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Try React without JSX</title>
</head>
<body>
<h2>My Website</h2>
<p>This could be a very simple website somewhere on the web.</p>
<p>Imagine there is some content here...</p>
<div id="like_button_container"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> </body>
</html>Now that we have loaded react, we will need to also load react-dom, which is in a separate module.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Try React without JSX</title>
</head>
<body>
<h2>My Website</h2>
<p>This could be a very simple website somewhere on the web.</p>
<p>Imagine there is some content here...</p>
<div id="like_button_container"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react.development.js" crossorigin></script> </body>
</html>We now have all of the necessary React library code loaded.
We will now add our React code within script tags. We will explain what this code does in detail during this course, but for the time being, we will simply paste it, so that you can see the overall process of adding React to an existing webpage.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Try React without JSX</title>
</head>
<body>
<h2>My Website</h2>
<p>This could be a very simple website somewhere on the web.</p>
<p>Imagine there is some content here...</p>
<div id="like_button_container"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script> function LikeButton () { const [liked, setLiked] = React.useState(false); if (liked) { return "You liked this"; } return React.createElement( "button", { onClick: () => setLiked(true) }, "Like" ); } const element = React.createElement(LikeButton, null, null); const domContainer = document.getElementById("like_button_container"); ReactDOM.render(element, domContainer); </script> </body>
</html>Save the file, then go to your browser, and reload the page. You will see a “Like” button appear at the bottom of your page. Click on the button. You will see the text “You liked this” appear. This demonstrates that our React “Like” button is working. We have successfully added React to our webpage.
Please also note that you can use this setup in production as well, by adjusting our source imports from the CDN. Instead of using development files, we will use minified production files.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Try React without JSX</title>
</head>
<body>
<h2>My Website</h2>
<p>This could be a very simple website somewhere on the web.</p>
<p>Imagine there is some content here...</p>
<div id="like_button_container"></div>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> <script>
function LikeButton () {
const [liked, setLiked] = React.useState(false);
if (liked) {
return "You liked this";
}
return React.createElement(
"button",
{ onClick: () => setLiked(true) },
"Like"
);
}
const element = React.createElement(LikeButton, null, null);
const domContainer = document.getElementById("like_button_container");
ReactDOM.render(element, domContainer);
</script>
</body>
</html>Now, your React-enabled webpage can be deployed to production.
Summary
We set up a very basic HTML page from scratch, we loaded react and react-dom from a content delivery network, for both development and production deployment, and we rendered a simple React component on our webpage.
Next Up…
In the next video, we will try React with JSX, for development purposes.