I have to make a card.
For that I need to make 3 components.
First for Card Header
Second for Card Description and
Third for main Card that will give values to both components.
In my Card class I want to display the array data. I have no idea how to do that.
I believe I should use map() but I do not understand how.
My structure should be like Card header1 with Card description1 then Card header2 with Card description2.
<!Doctype html>
<html>
<head>
<title>React Cards</title>
<link rel="stylesheet" href="screen1.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
class Header extends React.Component { render () { return (
<div className='t1'>
<h1>{this.props.text}</h1>
</div>
) } } class CardDesc extends React.Component { render () { return (
<div className='t2' id='this.props.id'>{this.props.text}</div>
) } } class Card extends React.Component { render () { return (
<div className='t3'>
<Header text="this.props.head" />
<CardDesc text="this.props.des" />
</div>
) } } var cardContent = [ {head:'Header one',des:'000'}, {head:'Header two',des:'001'},
{head:'Header three',des:'002'}, {head:'Header four',des:'004'}, {head:'Header
five',des:'005'}, {head:'Header six',des:'006'} ]; ReactDOM.render(
<Card />, document.getElementById('root'))
</script>
<div id="root"></div>
</body>
</html>
When you want to pass a variable as props, don't use quotes, instead use {}, so change:
<Header text="this.props.head"/>
<CardDesc text="this.props.des" />
To:
<Header text={this.props.head}/>
<CardDesc text={this.props.des} />
Now, you can simply render your cards like so:
ReactDOM.render(
<div>
{cardContent.map(cardItem => <Card head={cardItem.head} des={cardItem.des} />)}
</div>
, document.getElementById('root'))
As you can see, a root element (div in this case) is required for the render function.
Another method would be to create a CardList component, and render that, instead of having the map in ReactDOM.render.
I think multiple rendering to the root element is bad idea, you can try create new component like App or whatever, end map your card components into it.
Look at this
Related
Within reveal.js presentation, how would one import a react component into a slide? I have one slide that is calling a react component elsewhere and it requires a different component. At the moment I get a "cross orgin request blocked" error. For ex:
import plotgenerator from './js/plotGen'
Or in a simulated example:
<div class="reveal">
<section>
<div id="reactstuff"></div>
</section>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script>
Reveal.initialize({etc})
</script>
<script type="text/babel">
//create a react component here that would render in the above slide where the div id "reactstuff" is defined
//******problem
//I would like to import a component here to be run in this code, like below
import plotgenerator from './js/plotGen'
//******
class App extends React.Component {
constructor(props) {
super(props);
this.state = {null};
}
doSomething() {
}
render() {
return (
<div className="app">
<plotgenerator/>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('reactstuff')
);
</script>
Im looking for a way to display an image when a button is toggled on. It seems like a simple enough task, and would help me greatly to understand how to do it. I have tried something like this, but it does not render anything.
This is the function that returns the svg image:
import dfElement from '../vectors/dfElement.svg';
function renderElement(){
return <img src={dfElement}/>
}
This is the class that calls the function to return svg:
class DF extends Component {
render() {
return (
<div >
<div >
<button onClick={this.renderElement}>df</button>
</div>
</div>
);
}
}
export default DF
I've used Functional Component with useState().
It's a simpler way to make a component.
ref >
https://en.reactjs.org/docs/hooks-intro.html
function App(){
const [toggle, setToggle] = React.useState(false);
return (
<div>
<button onClick={()=>setToggle( (prev) => (!prev) )}>Toggle!</button>
<br/>
{
toggle && <img src='https://2.imimg.com/data2/LQ/QV/MY-/teddy-small-size-500x500.jpg' />
}
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root" />
I'm trying to create a composed input text (joining 4 input components) but i'm not being able.
Everything seems to be OK and the only way I Have been able to show the input text is placing it in the render of the main React component (cardform). In the DOM explorer (chrome) the only componet I an empty cardNumberFullField
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="script.js"></script>
</body>
</html>
This is the JS:
class CardForm extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<cardNumberFullField />
</div>
)
}
}
function cardNumberFullField() {
return (
<div>
<cardNumberInputField inputName="0" />
<cardNumberInputField inputName="1" />
<cardNumberInputField inputName="2" />
<cardNumberInputField inputName="3" />
</div>
)
}
function cardNumberInputField(props) {
return (
<div>
<input id={props.inputName} name={props.inputName} type="text" />
</div>
)
}
// Main render
ReactDOM.render(<CardForm />, document.getElementById("root"))
React custom components always needs to be in Capitalized. So cardNumberFullField should be CardNumberFullField, cardNumberInputField should be CardNumberInputField
Check Specifying The React Element Type.
The first part of a JSX tag determines the type of the React element.
Capitalized types indicate that the JSX tag is referring to a React
component. These tags get compiled into a direct reference to the
named variable, so if you use the JSX expression, Foo must be
in scope.
class CardForm extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<CardNumberFullField />
</div>
);
}
}
function CardNumberFullField() {
return (
<div>
<CardNumberInputField inputName="0" />
<CardNumberInputField inputName="1" />
<CardNumberInputField inputName="2" />
<CardNumberInputField inputName="3" />
</div>
);
}
function CardNumberInputField(props) {
return (
<div>
<input id={props.inputName} name={props.inputName} type="text" />
</div>
);
}
// Main render
ReactDOM.render(<CardForm />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
I added react to an HTML page. With this approach, how can I write a class above my App class and import it to use within Class?
class Header extends React.Component
above my App class but it I keep getting an error:
super expression must be null or a function
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/babel">
class App extends React.Component {
componentDidMount() {}
render() {
return (
<div className="">
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
</script>
</body>
</html>
The class would be just another React Component, so you can just render it as you would any:
class Header extends React.Component {
render() {
return (
<h1>My Custom Header</h1>
)
}
}
class App extends React.Component {
componentDidMount() {
}
render() {
return (
<div className="">
<Header/>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
That said, you might just want to use functional components in such (stateless) cases.
First of all I am new to whole React and Electron thing so I am not sure if the thing I am doing is correct. I am trying to separate my components into different JSX files and import them and render them into div tags in my index page for my Electron app. However, I am a bit confused because it "partially" works. I am trying to separate my tab pages. I have one container file which looks like this
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
import TabPane1 from '../Components/TabPanes/TabPane1.jsx';
import TabPane2 from '../Components/TabPanes/TabPane2.jsx';
import TabPane3 from '../Components/TabPanes/TabPane3.jsx';
import TabPane4 from '../Components/TabPanes/TabPane4.jsx';
import TabPane5 from '../Components/TabPanes/TabPane5.jsx';
import TabPane6 from '../Components/TabPanes/TabPane6.jsx';
import TabPane7 from '../Components/TabPanes/TabPane7.jsx';
window.onload = function(){
ReactDOM.render(<NavigationLeft />, document.getElementById('viewNavigationLeft'));
ReactDOM.render(<TabPane1 />, document.getElementById('viewTabPane1'));
ReactDOM.render(<TabPane2 />, document.getElementById('viewTabPane2'));
ReactDOM.render(<TabPane3 />, document.getElementById('viewTabPane3'));
ReactDOM.render(<TabPane4 />, document.getElementById('viewTabPane4'));
ReactDOM.render(<TabPane5 />, document.getElementById('viewTabPane5'));
ReactDOM.render(<TabPane6 />, document.getElementById('viewTabPane6'));
ReactDOM.render(<TabPane7 />, document.getElementById('viewTabPane7'));
}
The content on my index.html page seems like loading fine however when it is rendering my components into the page, it is duplicating "TabPane1" only, the rest is not even there. Literally looks like they are duplicated.
My index.html page
<html>
<head>
...yada yada
<script>
// install babel hooks in the renderer process
require('babel-register');
</script>
</head>
<body>
<script>
require('./Containers/MainApp');
</script>
<div class="wrapper">
<div id="viewNavigationLeft" class="sidebar" data-color="blue" ></div>
<div id="viewMainPanel" class="main-panel">
<div id="viewTabPagesTest" class="tab-content">
<div id="viewTabPane1"></div>
<div id="viewTabPane2"></div>
<div id="viewTabPane3"></div>
<div id="viewTabPane4"></div>
<div id="viewTabPane5"></div>
<div id="viewTabPane6"></div>
<div id="viewTabPane7"></div>
</div>
</div>
</div>
</body>
Finally, my component contents (just one of them) looks like following:
'use babel';
import React from 'react';
class TabPane1 extends React.Component {
render(){
return(
<div>
<div className="tab-pane" id="tabPane1">
yada yada blah blah tab content for tabPane1
</div>
</div>
)
}
}
export default TabPane1
If I populate these into divs separately as I stated above, it does populate them but it breaks the tabpage functionality - tab script expects the tab pages to be populated under the "viewTabPagesTest" div directly, rather than having another div under it.
If I do the same thing by targeting viewTabPagesTest directly, it only renders the last element, not all of the tab pages. So that's where I am lost actually.
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
import TabPane1 from '../Components/TabPanes/TabPane1.jsx';
import TabPane2 from '../Components/TabPanes/TabPane2.jsx';
import TabPane3 from '../Components/TabPanes/TabPane3.jsx';
import TabPane4 from '../Components/TabPanes/TabPane4.jsx';
import TabPane5 from '../Components/TabPanes/TabPane5.jsx';
import TabPane6 from '../Components/TabPanes/TabPane6.jsx';
import TabPane7 from '../Components/TabPanes/TabPane7.jsx';
window.onload = function(){
ReactDOM.render(<NavigationLeft />, document.getElementById('viewNavigationLeft'));
ReactDOM.render(<TabPane1 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane2 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane3 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane4 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane5 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane6 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane7 />, document.getElementById('viewTabPagesTest'));
}
What is the correct way to achieve this - to render my components into a single div at once?
Cheers.
The correct way would be to render your navigation page and then inside your navigation page, render out your tab panes. Ideally you would only call ReactDOM.render once. Something like this:
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
window.onload = function(){
// ideally you pick a div and render your whole application rather than bits and pieces of it.
ReactDOM.render(<NavigationLeft />, document.getElementById('left'));
}
<html>
<head>
...yada yada
<script>
// install babel hooks in the renderer process
require('babel-register');
</script>
</head>
<body>
<script>
require('./Containers/MainApp');
</script>
<div class="wrapper" id="left">
</div>
</body>
NavigationLeft.jsx
import React from 'react';
import-your-tabs from 'wherever';
export default class NavigationLeft extends React.Component {
render() {
return (
<div class="wrapper">
<div id="viewNavigationLeft" class="sidebar" data-color="blue" ></div>
<div id="viewMainPanel" class="main-panel">
<div id="viewTabPagesTest" class="tab-content">
<TabPane1 />
<TabPane2 />
.
.
.
<TabPane7 />
</div>
</div>
)
}
}
TabPane1.jsx
'use babel';
import React from 'react';
export default class TabPane1 extends React.Component {
render(){
return(
<div className="tab-pane" id="tabPanel1">
yada yada blah blah tab content for tabPane1
</div>
)
}
}
You are repeating yourself. That's unnecessary. Trying creating props inside the tabs and use one component called TabPane. For example by using props you would not have to have so much code that does the same thing. Try something like
class TabPane extends React.Component {
render(){
return(
<div>
<div className="tab-pane">
{this.props.paneText}
</div>
</div>
)
}
}
And then when you are going to use it somewhere else the thing you have to do is simply.
import TabPane from '../Components/TabPanes/TabPane.jsx';
class TabContainer extends React.Component {
render() {
return (
<div>
<TabPane paneText='This my first tabPane' />
<TabPane paneText='Second tabPane' />
</div>
)
}
Then you you have to create an App.jsx and then put all your containers there. When you have done this you can simply write ;
ReactDOM.render(<App />, document.getElementById('viewTabPagesTest'));
It would be good to check the Hierarchies in React.