How to use React v16 without a build process - javascript

In React v15 I can easily do the following:
<html>
<head>
<meta charset="UTF-8">
<title>React v15</title>
</head>
<body>
<div id="divContainer"></div>
<script src="https://unpkg.com/react#15.6.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.6.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return <h2>Hello World !</h2>;
}
});
ReactDOM.render(<HelloWorld />
, document.getElementById('divContainer')
)
</script>
</body>
</html>
Once I reference react#16, react-dom#16 it no longer works, I understand that React.createClass() has been deprecated and removed. So what is its replacement?
I need a minimalist way of doing the same without a build process e.g. browserify, webpack, require, import, etc. I just want to reference libraries via a CDN or locally as I have shown in the example.

After you include React 16 libs you can access the React instance directly and extend React.Component
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>React Hello World</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/jsx">
class MyApp extends React.Component {
render() {
return <span>Hello world</span>;
}
}
ReactDOM.render(<MyApp />, document.getElementById('app'));
</script>
</body>
</html>

Related

React Component not displayed in HTML

I am just learning react and cant display my component.
I have a welcome html file with the following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://thymeleaf.org"><head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div class="root"></div>
<script type = "text/babel" src= "App.js"> </script>
<script>
import {Component} from "react";
class App extends Component {
render() {
return(
<h1>Hello everyone nice to see it finally works!!!</h1>)
}
}
ReactDOM.render(<App />, document.querySelector(".root"));</script>
</body>
</html>
This is my App.js
import React, {Component} from 'react'
class App extends React.Component{
constructor(props) {
super(props);
this.state = {
name: '',
appVersion: ''
}
}
render(){
return(
<h1>Hello everyone nice to see it finally works!!!</h1>
)
}
}
Note: After my App.js didnt work i tried using the component inline of the html file as you can see. But even that doesnt help. Hope someone can give me a hint.
I think it doesn't work to use external scripts (<script src="...">) together with the in-browser-babel-transpiler (not sure though).
It does work with either
JSX and inline code, or
external script without JSX
The most common approach is to set up a node.js project including webpack, server, babel etc., e.g. with create-react-app.
1. JSX and inline code
Here you don't need (and can't use) the import.
React is already imported into the global scope by the <script ...> tag. To use Component you can instead use React.Component:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div class="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return(
<h1>Hello everyone nice to see it finally works!!!</h1>
);
}
}
ReactDOM.render(<App />, document.querySelector(".root"));
</script>
</body>
</html>
2. external script, without JSX
Importing <script src="app.js"> apparently works only without JSX inside the app.js (i.e. without babel-transpiler), because of CORS restrictions:
// index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div class="root"></div>
<script src="app.js"></script>
<script type="text/babel">
ReactDOM.render(<App />, document.querySelector(".root"));
</script>
</body>
</html>
// app.js
class App extends React.Component {
constructor( props ){
super(props);
this.state = {
name: 'some name',
appVersion: ''
};
}
render(){
return [
React.createElement( 'h1', null, 'it works, but without JSX! ' ),
React.createElement( 'p', null, 'Name: ' + this.state.name ),
];
}
}

When using and import statement and HTML I get no output. Why?

I am getting a blank page when using import. I have a simple program that is just to test the import statement. I don't know why I am not getting any output. Here is my code in app js:
import TestComponent from "./components/Testcomponentfile"
pageBuild();
function pageBuild(){
TestComponent();
}
Here is the code for the component:
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
And Here is the index.HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<div>
<h1> test Html</h1>
</div>
<script src="./JS/app.js"></script>
</body>
</html>
What am I missing??
Use type="module" in your html while using the script
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<div>
<h1> test Html</h1>
</div>
<script type="module" src="./JS/app.js"></script>
</body>
</html>
calling pageBuild(); after defining the function did not solve the problem>
I am using google chrome browser. It should be working.
import TestComponent from "./components/Testcomponentfile"
function pageBuild(){
TestComponent();
}
pageBuild();
Here is the code for the component:
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
an update to the first answer
tc.js
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
ap.js
import TestComponent from "./tc.js"
function pageBuild(){
console.log(TestComponent());
}
pageBuild();
tested and it works

Reactjs console errors: 'Components object is deprectated' & 'ReferenceError: require is not defined'

I'm trying to use jsx with classes create a simple hello world program to print 'Hello world' in my browser(firefox).
I can get a single page [html with embedded jsx][1] to work. But not when I try to use classes.
I am receiving the following in my console output
Download the React DevTools for a better development experience: https://fb .me/react-devtools
You might need to use a local HTTP server (instead of file://): https://fb .me/react-devtools-faq react-dom.development.js:21347:9
unreachable code after return statement[Learn More]
babel.js:61389:2
You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/ babel.js:61666:4
The Components object is deprecated. It will soon be removed. index.html
ReferenceError: require is not defined[Learn More]
<anonymous> file:///Users/Jacob/temp/index.html:5
run https://unpkg.com/babel-standalone#6.26.0/babel.js:61531
check https://unpkg.com/babel-standalone#6.26.0/babel.js:61597
loadScripts https://unpkg.com/babel-standalone#6.26.0/babel.js:61624
onreadystatechange https://unpkg.com/babel-standalone#6.26.0/babel.js:61549
jsx/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
<!--
<script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
-->
<meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="root"></div>
<script type='text/babel' src='jsx/index.js'></script>
</body>
</html>
​
A quick fix in firefox for your problem would be to change your jsx/index.jsx to
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
i.e remove 'import'
Go through this for babel usage with babel-standalone.
As you are using babel-standalone it would be best if you change your code to
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
<!--
<script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
-->
<meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="root"></div>
<script type='text/babel'>
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
</script>
</body>
</html>

Why won't my picture appear in ReactJS?

I'm starting out with ReactJS & I want this simple image to appear on my practice web app but it isn't appearing. I thought my logic was correct but I guess not.
Here's my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
</head>
<body>
<div id="firstBar"></div>
<div id="body"></div>
<script type="text/babel" src="index.js"></script>
<script type="text/babel" src="body.js"></script>
</body>
</html>
Here's my body.js file:
import myPic from 'pictures/myPic.JPG' // myPic.JPG is in my pictures folder.
var Body = React.createClass({
render: function() {
return(
<img src={myPic}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));
Error I'm getting is:
`Uncaught ReferenceError: require is not defined
at eval (eval at transform.run (browser.js:4613), <anonymous>:6:25)
at Function.transform.run (browser.js:4613)
at exec (browser.js:4649)
at browser.js:4661
at XMLHttpRequest.xhr.onreadystatechange (browser.js:4632)`
require/import might not be supported in the browser
Try this:
var Body = React.createClass({
render: function() {
return(
<img src={"./pictures/myPic.JPG"}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));

React.renderComponent is not a function

I have read some articles for beginners about ReactJs. The article I read showed only code fragments. I'm having trouble with my first component:
full code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return React.DOM.h1("hello world!!");
}
});
React.renderComponent(
HelloWorld,
document.getElementById("content")
);
</script>
</body>
</html>
When I open the page I see embedded:11 Uncaught TypeError: React.renderComponent is not a function
Can anyone please point me in the right direction?
I've also tried this with no luck:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>-->
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
The problem with your first example is that React.renderComponent is not a function, you need to use ReactDOM.render instead. You should save yourself a lot of effort now and just use create-react-app and use this application. It takes all of the pain out of the tooling that you will need to make React fast to use (webpack hot module reloading). It is extremely simple compared to the average tooling you will need to setup taking any other route and is made by the people that make React. I can tell by the version number of React that you are using, the tutorial you are going of of is very old, a very longtime before Facebook released create-react-app when things were more difficult.
If you are going to go about it inline, use this in your head -
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
Full working example on React 15 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script>
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
EDIT: I see that you use babel-core browser.js, which has been deprecated, remove it and use React directly.
Remove script type and replace everything with:
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
jsbin demo

Categories