REACT HELP: Trying to build a very basic React boilerplate because doing Create-React-App seems like overkill for some basic practice. In this repo there is two boilerplate files, the second works but then all the code would be in one file. The second file point to start.js as the app component but when I run it in the browser nothing appears. What am I overlooking, I’ve seen several other boilerplates and doesn’t seem like I’m doing anything different.
https://git.generalassemb.ly/AlexMerced/PracticeRepo/tree/master/react
You are trying to import React from "react" which doesn't exist. In a standalone version I think you will get a global React and ReactDOM objects. You can use them to render the component. Remove the import statements from start.js Edited code below.
class Greeting extends React.Component {
render() {
return <p>Hello world</p>;
}
}
ReactDOM.render(<Greeting />, document.getElementById("start"));
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>React Boilerplate</title>
</head>
<body>
<div id="start"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone#7.6.2/babel.min.js"></script>
<script type="text/babel" src="./start.js"></script>
</body>
</html>
Related
I'm trying to make a component render as per an example I found online.
I created a sample project and it works fine there, but it crashes when I'm trying to use the same thing on the official code base.
here is the contents of the blade file which is rendered.
<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">
<title>Vue SPA Demo</title>
</head>
<body>
<div id="app">
asdfsadfsadsdf
<example-component></example-component>
</div>
<script src="js/app.js"></script>
</body>
</html>
then, here is app.js
window.Vue = require("vue").default;
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
and here is ExampleComponent.vue
<template>
<div>
<div>Example Component</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
here is what the page looks like:
and here is the error:
Fun fact: when I try to include the component like this instead, it displays "Test" as expected
Vue.component('example-component', {
template: '<div>Test</div>'
});
so it is clear to me that this line/file is the issue
import ExampleComponent from './components/ExampleComponent.vue';
I found the answer!! After almost 8 hours...
Turns out the "vue-loader" 16.1.2 from package.json was the mistake. I tried the exact same configuration but changed "16.1.2" to "15.9.2" and vice-versa 4-5 times and running
rm -rf node_modules/
rm package-lock.json
npm cache clear --force
npm install
in-between every package change.
Fun fact: after that, your component will render when you write
const app = new Vue({
el: '#app',
});
in your app.js
I'm trying to render react components from an html page. I referenced the question React - component in seperate script does not work and loaded the html file from a URL like http://localhost/index.html.
My index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://...fb.me/react-0.13.3.js"></script>
<script src="https://...fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx" src="index.js"></script>
</body>
</html>
My index.js:
ReactDOM.render(<MainPage />, document.getElementById('example'))
The error is that MainPage is not defined. But when I write
include MainPage
There is an error on the include statement. Also, how can i include other React libraries like 'Tabs' from react-tabs?
If you index.js which is loaded inside your html contains <MainPage />, that means you did not compile your code. Browsers do not support text/jsx natively.
In order to use react with JSX you will need to use a compiler / bundler like webpack.
As you are just learning React.Js for the first time, please consider #Kapil's answer:
<!DOCTYPE html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
After npm init and installation of react, react-dom, bootstrap and react-bootstrap packages, I can't import any component from react-bootstrap library, as import Button from 'react-bootstrap/Button'; produce TypeError: Error resolving module specifier: react-bootstrap/Button.
I get rid of that error by changing the path to import Button from './node_modules/react-bootstrap/Button' - it's correct path, but when I try to render anything it doesn't change the div in target .php file, there's not any error in the console, so I lost. I use Babel babel-cli#6 babel-preset-react-app#3 preprocessor for JSX translation.
Here is preprocessed index.js:
import Button from 'react-bootstrap/Button'
class ProfilePage extends React.Component {
render() {
return (
<div>
<p>blah blah blah blah blah</p>
</div>
);
}
}
ReactDOM.render(<ProfilePage/>, document.getElementById('app'))
and index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body>
<div id="app">inner html
</div>
<script
src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js"
crossorigin
/>
<script>var Alert = ReactBootstrap.Alert;</script>
<script type="module" src="./index.js"></script> <!-- processed index.js -->
</body >
Output is: inner html.
Without react-bootstrap import it works perfectly, bootstrap also, but of course I'm not able to use react-bootstrap components. What am I missing?
I think your import syntax is just off. Instead of
import Button from 'react-bootstrap/Button'
Try
import { Button } from 'react-bootstrap’
Or
import { Button } from 'react-bootstrap/Button'
if the above doesn’t work.
This question already has answers here:
Simple Component is not rendering: React js
(3 answers)
Closed 6 years ago.
[Updates:]
So you need Babel https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
React has changed it's API and ReactDom should be used -> See this post.
So I tried to give react a shot and either I'm too far down a rabbit hole but I can't seem to figure while the extremely simple page just doesn't load up and work..
I have just react_hello.html
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.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>
</head>
<div id="root">
<body>
<script type="text/babel">
console.log("A");
var ExampleElement = React.createClass({
render : function()
{
return (<p>Testing 123</p>);
};
});
React.render(<ExampleElement/>, document.getElementById('root'));
</script>
</body>
</html>
It doesn't work both in Chrome and Firefox, I see a blank page and get this in the console:
Download the React DevTools and use an HTTP server (instead of a file: URL) for a better development experience: https://fb_dot_me_url_blocked/react-devtools
Sure I could download the dev tools but I don't want to because I want to understand grounds up how it works. Why don't I see tutorials that point to the basic idea of how to setup a page with react!! Even https://facebook.github.io/react/ uses codepen.
Because you define this <div id="root" outside of the body.
Try this:
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.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>
</head>
<body>
<div id="root"/>
<script type="text/babel">
console.log("A");
var ExampleElement = React.createClass({
render : function()
{
return (<p>Testing 123</p>);
};
});
ReactDOM.render(<ExampleElement/>, document.getElementById('root'));
</script>
</body>
</html>
Another change is, you need to use ReactDOM.render instead of React.render, check the difference between this two: Is there any difference between React.render() and ReactDOM.render()?
ReactDOM.render(<ExampleElement/>, document.getElementById('root'));
I'm making a simple flask app, using react for the front-end stuff. Right now I'm experimenting with importing React components from other files, without success. This is the error I'm getting:
Uncaught ReferenceError: require is not defined
This is my html file:
<html>
<head>
<meta charset="UTF-8">
<title>Index page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<div class="columns">
<div class="column">
some stuff
</div>
<div class="column">
<div id="index"></div>
</div>
</div>
<script type="text/babel" src="static/js/index.js"></script>
</body>
</html>
and my index.js:
import FormComponent from './FormComponent.js';
var MainClass = React.createClass({
render:function(){
return (
<div>
<div>this is the main component</div>
<div><FormComponent /></div>
</div>
);
}
});
ReactDOM.render(<MainClass />, document.getElementById('index'));
and finally the FormCommponent.js, which is in the same folder:
var FormComponent = React.createClass({
render: function() {
return (
<div>this is an imported component</div>
);
}
});
module.exports = FormComponent;
Does anyone know what am I doing wrong?
I'm not using any package managers.
EDIT
Solved the problem by using browserify, as mentioned below.
Thanks for the help
You need to use something like Rollup, Webpack, or Browserify. This statement import FormComponent from './FormComponent.js'; doesn't mean anything on the client. No browser natively supports it so you need something like the tools mentioned above to turn it into something the browser can actually use.
Without them you just have to load the files in your index.html.
Maybe if you try to include components like the first but declare like text/javascript should run.
I hope this solves your problem