Im currently using material-ui for my web app and would like to add themes to it so Im using the MuiThemeProvider it comes with to theme it.
The documentation contains instructions on how to use custom components with themes but it unfortunately lacks instruction on how to use it from within a render function.
For example, in the the code they use is:
import React from 'react';
import muiThemeable from 'material-ui/styles/muiThemeable';
const DeepDownTheTree = (props) => (
<span style={{color: props.muiTheme.palette.textColor}}>
Hello World!
</span>
);
export default muiThemeable()(DeepDownTheTree);
Which is fine, but if you need the render function, this wont do. How would I achieve something similar to this? (This wouldnt work, just an example):
import React from 'react';
import muiThemeable from 'material-ui/styles/muiThemeable';
class MyComponent extends React.Component{
render(){
return muiThemeable()(
<span style={{color: props.muiTheme.palette.textColor}}>
Hello World!
</span>
)
}
}
export default muiThemeable()(DeepDownTheTree);
This is critical for my application as I manipulate bits of my DOM in the render function before returning the final DOM.
The equivalent statefull component to your initial stateless component would be
import React from 'react';
import muiThemeable from 'material-ui/styles/muiThemeable';
class MyComponent extends React.Component{
render(){
return (
<span style={{color: this.props.muiTheme.palette.textColor}}>
Hello World!
</span>
)
}
}
export default muiThemeable()(DeepDownTheTree);
Note that you use the higher order function (that's the muiThemable()) on the entire component, not on just what is returned from the render function.
Related
Within my React application, I'm met with an issue which seems to be related to imports or extending Component | React.Component with my main App class.
The error I'm met with is:
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined.
I assumed it might have to do with default vs named import of Component, but even when using React.Component instead of Component, I'm met with this issue.
Is there any reason why this would occur?
The import statements I've used are structure as such, below:
import React from 'react';
import Component from 'react';
import './App.css';
import Exercises from "./components/ExerciseDay";
import MySurvey from "./components/MySurvey";
import ExerciseSelector from "./components/ExerciseSelector";
import ToggleDisplay from 'react-toggle-display';
export default class App extends React.Component {
render() {
const surveyCompleted = localStorage.getItem("experience");
return (
<div className="App">
<header className="App-header">
<h1 className="App-title" style={{fontFamily: "Comfortaa, cursive", fontSize: 35}}>
Sheiko Workout Finder
</h1>
</header>
<ToggleDisplay show={!surveyCompleted} tag="section">
<MySurvey/>
</ToggleDisplay>
<ToggleDisplay show={surveyCompleted !== null}>
<ExerciseSelector/>
<Exercises/>
</ToggleDisplay>
<footer style={{fontFamily: "Comfortaa, cursive", fontSize: 20}}>
<p>
Note here -
</p>
</footer>
</div>
);
}
}
A Component is named export. Instead of import Component from 'react';
it should be import { Component } from 'react'; //with curly braces
But you are not using it. It can be deleted because you are using React.Component.
Most likely there is another problem because there is not shown how you are exporting other components from other files ( ExerciseDay,MySurvey,ExerciseSelector ) they or something from them might be named export instead of default export. Check how you are exporting them
And there is another case that will cause this error. If you are importing something wrong also in these components. For example, something imported in ExerciseDay from another file is incorrect. Like exported as named export instead of default export or vice versa
i have a question about the range of the props. I would in my App.js just call the component with 2 props (just below) and use those props in my other file "PrimaryButton.js".
function App() {
return (
<div className="App">
<PrimaryBouton Type='primary' Title='Lorem Ipsum'/>
</div>
);
}
export default App;
Here is my other file :
import './PrimaryButton.css';
import React from 'react';
class PrimaryBouton extends React.Component {
render(props) {
return (
<button className={props.Type}>
<span>{props.Title}</span>
</button>
);
}
}
export default PrimaryBouton ;
My Goal is to use the props on App.js to define here the css class of my button and his span.
I don't really know how to "import my props" in this file so if someone can help me thx !
To utilize props in your case, it would look like this:
import './PrimaryButton.css';
import React from 'react';
class PrimaryBouton extends React.Component {
render() {
const { title, type } = this.props;
return (
<button className={type}>
<span>{title}</span>
</button>
);
}
}
export default PrimaryBouton;
I would recommend naming your props lowercase opposed to uppercase. There are instances where you will eventually pass props as uppercase, like passing a component via props, so naming it uppercase generally indicates that.
I'm following a tutorial on React (https://www.youtube.com/watch?v=sBws8MSXN7A - dated January 3, 2019) and created a React app with npx create-react-app *app_name*. The App.js file this command generated on my computer is different from what this command generated for the person giving the tutorial. Has React changed since then or is it possible I downloaded something wrong?
My App.js:
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Tutorial's App.js:
import React, { Component } from 'react'; //different
import logo from './logo.svg';
import './App.css';
class App extends Component { //different
render() ( //different
// The rest of the file is the same
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
The most obvious difference is the syntax. A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.
A class component requires you to extend from React.Component and create a render function which returns a React element. This requires more code but will also give you some benefits.
A functional component doesn’t have its own state. If you need a state in your component you will either need to create a class component or you lift the state up to the parent component and pass it down the functional component via props.
Another feature which you cannot use in functional components are lifecycle hooks. The reason is the same as for state, all lifecycle hooks are coming from the React.Component which you extend from in class components. So if you need lifecycle hooks you should probably use a class component.
Conversely, functional components allowed to use hooks where class components are not allowed to.
There are basically two ways of writing components in React: functional and class components. The given examples are no different except for this aspect.
There is one major difference between these methods of defining a component. It's related to the state of the particular React component.
So, Function-Based Components => Are also called Stateless components reason being they don't update to any changes that are being applied to a particular component.
So, If I want to change some value in this <p>Hi, Welcome</p> on a button press to <p>Welcome Back</p>
It wouldn't be possible to use function-based components.
On the other hand, Class-Based Components => Are also called Stateful Components, being that they update to changes that occur to the component.
So, the previous example would work.
Personally, I would say a simple way to remember is Functional Components for static data and Class-Based Components for dynamic and interactive data.
The obvious differences are in the syntax and hints are derived from their names in how they will be written. They both render JSX (which is React’s way of writing HTML and JavaScript), however for the class component you define a class that extends the React.Component library. Additionally, the class component utilizes a render() method. Here’s an example:
App.js: functional component
import React, { Component } from 'react';
import './App.css';
function App() {
return (
<h1>hello</h1>
);
}
export default App;
App.js: class component
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<h1>hello</h1>
);
}
}
export default App;
I am very new to react and having a bizarre problem. I have defined a stateless function and when i want to try to import it in my main component it is not loading the function. i am guessing there is a naming convention that i dont know of. npm start does not give any error so I am assuming the code is compiling ok.
My stateless component is below
import React from 'react';
const AppHeader = () => {
return(
<div class="jumbotron text-center">
<h1>Map Search</h1>
<p>Searching map for nearest matches from account</p>
</div>
);
}
export default AppHeader;
below does not work,
import React from 'react';
import './App.css';
import appHeader from './UI/appHeader';
class App extends React.Component {
render(){
return (
<div className="App">
<appHeader/>
</div>
);
}
}
export default App;
VS code lint says
appHeader is declared but its value is never used.
However below does work,
import React from 'react';
import './App.css';
import KKK from './UI/appHeader';
class App extends React.Component {
render(){
return (
<div className="App">
<KKK/>
</div>
);
}
}
export default App;
VS code lint does not show the error anymore also the app is working as expected. As you can see i only changed the name of the appHeader component to KKK. can someone point out what am i doing wrong and may be provide any documentation around this.
You need to capitalize appHeader to be AppHeader in order for React to understand that this is a custom component and not a built in html component. Components that start with lowercase are assumed to be built in HTML elements.
Check out this answer: ReactJS component names must begin with capital letters?
And from the React docs:
User-Defined Components Must Be Capitalized
When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
I'm playing around with React and ES6 using babel and webpack. I want to build several components in different files, import in a single file and bundle them up with webpack
Let's say I have a few components like this:
my-navbar.jsx
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}
main-page.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import MyNavbar from './comp/my-navbar.jsx';
export class MyPage extends React.Component{
render(){
return(
<MyNavbar />
...
);
}
}
ReactDOM.render(
<MyPage />,
document.getElementById('container')
);
Using webpack and following their tutorial, I have main.js:
import MyPage from './main-page.jsx';
After building the project and running it, I get the following error in my browser console:
Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.
What am I doing wrong? How can I properly import and export my components?
Try defaulting the exports in your components:
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export default class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}
by using default you express that's going to be member in that module which would be imported if no specific member name is provided. You could also express you want to import the specific member called MyNavbar by doing so: import {MyNavbar} from './comp/my-navbar.jsx'; in this case, no default is needed
Wrapping components with braces if no default exports:
import {MyNavbar} from './comp/my-navbar.jsx';
or import multiple components from single module file
import {MyNavbar1, MyNavbar2} from './module';
To export a single component in ES6, you can use export default as follows:
class MyClass extends Component {
...
}
export default MyClass;
And now you use the following syntax to import that module:
import MyClass from './MyClass.react'
If you are looking to export multiple components from a single file the declaration would look something like this:
export class MyClass1 extends Component {
...
}
export class MyClass2 extends Component {
...
}
And now you can use the following syntax to import those files:
import {MyClass1, MyClass2} from './MyClass.react'
MDN has really nice documentation for all the new ways to import and export modules is ES 6 Import-MDN . A brief description of it in regards to your question you could've either:
Declared the component you were exporting as the 'default' component that this module was exporting:
export default class MyNavbar extends React.Component { , and so when Importing your 'MyNavbar' you DON'T have to put curly braces around it : import MyNavbar from './comp/my-navbar.jsx';.
Not putting curly braces around an import though is telling the document that this component was declared as an 'export default'. If it wasn't you'll get an error (as you did).
If you didn't want to declare your 'MyNavbar' as a default export when exporting it : export class MyNavbar extends React.Component { , then you would have to wrap your import of 'MyNavbar in curly braces:
import {MyNavbar} from './comp/my-navbar.jsx';
I think that since you only had one component in your './comp/my-navbar.jsx' file it's cool to make it the default export. If you'd had more components like MyNavbar1, MyNavbar2, MyNavbar3 then I wouldn't make either or them a default and to import selected components of a module when the module hasn't declared any one thing a default you can use: import {foo, bar} from "my-module"; where foo and bar are multiple members of your module.
Definitely read the MDN doc it has good examples for the syntax. Hopefully this helps with a little more of an explanation for anyone that's looking to toy with ES 6 and component import/exports in React.
I Hope this is Helpfull
Step 1: App.js is (main module) import the Login Module
import React, { Component } from 'react';
import './App.css';
import Login from './login/login';
class App extends Component {
render() {
return (
<Login />
);
}
}
export default App;
Step 2: Create Login Folder and create login.js file and customize your needs it automatically render to App.js Example Login.js
import React, { Component } from 'react';
import '../login/login.css';
class Login extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default Login;
There are two different ways of importing components in react and the recommended way is component way
Library way(not recommended)
Component way(recommended)
PFB detail explanation
Library way of importing
import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';
This is nice and handy but it does not only bundles Button and FlatButton (and their dependencies) but the whole libraries.
Component way of importing
One way to alleviate it is to try to only import or require what is needed, lets say the component way. Using the same example:
import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';
This will only bundle Button, FlatButton and their respective dependencies. But not the whole library. So I would try to get rid of all your library imports and use the component way instead.
If you are not using lot of components then it should reduce considerably the size of your bundled file.