Have you ever wanted to learn how to do web development with frameworks and libraries like React but have been intimidated by the complexity of the process?
There are two things that could make it difficult for people to learn React if they have never used anything like this before. First, it requires a change in your way of thinking and the way you implement things. Secondly, some tutorials may require you to learn a lot of other things first. Now, this other stuff is really important and you will eventually have to learn it if you want to do some serious web development. However, it is not absolutely necessary to start with the library.
In this tutorial, I’ll show you how to build a React app without any additional tools or specialist knowledge. Just a single HTML page!
1. Import libraries
We will create our first React app without the use of fancy tools. The only thing you need to do to get started is to include the library on your webpage by adding the following script tag.
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
The first is our basic React library meant for building the user interface. The second library, React-DOM, gives us access to some DOM-specific methods so that our application can run inside browsers.
2. Create an index.html page
To get started, create a index.html file with the following content:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>
3. Code the app
We will start building our app using the React.createElement() method. This method creates and returns a React element of our specified type. These React elements are very different from regular DOM elements. React elements are simply objects that are used as a reference by React DOM to create corresponding browser DOM elements. Add this code to script label inside body.
let helloElement = React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!');
The line above will create a React object that will finally be rendered as a h1 level header with id set to greeting And class attribute set to hello. You may have noticed that we are using className instead of class to set the value of the class attribute. This is why class is a reserved keyword.
As I said earlier, React will render the React element we just created to produce a real DOM element on the web page. So we need to specify a location or parent DOM element where we want the rendering to take place. In our case, this will be a div element with the id attribute set to root. You can set the id also attribute to some other value.
Add the following element to your HTML body:
<div id="root"></div>
Now is the time to call the ReactDOM.createRoot() method and pass it a reference to our root element. Once we have the root element, we can use the render() method to make our React element like a real DOM element.
let rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render(helloElement);
The content of the body tag should now be as shown below:
<body>
<div id="root"></div>
<script>
let helloElement = React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!');
let rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render(helloElement);
</script>
</body>
4. Run the app in a browser
In the later parts of the course, we will run the web page on a server. However, for now you can just open it in a browser. You should see a h1 level header with the text “Hello WorldOpen the inspector tool in your browser and it will have the following markup.
5. Style the app with CSS
We can also provide some CSS that will be applied to the header so that it looks a little better. Here is an example:
h1.hello {
font-size: 8rem;
font-family: 'Londrina Solid';
color: orange;
text-align: center;
letter-spacing: 3px;
-webkit-text-stroke: 4px black;
}
Refresh your browser and you will see a header similar to the image below:
6. CodePen Demo
The following CodePen demo shows the result of executing the above code in a browser. Try making small changes to several attributes and see how it affects the final markup.
Final thoughts
That’s it, we have successfully created our first React app. It doesn’t go a long way, but you should feel a little more comfortable with React now than when we started.
In the next few tutorials, we will learn many more React concepts and features so that you can finally build a fully functional app with real-world utilities.
