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>
Related
I got a simple react component added to a web page and it is not rendering every time. It comes after I clear my browser history and then if I refresh my page it is not rendered. am I using old cdns or Babel?
This is my component and HTML.
React file find_new.js
'use strict';
class FindNew extends React.Component {
render() {
return (
<div>
<li className="list-inline-item">
<select className="selectpicker show-tick">
<option>Newly published</option>
<option>Recent</option>
<option>Old Review</option>
</select>
</li>
</div>
);
}
}
const domContainer = document.querySelector('#find_new');
ReactDOM.render(<FindNew/>, domContainer);
HTML
<div id="find_new"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="reactme/find_new.js"></script>
Trying to include feather icons into react component but it is not showing up.
const SomeComponent = () => {
<div>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"> </script>
<script>
feather.replace()
</script>
<i data-feather="home"></i>
</div>
}
What could be the issue?
Add the script in your index.html(so that it becomes globally available)
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"> </script>
Now go to your component and use the below code
<div dangerouslySetInnerHTML={{__html:window.feather.icons.home.toSvg()}} />
see I am new in react.js and include react and react dom ...but here, I am including cdn but the error will come with the console.kindly help me.
<html>
<head>
<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.23/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let HocCompont= (BasicComponent) => class extends
react.Component {
render(){
return(
<div className="abc"> <BasicComponent/> </div>
)
}
}
const StatelessCoponent = () =>{
return( <button>I am button</button>
)
}
let ExtendedButton = HocCompont(StatelessCoponent);
ReactDOM.render(<ExtendedButton/>,document.getElementById("app"));
</script>
</body>
</html>
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 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;