I have a quick question regarding components in frameworks like Vue or React (I'm using Vue):
I am building a relatively simple web app with a navigation bar which is visible on all pages.
Where would you put the navigation bar component? On every single page? Or only once on the main parent page where all the child components get loaded?
Hello you can call components from anywhere, you just need to create the component in a separate file in your components folder. (mycomponent.vue)
<template>
<h1>I am a component</h1>
</template>
and then in your view you need to import that component with:
import mycomponent from './mycomponent.vue'
and finally you just need to declare it inside your instance like this.
export default {
components: {
mycomponent
},
// ...
}
if you do this you are going to be able to print that h1 using in your view this tag.
<mycomponent></mycomponent>
it's like if you create your own html tag.
it's very simple, greetings, hope it helps just do it with your nav bar no with an h1.
Related
The image will best describe this:
code sandbox:https://codesandbox.io/s/annoying-stylesheet-2gpejc?file=/public/index.html
You can see some styles were removed (for 'code' element for example), but not all the styles(MUI TextInput Component)
I'm writing React app inside non react app and their styles interfere with my React app styles.
How do I overwrite bootstrap-enterprise.css stylesheet only for the region of my React app without overriding the style rest for the rest of the page (The top app bar is theirs)
.App {
all: revert;
}
worked initially, but then I tried it my real usecase (overrding Mui Textfield styling component) and it didn't.
I don't know how to make a layout with a child page like this with material-ui. How do I build this?
If you know how to setup angularjs, you also can setup material-ui.
Same angularjs. [ index file - setup data-ng-app="myapp" in html tag
for router use ui-router
setup app.js
use
for ui aesthetic
make individual view same all like angularjs
And whatever styling you want use material ui, as the document says.
For styling you can use material-ui grid, then you can use React Router Link or something else and wrap the elements inside the Link (and set the Route in App.js if you use React Router). If you want your page as a child component, just import it as a component to the parent component and return it in the DOM.
I'm currently making a react application with create-react-app
It's a single page with several sections (Home / About / Contact ...)
Each section is a component that I export, of course.
Currently my App.js is like this :
App.jsx
import Menu from './components/menu/Menu';
import Header from './components/header/Header';
import Home from './components/sections/00_home/Home';
import About from './components/sections/01_about/About';
import Works from './components/sections/02_works/Works';
import Contact from './components/sections/03_contact/Contact';
const App = () => {
return (
<div className={styles.Container}>
<Menu />
<Header />
<Home />
<About />
<Works />
<Contact />
</div>
);
};
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
/* CSS */
import './index.css';
/* JSX */
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
To go from one section to another I use the anchor tag href's
For example in the home section, I have links to the other sections, same for the menu.
So far so good for me, but I'm wondering a question.
Should I use react-router? If so, why?
In which situation should I use it ?
If someone could enlighten me on that, that'd be great.
Is the way I currently code unconventional?
Ced.
From your question, perhaps you misunderstood the single-page application (SPA) theory which is the main reason for why we have to adopt React Router instead of html hrefs. A brief clear overview from quick gg is that "React Router, a dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information."
So when you are having some shared components and you want to write less code and avoid reloads whenever user navigate around which is quite annoying then React router is a solution you need.
There are few differences in both which are quite important:
React-router: You can define the links you wanna go to and with the help of Link tag you define the URL in other components. In this situation, the Link tag will not refresh the page but instead would go onto the corresponding page but a href will refresh the page.
It might be difficult for you to pass information between components, as it is an important concept behind react.
Another would be an example, like if you are on /classes link and you go for a href tag, then it that case it will redirect you (i.e., you are using a relative path) to the /classes/teachers page, but you might want to go to /teachers URL. With the lp of Link and router, when you provide /teachers, it will redirect you to this URL
I have also started working on react and these are the points I came through.
I have multiple, reusable components on a single web page. For example, a popup, sidebar newsletter signup and a simple carousel below the content.
I'm getting the following error
'__reactInternalInstance$lvoo7hroqz' of null
After some research I believe this is down to having multiple calls to react, which makes sense. Every component imports React I believe this is due to the fact react adds id's to each node and it conflicts on each instance that's called.
My question is how would I render multiple components on a single web page? when there's no parent node/container and these elements are called individually throughout the site.
Thanks
EDIT
I have three components that look similar to below.
import React, { Component } from 'react'
export default class test extends Component {
render(){
return (<h1>test one</h1>)
}
These three individual components appear randomly around my page.
<div>
<header>
Some HTML/PHP here
<ReactTestComponent />
</header>
<div>
content here
<AnotherComponent />
</div>
<FinalComponent/>
</div>
These three components do not always appear on the same page, for instance "FinalComponent" may be missing from the next page (depending if you're on a archive page etc) so all my components need "import React from 'react'" at the top of each file.
When I render multiple components on a single page. I get the following errors. (Based on the amount of components rendered, if I render two components I get two of the same error)
Uncaught TypeError: Cannot read property '__reactInternalInstance$lvoo7hroqz' of null
at Object.getClosestInstanceFromNode (react.min.js:504)
at findParent (react.min.js:36970)
at handleTopLevelImpl (react.min.js:36999)
at ReactDefaultBatchingStrategyTransaction.perform (react.min.js:6065)
at Object.batchedUpdates (react.min.js:36768)
at Object.batchedUpdates (react.min.js:1779)
at dispatchEvent (react.min.js:37079)
OK, looking into this a little further I noticed it was a error on my part.
One of the includes was calling the same react file in addition to the footer, so I had two referenced to react.min.js causing the conflict.
Hope this helps someone.
I'm creating my first application with ReactJS. So I want to know if React can be used (added) in an existing HTML ?
Please help me
Potentially YES.
You can use React only to create specific dynamic widgets in an existing website. You are not forced to render/manipulate ALL your DOM with React.
When you render a React component you need to specify the root DOM node where it will be rendered.
Just to make an example:
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
In this case mountnode will be a reference to a specific dom node within your page. React will work only inside that node, so if you don't manipulate it with other libraries/pieces of javascript code everything should work as expected
Yes, you can render a React component within your current DOM. This might be useful for you: https://facebook.github.io/react/docs/getting-started.html
Yes you can. Just look at your HTML code to see which part's you would like to be dynamic then add in the ReactJS goodies. It all depends on what you need and your understanding of the ReactJS library.
Here is a tutorial that may help.
ReactJS Tutorial