You don’t need fancy editor to use React.js. Using Notepad also you can build simple react application. Let’s see how to create first react component using Notepad.
1. Create a Folder in Drive
Create any folder in the whichever drive you prefer. I have created below folder in the D drive. Folder name is “React_Notepad”.
2. Create index.html File
Inside folder, open Notepad file and name it index.html and save it. HTML file will get created.
3. Add Basic HTML Code in index.html
Open index.html file with Notepad and add below code inside it and save. This is the basic HTML structure code. It also contains “root” div element in the body.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
4. Add React Script Files in index.html
Below are the react scripts (.js ) files which allow us to work with React.js library. Add below code inside head tag in the index.html file.
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
Note: Above scripts file are not production ready. For production, you have to use minified js files. You will find them here.
5. Use JSX
It is optional to use JSX but most of developers prefer to use it to write code in React. To use JSX you need Babel, a JavaScript compiler. Add following script to index.html in the head tag.
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
Note: For production you have to use JSX preprocessor instead of Babel CDN. This is not covered in this article.
6. Add React Component Code in index.html
Open index.html file with Notepad and add following code inside head tag and save.
<script type="text/babel">
function Message() {
return <h1>Hello World</h1>;
}
ReactDOM.render(
<Message/>,
document.getElementById('root')
);
</script>
7. Final Code
Your final code should look like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<script type="text/babel">
function Message() {
return <h1>Hello World</h1>;
}
ReactDOM.render(
<Message/>,
document.getElementById('root')
);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
8. Output
Open HTML file in the browser. You should see below output.
