We use a React component package which provides some reusable components such as Button, Form, TreeView etc... That package is developed on top of React 14.
We want to develop a new application using React 16 and utilize this component package because it provides a lot of look and feel stuff out of the box.
Our code looks like this.
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Button from 'reusable-components/button';
export default class MyComponent extends Component {
render() {
return <Button>{this.props.buttonCaption}</Button>;
}
}
MyComponent.propTypes = {
buttonCaption: PropTypes.string
};
With this code, when I open the page, I get an error saying TypeError: o.PropTypes is undefined in the browser console. I believe "o.PropTypes" is the obfuscated version of "React.PropTypes" and I am getting this error because somewhere in the source code of Button component they used "React.PropTypes" which became invalid after React 14.
Another thing is that when I do not use Button and do not import it at all, everything works fine. So, I am pretty sure that the issue is caused by the Button component.
I tried below thing in my index.js but it did not help.
import React from 'react';
import PropTypes from 'prop-types';
React.PropTypes = PropTypes;
Is there a way to use React 14 components from React 16 app? In the worst case we will downgrade to 14 as the library does not have 16 support yet but we really want to avoid it.
Related
I am following this: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
Which clearly says that the component won't work without the first import listed
import React from 'react';
import logo from './logo.svg';
import './App.css';
I just created my first tutorial app, opened App.js and it is not there. Yet I can npm start run it without any problems.
There are three import statements.
import React from 'react';
Stackoverflow already has a bunch of questions with answers about it (as an example: JSX can be used without importing React). Short answer: this import can be missed since React 17.
import logo from './logo.svg';
Here is an assignment of some value to the logo variable (by Webpack); therefore, the logo will be undefined if this import is missed. Apparently, your application can successfully start with an undefined logo.
import './App.css';
This import adds some styles to a component (by Webpack). So, your application has default browser styles without it.
That's why your application can be started without these import statements.
I have seen that it is used
import React from 'react';
import './cssName.css';
but it does not work for me, I am working on the electron app and add react as shown here
https://reactjs.org/docs/add-react-to-a-website.html
It is not working because you do not have a build process set up. You will need to setup webpack or something like that to be able to import css.
I suggest you read this article: https://flaviocopes.com/react-electron/.
I am using React in Action by Manning Publications. The book uses React v. 16.0.0 and I have set up my dependencies in package.json to be identical to theirs. Their code says to import as follows:
import React, { Component } from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";
But when I do, I get the following error:
SyntaxError: Unexpected identifier 'React'. import call expects exactly one argument.
I've scoured Stock Overflow for an answer but could not find anything about what the error means in the context of React. I have tried using React v. 16.4.2, the current version, 16.0.1, the version that the book uses, and v. 15.0.1. Nothing changes.
The closest Stack Overflow article I could find is asking the difference between the "import react" and "{ Component }" "from 'react'" portions of the import expression.
You need some Modules or bundler like Webpack.You cannot excecute it
We are using Laravel Mix to compile react components and serve them individually to the respective pages where they are needed - It's not a SPA.
I'm new to React, so excuse my ignorance. I'm trying to get my head around the current setup and find out if it's the proper way of having multiple components in the same page.
So the boilerplate below has been copied and pasted in every component, only changing the selector, e.g.:
'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {createStore, applyMiddleware, compose} from 'redux'
import ReduxPromise from 'redux-promise'
import App from './containers/App'
import reducers from './reducers'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const enhancer = composeEnhancers(
applyMiddleware(ReduxPromise),
)
const newstore = createStore(reducers, enhancer)
ReactDOM.render(
<Provider store={newstore}>
<App />
</Provider>, document.querySelector('.component-foo')
)
Some components also differ slightly in how the store is created, e.g. redux devtools is not always present.
So, coming from Vue.js, that doesn't make much sense to me - in Vue.js you'd use a single file to import everything related to the framework and then load each component you need with a single line of code. But this React setup seems to be doing quite the opposite: loading a separate instance of React and Redux for every component in the page, as if I had multiple root/app components in Vue.js.
Is it right to assume React is being bundled and booted multiple times and would that be the proper way to do things?
You're almost certainly doing this wrong. Yes, its very likely you are bundling and booting React multiple times, but no that is not the proper way to do things. It seems you are trying to use the Vue paradigm to do this but with code copied from a React SPA which is why you are building this monstrosity.
May I suggest checking basic react+laravel tutorials before you proceed? simple google search showed this: https://code.tutsplus.com/tutorials/build-a-react-app-with-laravel-backend-part-2-react--cms-29443 and I'm sure there are many others.
Since you are new to react, avoid redux for now and just get familiar with putting up react with multiple components. only then add the redux state management IF YOU NEED IT.
Import React vs Import React, { Component }
Which one is better and why?
Or does it make no difference other than writing less code later on?
Does writing { Component } mean it only imports the Component object?
import React, { Component } lets you do class Menu extends Component instead of class Menu extends React.Component. It's less typing and duplication of the React namespace, which is generally a desired modern coding convention.
Additionally, tools like Webpack 2 and Rollup do "tree shaking," meaning any unused exports are not bundled into your final code. With import React/React.Component you are guaranteeing all of React's source code will be bundled. With import { Component }, some tools will only bundle the code needed to use the Component class, excluding the rest of React.
The above paragraph is irrelevant in this specific case, because you always need to have React in the current namespace to write JSX, but only importing the exact modules you need in other cases may lead to smaller bundled code in the end.
Beyond that it's entirely personal preference.
What these are are named imports or namespace imports. What they do is basically copy over the module's contents into the namespace allowing:
import React, { Component } from 'react';
class SomeComponent extends Component { ... }
Normally, we'd extend React.Component, but since the Component module is imported into the namespace, we can just reference it with Component, React. is not needed. All React modules are imported, but the modules inside the curly brackets are imported in such a way that the React namespace prefix is not needed when accessing.
TLDR;
it's entirely personal preference.
Just a note…
import React, { Component } lets you do class Menu extends Component
instead of class Menu extends React.Component. It's less typing…
If you want to do less typing, then don't import Component in addition to React.
import React, { Component } from 'react';
class Menu from Component {
is more typing than:
import React form 'react';
class Menu from React.Component {
even if you consider auto-completion. ;)