React is a JavaScript library for building user interfaces
To create React application in production, firstly you need to setting up a React Environment. install npm which is included with Node.js.
How to install Node.js in my computer Click here
CDN (Content Delivery Network) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content.
A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.
For both React and ReactDOM are available over a CDN.
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>To load a specific version of react and react-dom, you can replace 17 with the version number.
Why the crossorigin Attribute?
If you serve React from a CDN, we recommend to keep the crossorigin attribute set:
<script crossorigin src="..."></script>We also recommend to verify that the CDN you are using sets the Access-Control-Allow-Origin: * HTTP heade
this is the quick & fast way to start learning React is to write React directly in your HTML files.
Start by including three scripts, the first two let us write React code in our JavaScripts, and the third, Babel, allows us to write JSX syntax and ES6 in older browsers.
You will learn more about JSX in the React JSX chapter.
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
This is only for testing purpose. But for the production you will need to set up a React environment.
If you have already installed npx and node.js, then you can create the React Application by using create-react-app.
To know, how to check node.js installed or not, just open cmd or Command Prompt in your computer and type node -v and enter after few seconds display the node.js version. otherwise you have to install.
If you've previously installed create-react-app globally, it is recommended that you uninstall the package to ensure npx always uses the latest version of create-react-app.
To uninstall, run this command
npm uninstall -g create-react-app
To create a React application named myfirst-react-app
Run this command:
npx create-react-app myfirst-react-app
The command create-react-app will set up everything you need to run a React application.
Now we are ready to run our first react application
Run this command:
cd myfirst-react-app
Run this command:
npm start
A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.
Look in the myfirst-react-app directory, and you will find a src folder. Inside the src folder there is a file called App.js, open it and it will look like this:
/myfirstReactApp/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 to change the HTML content and save the file. The changes of content in file will refelect immediately after save the file, There is no need to reload the page.
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>My First Hello World!</h1>
</div>
);
}
export default App;The Result:
Now you have a React Environment computer. Learn more, Create, Read update......