It's possible to build applications with React without using any tool-chains—just with the React library and pure JavaScript. In this lesson from our free full-length beginner course on React 18, you'll learn how.
Have you ever wanted to learn how to do web development with frameworks and libraries like React but got intimidated by the complexity of the process?
There are two things that might make it difficult for people to learn React if they haven't used anything like this before. First, it requires a change in your way of thinking and how you implement things. Second, some tutorials might require you to learn a bunch of other stuff first. Now, this other stuff is actually important and you will have to learn it eventually if you want to do some serious web development. However, it is not absolutely necessary to get started with the library.
In this tutorial I'll show you how to create a React app with no extra tooling or specialized knowledge. Just a single HTML page!
1. Import the Libraries
We will create our first React app without the use of any fancy tools. The only thing that you need to do to get started is include the library in your webpage by adding the following script tags.
<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 one is our core 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 work inside browsers.
2. Create an index.html Page
To start, create an index.html file with the following contents:
<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 begin the creation of our app by 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 reference by React DOM in order to create matching browser DOM elements. Add this code to the script tag inside body.
let helloElement = React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!');
The above line will create a React object that will finally render as an h1 level heading with id set to greeting and class attribute set to hello. You might have noticed that we are using className instead of class to set the value of class attribute. This is because class is a reserved keyword.
As I said earlier, React will be rendering the React element we just created to output an actual DOM element on the webpage. So we need to specify a location or parent DOM element where we want that rendering to happen. In our case, this will be a div element with the id attribute set to root. You can set the id attribute to some other value as well.
Add the following element to your HTML body:
<div id="root"></div>
Now it is 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 render our React element as an actual DOM element.
let rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render(helloElement);
The contents 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 later parts of the course, we will be running the webpage on a server. However, you can simply open it up in a browser for now. You should see an h1 level heading with the text "Hello, World". Open the inspector tool in your browser and it will have the following markup.
5. Style the App With CSS
We can even provide some CSS that will be applied to the heading so that it looks slightly 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 the browser and you will see a heading that looks like the image below:
6. CodePen Demo
The following CodePen demo shows the result of executing the above code in a browser. Try making minor changes to different attributes and see how it affects the final markup.
Final Thoughts
There you have it, we have successfully created our first React app. It doesn't do much at all but you should now be feeling a little more comfortable with React than you were when we began.
In the next few tutorials, we will learn about many more React concepts and features so that you can finally create a fully functioning app with real-world utility.
No comments:
Post a Comment