I'm trying something that I thought would be very basic but for some reason its just not working at all!
I'm simply trying to create 2 simple react components in 2 different jsx files and import one of them to the parent file and then use and render the child component in the parent one.
I have created a simple mvc site that simply goes to the index page that imports the selected jsx file which the first component is in. Reactjs is installed via nuget package manager. I'm still learning reactjs so I'm probably doing something glaringly wrong for this to not work.
I have tried using requires and es6 import/export but neither seem to work for me.
specifically using the import/export methods throws a syntax error even though I have both node.js and typescript installed in visual studio!
Any help would be great.
Please see code below:
Component1.jsx:
import Component2 from "./Component2.jsx"
class Component1 extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div>hello</div>
</div>
);
}
}
ReactDOM.render(
<Component1 />,
document.getElementById('test')
);
Component2.jsx:
class Component2 extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>test</div>
);
}
}
export default Component2;
Related
I have a catalago-component.js which is a web component. I'm trying to use this web component like so:
import React from 'react'
import './../../../assets/catalago-component'
class Loja extends React.Component{
constructor(props){
super(props)
this.state = {}
}
render(){
return(
<React.Fragment>
<div className="page-header">
<h1 className="page-title">Loja</h1>
</div>
<catalago-component></catalago-component>
</React.Fragment>
)
}
}
export default Loja
but every time I run my react app I get this error
src\assets\catalago-component.js
Line 1:1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1:85: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1:399: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1:599: Expected an assignment or function call and instead saw an expression no-unused-expressions
...
but if I do any changes to the app that makes it recompile then it works just fine
how to solve this error forever? I don't want this app breaking every time I run it for the first time
EDIT: I tried to use this web component with pure html and it worked. take a look
https://eduardopreuss.github.io/web-component/
https://github.com/eduardopreuss/web-component
EDIT 2: link to codesandbox using react + web component https://codesandbox.io/s/hopeful-cohen-ut6mv?file=/src/App.js
I think you might want to try something like this:
import Catalago from './../../../assets/catalago-component'
Then use the component like:
<Catalago></Catalago>
Assuming your Web component issomething like this:
class Catalago extends React.Component {
render() {
return <speical-web-stuff><speical-web-stuff>
}
}
See:https://reactjs.org/docs/web-components.html
As said above, you should give your component a name in order to import.
import Catalago from './../../../assets/catalago-component'
However, sth you may pay attention to.
Below syntax expect your component is written in index.js under the folder catalago-component
import Catalago from './assets/catalago-component' //component locate in file name ```index```
import Catalago from './assets/catalago-component/customizedName.js'
which type of export used in that component
import Catalago from './assets/catalago-component/customizedName.js' // exporting via ```export default``` keyword
import { Catalago } from './assets/catalago-component/customizedName.js' //exporting via ```export``` keyword
Inside your webpack.config.js add this line
Than you can use your component from anywhere inside project.
import Catalago from 'Components'
There is nothing wrong how I imported, it was a eslint error just like #tsecheukfung01 said in the comments. So I added my web component to .eslintignore file and It worked just fine.
more ways to ignore eslint errors here
The way you import your component is perfectly fine.
A web-component is nothing more than any other HTMLElement like a <div> or an <a>, meaning this is NOT a React component and cannot be imported and used as such.
Example web-component
export class MyComponent extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `My Webcomponent!`
}
static get tag() {
return 'my-component';
}
}
customElements.define(MyComponent.tag, MyComponent);
Using the above web-component would look something like:
import './../../../assets/MyComponent.js'
...
render() {
return() {
<div>
<my-component></my-component>
</div>
}
}
import Catalago from './../../../assets/catalago-component'
...
render() {
return() {
<div>
<Catalago //other props/>
</div>
}
}
I'm getting the following error on webpack build and I don't understand why:
SyntaxError: this is a reserved word (11:5)
It occurs inside the Applicatons class at the code which says this.props.apps.map. Its trying to iterate through the passed apps property and create a JSX representation of Application components. I've included the Applications class as the first piece of code and the subsequent code shows how I instantiate the Applications component in a different class. I'm trying to access the props field inside the Applications class which extends the React Component
Here is the Applications class which I am clearly not using React props correctly:
import React from 'react';
import ReactDOM from 'react-dom';
import Application from './Application/Application';
import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
class Applications extends React.Component {
render(){
let applicationsList=null;
applicationsList = (
{this.props.apps.map((app,index)=>{
return <Application
name={app.name}
desc={app.desc}
changed={(event)=>this.props.changed(event,app.id)}
click={()=>this.props.clicked(index)}
key={app.id}
/>
})}
);
return (
{applicationsList}
)
}
}
And here is the code inside a different react component that instantiates the Applications component.
render(){
let applications=null;
applications = (
<div>
<Applications
apps={this.state.apps}
clicked={this.deleteApplicationHandler}
changed={this.nameChangedHandler}/>
</div>
);
return (<div>{applications}</div>);
}
I'm extremely new to react so i apologize if i missed anything if i did please let me know and ill update the question.
You're trying to use JSX templating syntax outside JSX. Curly brackets are interpreted as defining an object literal. Remove the extra brackets.
render(){
let applicationsList=null;
applicationsList = this.props.apps.map((app,index)=>{
return <Application
name={app.name}
desc={app.desc}
changed={(event)=>this.props.changed(event,app.id)}
click={()=>this.props.clicked(index)}
key={app.id}
/>
});
return applicationsList;
}
In my react app I have a component which was exported using react-redux connect.
class Test extends Component {
...
}
export default connect(...)(Test)
and using component:
<div>
<Test />
</div>
As long as I was exporting it in the same file everything was working fine. Because of tests issue I moved the connect to different file. Now it's like:
(Test.js)
class Test extends Component {
...
}
export default Test
and in different file (TestConnect.js):
import Test from './Test'
...
export default connect(...)(Test)
and using component:
<div>
<TestConnect />
</div>
As long as I had the Component and its connect in the same file changing props was rerendering the Test component. Now it's not. Could You please help me understanding that? How can I fix this?
Edit
Solved by use {pure:false} as "options" in connect!
Unless you're actually facing an edge case and this is the only way out, as stated in redux's troubleshooting section, using {pure: false} isn't the best solution, since redux expects your components to be pure (Always produce the same results, given the same props and states)
Here's how I'd do it:
Test.js
class Test extends Component {
...
render() { ... }
}
export default Test
TestContainer.js
import Test from './Test'
import connect from 'react-redux'
class TestContainer extends Component {
render() {
return(<Test {...this.props} /> (Don't forget to pass your props down, otherwise, Test won't work properly)
}
}
TestContainer = connect(...)(Test)
export default TestContainer
App.js
import TestContainer from './TestContainer'
class App extends Component {
...
render(){
return(
<div>
<TestContainer {...props (If you need to pass anything that isn't at redux store)} />
</div>
)
}
}
I've used this approach quite a few times in some projects and it's worked pretty well
If you're not in that edge case scenario and this solution still doesn't work, need some more information to see where things are going wrong :)
I'm building a site in React using Redux, and my goal is to have a /pages folder full of markdown files that'll represent a pages content.
I have a React Container (smart) and a React Component (dumb) that'll be used to render the content. My thinking is that I'll import the markdown files to the parent container and pass them down to the child component to render them in the browser. I know I'll need to use something like markdown-it to convert the MD to HTML and maybe I'll need to use that in the child component.
My questions are:
1) How do I pass in markdown files from parent to child using this.props?
2) Am I on the right track? Is this the right way to go about it?
Here are my components:
Page Parent Container
import React from 'react'
import SamplePage from './../components/SamplePage'
export default class Page extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<section>
<SamplePage />
</section>
)
}
}
SamplePage Child Component
import React from 'react'
import { Link } from 'react-router'
export default class SamplePage extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="page-container">
<Link to="/" className="previous-link">Go Back Home</Link>
// I want to render the MD here using {this.props.markdown}
</div>
)
}
}
A few things:
1) I recommend using a Markdown to JSX parser to keep your templating safe (otherwise you'd likely have to use dangerouslySetInnerHtml)
2) I'd run this parser during build time, so everything is already ready to go. If you're using webpack or browserify, you can add a custom loader/transformer function to look for *.md files being required and run it through the parser.
3) The parsed markdown is then simple JSX and can be required & dropped into your existing component as you've done above.
I am using a component:- https://github.com/christianalfoni/formsy-react, for creating forms. I am trying to create one of my own components of the input. So as mentioned I need to use it for my's mixin. But unfortunately, there is no support for it in es6 style. So any work around anyone knows of.
here is my component code:-
import Formsy from 'formsy-react';
class DropDownAutoComplete extends React.Component {
constructor(props, context) {
super(props, context);
this.mixins = [Formsy.Mixin];
}
changeValue(event) {
this.mixins[0].setValue(event.currentTarget.value);
}
handleValue1Change(value) {
this.setState({value: value});
}
render() {
const className = this.mixins[0].showRequired() ? 'required' : this.mixins[0].showError() ? 'error' : null;
// An error message is returned ONLY if the component is invalid
// or the server has returned an error message
const errorMessage = this.mixins[0].getErrorMessage();
return <DropdownList
data={this.props.dropDownConfigs.value}
onChange={this.changeValue.bind(this)}
textField={this.props.dropDownConfigs.name}
caseSensitive={false}
filter='contains'>
</DropdownList>
}
}
It's throwing an error where the show required function is called. Apparently, its implementation uses some state variables like required.
By design, mixins do not work with ES6 classes - trying to hack something together is just going to cause you headaches!
One solution is to use what's called a higher-order component - a function that takes in a component, and returns a new component that wraps around it. These wrapper components can have lifecycle hooks of their own, and can pass props down to the wrapped components, effectively providing you with the same functionality mixins would give you, but arguably in a cleaner way!
formsy-react allows you to take this approach, providing its own HOC:
import {HOC} from 'formsy-react';
class MyInput extends React.Component {
render() {
return (
<div>
<input value={this.props.getValue()} onChange={(e) => this.props.setValue(e.target.value)}/>
</div>
);
}
};
export default HOC(MyInput);
You can use react-mixin-decorator.
Quoting from README:
If you're creating React components using ES6 classes and you'd like
to use existing mixins to add some nice functionality to your
component, you probably don't want to take the time to convert the
mixins to something that your ES6 React component class could use.