React Get Started
To utilize React in production, you’ll need npm, which is supplied with Node.js.
To get a sense of what React is, you may write it directly in HTML.
However, to utilize React in production, you need to install npm and Node.js.
React Directly in HTML
Writing React directly into your HTML files is the quickest and easiest method to get started studying it.
To begin, include the following three scripts: Babel enables us to write ES6 and JSX syntax in earlier browsers, while the other two allow us to write React code in our JavaScripts.
Example
Include three CDN’s in your HTML file:
<!DOCTYPE html>
<html>
<head>
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/react@18/umd/react.development.js?ver=1742846572" crossorigin defer></script>
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/react-dom@18/umd/react-dom.development.js?ver=1742846572" crossorigin defer></script>
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/@babel/standalone/babel.min.js?ver=1742846575" defer></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
}
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
root.render(<Hello />)
</script>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
This method of using React is acceptable for testing purposes, but in production, you will need to set up a React environment.
Setting up a React Environment
If you have npx and Node.js installed, use create-react-app to build a React application.
If you previously installed create-react-app globally, you should delete it to guarantee that npx always utilizes the most recent version of the package.
To uninstall, use the following command: npm uninstall -g create-react-app.
Run this command to create a React application called my-react-app:
npx create-react-app my-react-app
The create-react-app command will put up everything required to start a React application.
Run the React Application
You’re now ready to run your first actual React application!
To navigate to the my-react-app directory, use the following command:
cd my-react-app
Run this command to launch the React application my-react-app:
npm start
A new browser window will open with your newly generated React App! If not, open your browser and enter localhost:3000 into the address bar.
The result is:
Modify the React Application
So far, so good, but how can I update the content?
Look in the my-react-app directory for a src folder. In the src folder, there is a file called App.js; open it and it will look like this:
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
Learn React
</a>
</header>
</div>
);
}
export default App;
Try modifying the HTML content and saving the file.
Note that the changes are displayed immediately after you save the file; you do not need to restart the browser!
Example
Replace all the content inside the <div className=”App”> with a <h1> element.
See the changes in the browser when you click Save.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;
Notice that we’ve deleted the unnecessary imports (logo.svg and App.css).
The result is:
What's Next?
You now have a React environment on your PC and are ready to learn more about React.
In the remainder of this lesson, we will utilize our “Show React” tool to demonstrate the various aspects of React and how they appear in the browser.
If you want to replicate these procedures on your computer, begin by reducing the src folder to just one file: index.js. You should also remove any extraneous lines of code from the index.js file so that it looks like the example in the “Show React” tool below:
Example
Click “Run Example” to view the outcome.
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
const myFirstElement = <h1>Hello React!</h1>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);
