I successfully followed this guide to learn to use iron-meteor
https://medium.com/meteor-js/how-to-build-web-apps-ultra-fast-with-meteor-iron-scaffolding-and-automatic-form-generation-11734eda8e67#.gw50bxjif
So then I went to command line and did a iron add react.
I created a simple react component app/client/templates/App.jsx with the contents
App = React.createClass({
render() {
return (
<div className="container">
Hello World
</div>
);
}
});
Then when in app/lib/controllers/issues_list_controller.js I replaced the action function with this code.
action: function () {
// this.render();
var router = this;
Meteor.startup(function () {
ReactDOM.render(<App router={router} />, document.getElementById("render-target"));
});
},
Now when I run the command iron from command line to start the project, I get the error
W20151230-00:48:14.955(-5)? (STDERR) ReactDOM.render(<App router={router} />, document.getElementById("render
W20151230-00:48:14.957(-5)? (STDERR) ^
W20151230-00:48:14.980(-5)? (STDERR) SyntaxError: Unexpected token <
It's as if meteor-iron doesn't recognize react and jsx mark up? How do I get this to work?
Then when in app/lib/controllers/issues_list_controller.js I replaced the action function with this code.
issues_list_controller.js is a regular javascript file. Rename it with the jsx extension if you want to use JSX in your code - i.e. <App router={router} /> etc.
Related
Whenever I write a useEffect() inside a component function of my block plugin, the edit page goes blank and the console logs the message:
react_devtools_backend.js:4026 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.it (react-dom.min.js?ver=17.0.1:9:43163)
at e.useState (react.min.js?ver=17.0.1:9:10899)
at Prompt (Prompt.js:5:35)
at N (element.min.js?ver=3dfdc75a0abf30f057df44e9a39abe5b:2:9552)
at U (element.min.js?ver=3dfdc75a0abf30f057df44e9a39abe5b:2:10502)
at N (element.min.js?ver=3dfdc75a0abf30f057df44e9a39abe5b:2:9284)
at lr (blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:111294)
at blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:137935
at xn (blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:138073)
at blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:139086
The component:
import React, { useState, useEffect } from "react";
import axios from "axios";
function Prompt(props) {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios(
"http://my-site-test.local/wp-json/wp/v2/posts?_fields[]=title"
);
setData(result.data);
};
fetchData();
}, []);
console.log(data);
return (
<>
JSX...
</>
);
}
export default Prompt;
I tried to delete node_modules and reinstall to no avail…
I believe the problem is in my-plugin/src/index.js — wp.blocks.registerBlockType's 'save' property only allows static HTML to be returned (so it can be stored in the database within the content) and I was trying to insert a React component into it.
Since I want a dynamic block on the front-end, I have to load a register_block_type in my-plugin/index.php to render my component.
EDIT You actually can add React directly in the save attribute if you have specified script when registering your block in the PHP main file (or in your block.json file.
Code sample as below:
vue/test-utils failed to trigger events on quasar q-input. I am trying to write a unit test using vue/test-utils and using quasar framework. What I am thinking to test is "a error message should display after touch input field". here quasar demos. Please guide if I am going in wrong direction.
<!-- registration.vue -->
<q-input
outlined
v-model="fullName"
label="Full Name *"
lazy-rules
:rules="[val => !!val || 'Field is required']"
data-cy="fullName">
</q-input>
// registration.spec.ts
import RegistrationForm from "./registration.vue"
import { Quasar } from "quasar"
import { mount } from "#vue/test-utils"
describe("test registration vue component", () => {
test("should show error when focus on full name", async () => {
const wrapper = mount(RegistrationForm, {
global: {
plugins: [Quasar],
},
})
const fullName = wrapper.get("[aria-label='Full Name *']")
fullName.trigger("focus")
fullName.trigger("blur")
wrapper.get("[role='alert']")
})
})
Error
Error: Unable to get [role='alert']
Environment
"quasar": "^2.6.6"
"vue": "^3.2.31"
"vite": "^2.9.1"
"vitest": "^0.8.1"
"#quasar/vite-plugin": "^1.0.9"
try adding 'await' before the trigger methods. Also try adding a value to the input.
fullname.setValue('your value here...')
await fullName.trigger("focus")
await fullName.trigger("blur")
I am used to the "normal" React setup, but now I need to make one of my pages in my ASP.NET MVC admin system into a simple react app.
I have installed https://reactjs.net/ for MVC 4/5, and followed the tutorial on how to setup.
My question is: How do you refer components in other files?
What I have done:
I have a super simple setup with an app called App.jsx. If I don't refer any pages, I get the output from the tutorial above.
However, if I - in the same folder - make a new file, InvoiceBuilder.jsx, and I make the following (or any code, this is never reached it seems):
var CommentForm = React.createClass({
render: function () {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
And I refer this inside my App.jsx file (I tried many variations of the import statement):
import CommentForm from './InvoiceBuilder';
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
var Comment = React.createClass({
render: function () {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
var CommentList = React.createClass({
render: function () {
return (
<div className="commentList">
<Comment author="Daniel Lo Nigro">Hello ReactJS.NET World!</Comment>
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
I already get the error:
Uncaught SyntaxError: Unexpected identifier
Based on the generated file starting with the following, and fails at the import line:
// #hash v3-E82E48A85D4E9467B3D81F106834DC4725BD0DDC
// Automatically generated by ReactJS.NET. Do not edit, your changes will be overridden.
// Version: 3.3.0 (build 8c1c474) with Babel 6.7.7
// Generated at: 01-04-2018 17:20:43
///////////////////////////////////////////////////////////////////////////////
//import React from 'react';
import CommentForm from './InvoiceBuilder';
var CommentBox = React.createClass({
EDIT:
I tried to add the JSX to a bundle like this:
bundles.Add(new BabelBundle("~/bundles/main").Include(
"~/Scripts/React/InvoiceBuilder/InvoiceBuilder.jsx",
"~/Scripts/React/InvoiceBuilder/App.jsx"
));
And then I get this error on the bundle compilation:
+ InnerException {"Error: unknown: Unexpected token (15:15)\n 13 | document.getElementById('content')\n 14 | );;\n> 15 | export default var CommentForm = React.createClass({\n | ^\n 16 | render: function () {\n 17 | return (\n 18 | <div className=\"commentForm\">\n at n (React.Core.Resources.babel.generated.min.js:1:416)"} System.Exception {JavaScriptEngineSwitcher.Core.JsRuntimeException}
Message "Error: unknown: Unexpected token (15:15)\n 13 | document.getElementById('content')\n 14 | );;\n> 15 | export default var CommentForm = React.createClass({\n | ^\n 16 | render: function () {\n 17 | return (\n 18 | <div className=\"commentForm\">\n at n (React.Core.Resources.babel.generated.min.js:1:416)" string
Try bundling all jsx files and render bundled js in asp.net webpage.
// BundleConfig.cs
bundles.Add(new BabelBundle("~/bundles/main").Include(
"~/Scripts/React/InvoiceBuilder/InvoiceBuilder.jsx",
"~/Scripts/React/InvoiceBuilder/App.jsx"
));
// Sample page - instead of <script src="#Url.Content("~/Scripts/App.jsx")"></script>
#Scripts.Render("~/bundles/main")
Update:
It is working fine with bundling, just remove import line and export statements.
Since Reactjs.Net doesn't support ES6 modules natively, if you want to use modules and not just separate files and Asp.Net MVC bundling, you should use module bundler such as Webpack.
You need to add a export to the component.
Try
export default const CommentForm = React.createClass({
render: function () {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
I'm trying to just get off the ground with Meteor 1.2.1 and am failing miserably.
I've simply used the code from this question but always receive a blank page. If I remove the Button class, there's no problem with getting the div to appear or text inside it.
I receive no console errors.
My added packages:
twbs:bootstrap 3.3.6
universe:react-bootstrap 0.24.0
react 0.14.3*
Code:
if (Meteor.isClient) {
Meteor.startup(function () {
let App=React.createClass({
render: function () {
return (
<div>
<Button>Default</Button>
</div>
);
}
});
React.render(<App/>, document.getElementById("container"));
});
}
I expect that whatever I'm missing is very simple, but can't narrow it down other then reac-bootstrap being the cause.
Did you require/import the Button component anywhere in your code? Maybe that's what was missing.
In my ignorance, I simply did not follow the universe:react-bootstrap documentation.
As a global
This package additionally export ReactBootstrap as a global, so you
can write inside any .jsx file:
let { Button } = ReactBootstrap;
<Button /> // React component
or
<ReactBootstrap.Button /> // React component
let { Button } = ReactBootstrap;
if (Meteor.isClient) {
Meteor.startup(function () {
let App=React.createClass({
render: function () {
return (
<div>
<Button>Default</Button>
</div>
);
}
});
React.render(<App/>, document.getElementById("container"));
});
}
Lets stay I have a loginbutton.html file with template {{loginButton}}.
<template name="loginButton">
//rest of code
</template>
How could I render this in a react component. I've looked around and found a couple of answers but to be honest I need more guidance bc I'm fairly new to Meteor. Below is a link to a possible answer I found. I just don't know how to implement this or if this is what i'm actually looking for.
https://gist.github.com/emdagon/944472f39b58875045b6
I finally solved the issue. If you're trying to use a blaze template in a react component you have to make sure your meteor app is using "templating" on the client side (and in a package which is what I was using). Afterwards just follow the directions from the link above when creating your component passing the template in as a prop:
Base.components.photoButton = React.createClass({
componentDidMount: function() {
var componentRoot = React.findDOMNode(this);
var parentNode = componentRoot.parentNode;
parentNode.removeChild(componentRoot);
this.view = Blaze.render(this.props.template, parentNode);
},
componentWillUnmount: function() {
// Clean up Blaze view
Blaze.remove(this.view);
},
render: function() {
return (<div/>
)
},
}));
There is a nice atmosphere package blazetoreact.
It's very simple. If you have this Blaze template:
<template name="loginButton">
<!-- rest of code -->
</template>
Then you can use it as React component:
const LoginButton = BlazeToReact('loginButton');
class SomeComponent extends React.Component {
render() {
return (
<div>
<LoginButton />
</div>
);
}
}