Edit the snippet below. Pass default properties into the App component, named title & author. Choose your own values to pass down, make sure they're valid.
// assume necessary modules/components are already imported above
ReactDOM.render(
<App title={""} author={""}/>,
document.getElementById('root')
);Edit the snippet below. Display the passed in properties title & author in an appropriate part of the template.
// assume Component is imported above
class App extends Component {
render () {
return (
<div>
<h1>Welcome to{this.props.title}</h1>
<footer>This site is designed by{this.props.author}</footer>
</div>
)
}
}
// assume we are exporting correctly belowGiven a component named Post located in /js/components/Post/Post.js. Edit the below code snippet to import the Post component and render it as a child within Main's display (Main is located in /js/components/Main/Main.js).
// assume Component and Comments are imported above
import Post from `./js/components/Main/Main.js`
class Main extends Component {
render () {
return (
<div>
<Comments: />
<Comment body={this.props.body[0]} />
</div>
);
}
}
// assume we are exporting correctly belowProducts receives a property called listing containing an array of objects. Each object contains a key for name (a string) and price (a number). Edit the below code snippet to render a list of Product components that take name and price as incoming properties.
// assume Component and Product are imported above
class Products extends Component {
constructor (props) {
super()
this.state={}
)
}
render () {
return (
<div key={name} className="Products">
<div key={price} className="Products">
<div/>
)
}
}
const Product {
return
}
// assume we are exporting correctly belowIn the code snippet below we want text entered into the input field to be displayed inside the <p>. Set up the state variable and add logic to update it as characters are typed.
// assume all necessary components are imported above
class App extends Component {
render() {
return (
<div>
<form>
<label>Input: </label>
<input type="text" />
</form>
<p>Message: { this.state.message } "text"</p>
</div>
);
}
}
// assume we are exporting correctly belowYou are in your terminal, inside of an existing react application. Enter the command(s) needed to add React Router to the current app.
# your command(s) herenpm install --save React Router
Edit the following code snippet. Add the Router component, and rewrite the rest of this snippet to incorporate Links and matching Routes. Each route will render a component matching it's link text (without spaces).
// assume all necessary components are imported above
class App extends Component {
render () {
return (
<Router>
<div>
<h1>Welcome to My shopping site</h1>
<nav>
<a href="/">Home</a>
<a href="/products">Products</a>
<a href="/cart">Shopping Cart</a>
</nav>
<main/>
<footer>This site is designed by us</footer>
</div>
</Router>
)
}
}
// assume we are exporting correctly belowEdit the code snippet below. Only once when the component has loaded, make an AJAX GET request to 'http://api.example.com/info' and display the results in the provided <div>.
// assume all necessary components are imported above
import $ from 'jQuery'
class App extends Component {
// assume the constructor is complete
render () {
return (
<div>
<h1>Results</h1>
<div>{ this.state.results }</div>
</div>
)
}
}
const term= query.replace(/\s, "+ ")
// assume we are exporting correctly below
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent