These tutorials will give you a deeper understanding of React.js. Learn with examples from the Javascript UI library, covering the basics and the advanced.

Browse by tag:

RoutingPropsStateDOMStylingComponentsEvents

Setting up a React environment using a single HTML file

DOM

React takes what we have written, and passes it to a function called React.createElement(). This function turns our code into DOM elements with all of their appropriate handlers, styles and attributes laid out.

What we get with react is this idea of composability because all we have to do is think about React elements as smaller pieces of UI, and build out those small pieces of UI in these code blocks we call components.

Everything you do in react will done through this createElement() method however, as you’ll see in the coming material,this has now been abstracted away from us and we now have the ability to use this new technology called JSX to write out our react elements.

Create an index.html file with the following scaffolding

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hello World React</title>
</head>

<body>
  <div id="target"></div>
</body>

<script>
  // Our app goes in between these script tags
</script>

</html>

Just before the script tags, add in our packages that we need

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script>
  // Our app goes in between these script tags
</script>

Create a DOM element using React.createElement() and make an h1 element with a class="heading" and some child text Hello world

<script>
const myElement = React.createElement('h1', {className:'heading'}, 'Hello World');
</script>

Use the ReactDOM library to target where our application will live, and inject our newly created myElement element using the .render method

<script>
const myElement = React.createElement('h1', {className:'heading'}, 'Hello World');
ReactDOM.render(myElement, document.getElementById('target'));
</script>

Notice we are passing our myElement as the first argument to render and we’re selecting our <div id="target"></div>. For every single react application you’ll ONLY DO THIS ONE TIME for a single application. Everything else well be built out as a child of this.

Challenge

Steps to complete this assignment

create an index.html file
scaffold out a regular html page and add a <div id="target"></div> as the container for your application to live.
pull in the React and ReactDOM packages via CDN/UNPKG
create a script tag and add the attribute type = “text/javascript” so that you can write your react application inline
inside your script tag, create your myElement variable and set it equal to the React.createElement() function: const myElement = React.createElement()
Decide what type of element you want rendered to the screen, and what attributes (should have at least 1 className) you want on your element and what children text you’d like your element to display. Pass multiple strings to as children and see what happens.
finally, mount your element to your wrapper div using ReactDOM.render

Go back home

How To Learn React is designed and developed by me, Blake Fletcher. It is a project intended to share the things I learn while working with the UI library. As I build things, complete tutorials, read blog posts, and watch videos, I'll add to the site. I hope to eventually bring on other contributors. If interested, send me an email at blkfltchr@gmail.com.