I want to download and use react on a network that has no Internet connectivity. I downloaed the zipped source code file at bottom of this page. https://github.com/facebook/react/releases/tag/v16.8.6
It does not seem as straight forward as when you download jquery.js and simply point to it like <script src="jquery.js"></script>. What is the correct way to utilize react on offline network and how should I be pointing to the correct js "src" files? Thank you.
You need to DONWLOAD and include all of the following
react : https://unpkg.com/react#16/umd/react.production.min.js
react-dom : https://unpkg.com/react-dom#16/umd/react-dom.production.min.js
babel : https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js
Include these inside your html file
<script src="react.production.min.js" />
<script src="react-dom.production.min.js" />
<script src="babel.min.js" />
<!-- Your react scripts that you will be coding in -->
<script src="my-script.js" />
Then set up a div with some id in your same html file .
<div id="root" />
In your my-script.js code add some react and render it to the div like this
function MyFirstReactComponent(){
return <div> My First React Component ! </div>
}
ReactDOM.render(
<MyFirstReactComponent />,
document.getElementById('root')
);
This should work for you!
The key hear is the addition of Babel which
transforms your react code(JSX) to browser understandable Javascript. Also
important, the 'ReactDOM' lib which is react's way of interacting with the browser's DOM API.
Include these inside your html file
<script src="../babel.min.js"></script>
<script src="../react.development.js"></scriptt>
<script src="../react-dom.development.js"></script>
<script type="text/babel src="Your js file source">
Related
I am developing a web app using the React CDN. In a .js file that defines a React component using JSX, I am trying to use the JSX <img> element to render an image from a local image file. Unfortunately, the image is not displaying.
In the <body> of my index.html, I have the following:
<div id="coursesModeTab"></div>
...
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="scripts/coursesMode.js" type="text/babel"
data-plugins="transform-modules-umd"
data-presets="react" data-type="module">
Then, in coursesMode.js, I have the following:
import ssLogo from "./images/sslogo2.png";
function Logo() {
return <img className="mode-page-icon" src={ssLogo} alt="SpeedScore logo"/>
}
const coursesDiv = ReactDOM.createRoot(document.getElementById('coursesModeTab'));
coursesDiv.render(<Logo />);
Thanks to this related StackOverflow post, I was able to eliminate all console errors related to not being able to use import statements in my coursesMode.js file. However, the image still does not display! Instead, I see
when the app attempts to render the image. I can confirm that images/sslogo2.png exists in my project. I have also tried putting sslogo2.png in a public/ directory and at the root of my project, but neither worked.
How can I make the image render properly?
<script>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
</script>
<div id="root">
</div>
I am running the html snippet but getting a console error message , this code is from https://reactjs.org/docs/hello-world.html ,it runs fine on codepen but not my local browser, please help as i am new to react.js
That snippet won't run in your browser's console as-is. In the code pen go to settings > JS > Add External Scripts/Pens. You'll see react and react-dom are dependencies for the code to run.
This tutorial for create-react-app will help you get everything installed correctly so you can try the hello world example - https://create-react-app.dev/docs/getting-started/
Here's the full setup in order for this example code to run:
<!-- INCLUDE REACT LIB -->
<script src="https://unpkg.com/react#18/umd/react.production.min.js" crossorigin></script>
<!-- INCLUDE REACTDOM LIB -->
<script src="https://unpkg.com/react-dom#18/umd/react-dom.production.min.js" crossorigin></script>
<!-- INCLUDE BABEL COMPILER LIB FOR JSX -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<div id="root"></div>
<!-- Change the type to text/babel in order for the Babel compiler to detect and compile the JSX syntax -->
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
</script>
You can find the CDN links used in this example for the React, ReactDOM and Babel libraries on the link that #abo mentioned above.
Happy Hacking and welcome to the wonderful world of React! ;)
I was watching tutorials on React and tried copying an example, but for some reason nothing that I attempt is working. Here's the simple code:
index.html:
!DOCTYPE html>
<head>
<title>React Stuff</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="index.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<ul>
<li>Hello!</li>
<li>This is a</li>
<li>React practice!</li>
</ul>, document.getElementById('root'));
I installed react using npm install react react-dom and attempted to open the .html file, but nothing appears on the screen. I also tried moving the script to the or even putting it inside the <script>, but none of that worked.
Some of the features here rely on build tools to precompile the code as they are not natively supported.
For example jsx (HTML like syntax directly in JavaScript) would be compiled with Babel .
node_module package imports import React from 'react' without needing to reference the full url import React from '/node_modules/react/index.js' needs to be compiled with webpack (or a similar tool).
create-react-app is a great way to get started with all the required setup.
ReactDOM.render(<ul>
<li>Hello!</li>
<li>This is a</li>
<li>React practice!</li>
</ul>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
This works here. Can you reproduce your error in your question?
Does your project have a package.json?
If so does it have scripts, specifically a start script?
Then you need enter 'npm run start' in your console to compile the code and it should launch on localhost:3000.
Try following create-react-app
I am trying to import React.js codes from from a .js file and use it in my index.html with react cdn imports. I needed to to very small task so I didn't wanted to use "create react app".
Is there any possible way to use React.js just like we can use jQuery/Vue.js using only cdn imports and importing them from a separate .js file?
What if I wanted to use react.js in an existing project along side another javaScript framework, without using create-react-app as it has its own project structure.
//my_react.js:
class Greeting extends React.Component {
state={
name: 'Deutschland'
}
render() {
return (<h1>Hello {this.state.name}</h1>);
}
}
ReactDOM.render(<Greeting />, document.getElementById('root') );
//index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"> </script>
<script src="js/my_react.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
TL;DR Browsers do not understand JSX format used by React for mixing HTML with JavaScript. You will need to transform JSX code to JS using babel before it can be included directly. Or you will need to write React code without using JSX. Continue reading for that.
The apparent capability of freely using html within JavaScript programs doesn't actually exist in any of the browsers. For most people, this mixed code with JS and HTML goes through a transformation and the result is pure JS code which can be run in any browser. Go through the React getting started guide to see how to achieve this https://reactjs.org/docs/getting-started.html.
The transformation, for example, of the following snippet would happen in this manner:
render() {
return <div />;
}
will get converted by babel to:
render() {
return React.createElement('div', {});
}
The second snippet is something that browsers can understand and execute. You can obviously write the code directly in second format, and in that case no build process would be required.
React does (officially) support usage without JSX, see more about it here: https://reactjs.org/docs/react-without-jsx.html. Be warned though, the React components written in this manner tend to be a bit verbose. Use this option only if you absolutely cannot have a build system.
I am using react to render some JS to a script tag:
<script type="text/javascript" src={props.file_js} />
it renders using relative paths:
<script type="text/javascript" src="file.js">
which breaks my URI routing policies. How can I configure react to make this link absolute? IE:
<script type="text/javascript" src="/file.js">
The solution is:
<script type="text/javascript" src={"/"+props.file_js} />
Also consider to use html plugin for webpack with some templating.
And also looks like you want to solve code splitting task. If so, read about advanced webpack based technique code splitting.