WHAT TO KNOWObtaining `
` Tags for the Latest React from the Official Site
Introduction
React is a popular JavaScript library for building user interfaces. It is known for its declarative style, efficient performance, and strong community support. To start building React applications, you need to include the necessary React library files in your HTML. This guide will walk you through the process of obtaining the latest React <script> tags from the official React website.
Why Use the Official Website?
Using the official React website to obtain your <script> tags offers several advantages:
- Guaranteed Compatibility: The official CDN (Content Delivery Network) hosted by Facebook provides the latest and most compatible version of React.
- Stable and Secure: You can rely on the official CDN for reliability and security.
-
Easy Integration: The simple
<script>tags offer a straightforward method for adding React to your project. - No Installation Required: You can use React without installing anything locally. This is especially useful for quick prototypes and small projects.
Obtaining <script> Tags for React
Visit the React Website: Navigate to the official React website at https://reactjs.org/.
Find the "Getting Started" Section: On the React website, locate the "Getting Started" section, usually found in the top navigation bar.
Click on "Learn the Basics": Within the "Getting Started" section, click on "Learn the Basics."
Locate the
<script>Tags: The "Learn the Basics" page will display a code snippet containing the necessary<script>tags.Copy the
<script>Tags: Copy the following<script>tags:
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>
<div class="highlight"><pre class="highlight plaintext"><code>
**Note:** These are for development purposes. For production, use the production versions:
```html
<script crossorigin="" src="https://unpkg.com/react@18/umd/react.production.min.js">
</script>
<script crossorigin="" src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js">
</script>
</code></pre></div>
<p></p>
<h3>
<a name="integrating-react-into-your-html" href="#integrating-react-into-your-html">
</a>
Integrating React into your HTML
</h3>
<ol>
<li><p><strong>Create your HTML file:</strong> Create a new HTML file (e.g., <code>index.html</code>).</p></li>
<li><p><strong>Paste the <code><br>
<script><br>
</code> Tags:</strong> Paste the copied <code><script></code> tags within the <code><head></code> section of your HTML file.<br>
</p></li>
</ol>
<div class="highlight"><pre class="highlight html"><code> <span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>My React App<span class="nt"></title></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://unpkg.com/react@18/umd/react.development.js"</span> <span class="na">crossorigin</span><span class="nt">></span>
<span class="nt"></script></span>
<span class="nt"><script </span><span class="na">crossorigin=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"https://unpkg.com/react-dom@18/umd/react-dom.development.js"</span><span class="nt">></span>
<span class="nt"></script></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"root"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"><script></span>
<span class="c1">// Your React code will go here</span>
<span class="nt"></script></span>
<span class="nt"></body></span>
</code></pre></div>
<p></p>
<ol>
<li><p><strong>Add a Root Element:</strong> Create a <code><br>
<div><br>
</code> element with an <code>id</code> of "root" in the <code><br>
<body><br>
</code> section of your HTML. This is where React will render your components.</p></li>
<li><p><strong>Write your React Code:</strong> In the <code><br>
<script><br>
</code> tag placed before the closing <code></body></code> tag, start writing your React code.<br>
</p></li>
</ol>
<div class="highlight"><pre class="highlight javascript"><code> <span class="kd">const</span> <span class="nx">root</span> <span class="o">=</span> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nf">createRoot</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">root</span><span class="dl">'</span><span class="p">));</span>
<span class="nx">root</span><span class="p">.</span><span class="nf">render</span><span class="p">(</span>
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">React</span><span class="o">!<</span><span class="sr">/h1</span><span class="err">>
</span> <span class="p">);</span>
</code></pre></div>
<p></p>
<ol>
<li>
<strong>Open in Browser:</strong> Open your HTML file in a web browser (e.g., Chrome, Firefox). You should see the "Hello, React!" heading displayed on the page.</li>
</ol>
<h3>
<a name="example-a-simple-react-counter" href="#example-a-simple-react-counter">
</a>
Example: A Simple React Counter
</h3>
<p></p>
<div class="highlight"><pre class="highlight html"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Simple React Counter<span class="nt"></title></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://unpkg.com/react@18/umd/react.development.js"</span> <span class="na">crossorigin</span><span class="nt">></span>
<span class="nt"></script></span>
<span class="nt"><script </span><span class="na">crossorigin=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"https://unpkg.com/react-dom@18/umd/react-dom.development.js"</span><span class="nt">></span>
<span class="nt"></script></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"root"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"><script></span>
<span class="kd">const</span> <span class="nx">root</span> <span class="o">=</span> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nf">createRoot</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">root</span><span class="dl">'</span><span class="p">));</span>
<span class="kd">function</span> <span class="nf">Counter</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span> <span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nf">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Count</span><span class="p">:</span> <span class="p">{</span><span class="nx">count</span><span class="p">}</span><span class="o"><</span><span class="sr">/h1</span><span class="err">>
</span> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="nf">setCount</span><span class="p">(</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)}</span><span class="o">></span><span class="nx">Increment</span><span class="o"><</span><span class="sr">/button</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">}</span>
<span class="nx">root</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">Counter</span> <span class="o">/></span><span class="p">);</span>
<span class="nt"></script></span>
<span class="nt"></body></span>
</code></pre></div>
<p></p>
<p>This code snippet demonstrates a simple React counter. When you open this HTML file in a browser, you will see a counter that increments every time you click the "Increment" button.</p>
<h3>
<a name="best-practices-for-using-" href="#best-practices-for-using-">
</a>
Best Practices for Using `
</h3>
<p><br>
<br>
</p>
