I am just starting out with react, while that is going fine, I am not able to start using react-bootstrap here is what my .html file looks like:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/jsx" src="react-bootstrap.js"> </script>
<script type="text/jsx">
React.render(
<p> test </p>
<Button> test </Button>,
document.body
);
</script>
</body>
</html>
Does not work.
I get a Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
Any help is deeply appreciated.
UPDATE:
Question has been solved.
Solution:
Make it:
React.render( <div> <p> test </p> <Button> test </Button> </div>,
document.body)
also add,
var Button = ReactBootstrap.Button;
I found the solution:
React needs a single root element to render. So, change it to -
React.render( <div> <p> test </p> <Button> test </Button> </div>,
document.body)
also add,
var Button = ReactBootstrap.Button;
Related
I want to include Reactjs code in my content like this:
<script type="text/babel">
ReactDOM.render(
<div>
<h1>Hello, world!</h1>
this is a link...
</div>,
document.getElementById('root')
);
</script>
I want this code to actual run, not just for display. However, when it passes through the Hugo template it comes out as:
<p><script type="text/babel"></p>
<pre><code> ReactDOM.render(
<div>
<h1>Hello, world!</h1>
<a href="http://www.example.com">this is a link...</a>
</div>,
document.getElementById('root')
);
</script>
</code></pre>
which means it won't run.
Basically, I want content editors to be able to drop in a React Component code and have it run on the page. Thanks.
EDIT:
This is what I want to be the final output of the hugo template:
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js">
</script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<div>
<h1>Hello!!</h1>
this is a link...
</div>,
document.getElementById('root')
);
</script>
</body>
</html>
but I want the bit between the script tags to be entered in to the markdown page as it will be surrounded by other text, and should not form part of the template
OK, so I worked out the problem.
In order to get this to work you need to make sure that the open
<script>
tag has no whitespace to the left. It must start the line. Otherwise, I guess the template engine will just go ahead and escape it.
I'm following a simple ReactJS tutorial on udemy and for some reason my code which seems to be the same line for line is not working, nor am I getting any errors in the dev tools in chrome.
Here is my code, but I can't seem to figure out why it's not working. I'm using Brackets as my IDE and am also using chrome.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react#0.14.7/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#0.14.7/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.20/browser.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
var secondComp2 = React.createClass({
render: function () {
return (
<div>
<h1>{this.props.name}</h1>
</div>
)
}
});
ReactDOM.render(
<secondComp2 name="hello world" />,
document.getElementById('app')
);
</script>
</body>
</html>
React components are always defined in PascalCase. This will solve your problem.
<script type="text/babel">
var SecondComp2 = React.createClass({
render: function () {
return (
<div>
<h1>{this.props.name}</h1>
</div>
);
}
});
ReactDOM.render(
<SecondComp2 name="hello world" />,
document.getElementById('app')
);
</script>
Its a rule that all React components must starts with a upper case letter, because small letters are treated as HTML elements,
So use this: SecondComp2 instead of secondComp2.
Check the working fiddle: https://jsfiddle.net/5nvd3o6t/
I Want to show pop-up on page load but i don't have knowledge about react javascript . I am using lightbox pop-up . its working fine but its working onclick function . I need to open pop up on page load.
my code is :-
<html>
<head>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react-with-addons.js'></script>
<script type="text/jsx" src='js/react-lightbox.jsx'></script>
</head>
<body>
<div id='react-canvas'></div>
<script type="text/jsx">
/** #jsx React.DOM */
React.renderComponent(
<Lightbox>
<LightboxTrigger>
<a href='javascript:void(0)'>Click me to open!</a>
</LightboxTrigger>
<LightboxModal>
<div>
<h1>This is the basic usage!</h1>
<p>Good luck :D</p>
</div>
</LightboxModal>
</Lightbox>,
document.getElementById('react-canvas')
);
</script>
</body>
</html>
Try to create custome elements and add method this.props.openLightbox on componentWillMoutn
var ToggleButton = React.createClass({
componentWillMount(){
this.props.openLightbox();
}
render() {
return(<button onClick={this.props.openLightbox}>Open Lightbox</button>);
}
});
And put this custom element into <LightboxTrigger>
<LightboxTrigger>
<ToggleButton />
</LightboxTrigger>
My html file look like this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<script src ="ang_script.js"> </script>
</head>
<body>
<div ng-app id="bootangular" ng-controller="firstcontroller">
<button ng-click="alertfunction()"> click me </button>
</div>
</body>
</html>
and the script file is as follows
var app = angular.module("firstModule",[])
app.controller("firstcontroller",['$scope',function($scope)
{
$scope.alertfunction=function()
{
alert("Done");
};
}])
This is throwing an error which takes me to this page https://docs.angularjs.org/error/ng/areq?p0=firstcontroller&p1=not%20a%20function,%20got%20undefined
which I am not able to understand
You're not defining the ng-app correctly. Please update your HTML with below code
<div data-ng-app="firstModule" id="bootangular" data-ng-controller="firstcontroller">
</div>
And your controller code then work. I don't see any error in your controller's code.
JSX code:
var App = React.createClass({
render: function() {
return <div className="darken">hello world</div>
}
});
React.renderComponent(<App/>, document.querySelector('.main'))
HTML:
<body>
<header>welcome</header>
<div class="main"></div>
</body>
React.renderComponent will append rendered JSX to <div class="main">. Output of HTML will be:
<body>
<header>welcome</header>
<div class="main">
<div class="darken">hello world</div>
</div>
</body>
Is it possible React.renderComponent replace <div class="main">, so what I expect like this:
<body>
<header>welcome</header>
<div class="darken">hello world</div>
</body>
Was having a problem getting my component to render in React 0.14.0. My solution was make sure your scripts have a special type:
<script type="text/babel" src='js/app.js'></script>
Include these three libraries:
<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.8.23/browser.min.js"></script>
Then use ReactDOM.render():
ReactDOM.render(<Timer start={Date.now()} />, document.getElementById('app'));
I'm not even using ES6 or a build system. Simple solution to get text on the screen with react.js
Sure, just use:
React.render(<App/>, document.body);
Had a similar problem and this is what I came up with.
Replace it with a simple span tag so it doesn't affect your styling.
const appContainer = document.createElement('span')
const mainEl = document.querySelector('.main')
mainEl.parentNode.replaceChild(appContainer, mainEl)
React.renderComponent(<App/>, mainEl)
Which will produce
<body>
<header>welcome</header>
<span> <!-- this acts as the container for react -->
<div class="darken">hello world</div>
</span>
</body>