# Introduction to React, React-Dom, and Manual Installation
Welcome to the world of React! In this guide, we’ll explore the basics of React and React-Dom and learn how to install them manually using…
# Introduction to React, React-Dom, and Manual Installation
Welcome to the world of React! In this guide, we’ll explore the basics of React and React-Dom and learn how to install them manually using CDN (Content Delivery Network). This hands-on tutorial will walk you through the process of creating a simple HTML file, connecting it with a JavaScript file, and installing React and React-Dom step by step.
Creating the Project Files
Let’s start by setting up our project. Open your preferred code editor and create two files: index.html and main.js. In the index.html file, set up a basic HTML structure with a title and include the main.js file using a script tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Install</title>
</head>
<body>
<h1>Install React manually</h1>
<script src="main.js"></script>
</body>
</html>In the main.js file, add a simple console log statement to test the connection.
console.log("Install React Manually");Explore React Source Code
Before proceeding with installation, let’s take a moment to explore the React source code on GitHub. Visit the React GitHub repository to see all the core React files.
One interesting file to check out is ReactHooks.js at [https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js](https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js). This file contains all the React hooks.
Installing React and React-Dom
Step 1: Get React Core
Search for “unpkg react” on Google, and you’ll find a link: [https://unpkg.com/browse/react@18.2.0/](https://unpkg.com/browse/react@18.2.0/). From there, grab the link to the minified React core version:
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>Step 2: Check React in Console
In your main.js file, log the React object to the console:
console.log("Install React Manually");
console.log(React);Open your project with a live server and check the browser console to see all React files.
React core files
Step 3: Install React-Dom
Search for “unpkg react dom” on Google and grab the link to react-dom.production.min.js:
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>Add this script tag to your index.html file alongside the React core script.
Step 4: Check React-Dom in Console
In your main.js file, log both React and ReactDOM to the console:
console.log("Install React Manually");
console.log("React =>", React);
console.log("ReactDOM =>", ReactDOM);
React Dom files
Now, open your project with a live server and check the browser console to confirm that React and ReactDOM are successfully installed.
Congratulations! You’ve manually installed React and React-Dom and connected them to your project. Start exploring the power of React and building dynamic user interfaces. Happy coding!
메타데이터
- post_id
- 36982f0da1f8
- slug
- introduction-to-react-react-dom-and-manual-installation-36982f0da1f8
- url
- https://medium.com/@ashraful.islam0871/introduction-to-react-react-dom-and-manual-installation-36982f0da1f8
- canonical_url
- https://medium.com/@ashraful.islam0871/introduction-to-react-react-dom-and-manual-installation-36982f0da1f8
- author_url
- https://medium.com/@ashraful.islam0871
- status
- ok
- fetched_at
- 2026-08-11 13:32:11
