Home > Developer > Web Develop
No more nonsense, just on the code.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<script src= "Javascripts/react.js" ></script>
<script src= "Javascripts/react-dom.js" ></script>
<script src= "Javascripts/browser.min.js" ></script>
<body>
<div id= "Example" ></div>
<script type= "Text/babel" >
var Allwidnow=react.createclass ({
Render:function () {
Return<div>
<bcomponent name= "username"/>
<inputcomponent tips= "Place input username"/>
<br/>
<bcomponent name= "Passwrold"/>
<inputcomponent tips= "Place input Passwrold"/>
<br/>
<buttoncomponent bname= "Signin"/>
<buttoncomponent bname= "Signup"/>
</div>
}
})
var bcomponent = React.createclass ({
Render:function () {
Return <b>{this.props.name}</b>
}
})
var inputcomponent = React.createclass ({
Render:function () {
return <input type= "text" placeholder={this.props.tips}/>
}
})
var buttoncomponent = React.createclass ({
Render:function () {
Return <button>{this.props.bname}</button>
}
})
Reactdom.render (
<div>
<Allwidnow/>
</div>,
document.getElementById (' example ')
)
</script>
</body>
Yesterday to do this little demo, in one breath did 6 plug-ins, feel like vomiting blood! Today, the optimization of a bit, immediately feel more clean! Seems to feel a kind of, write Less,do more!
Today we use the This.props name to do optimization, this is what is a ghost, let us carefully analyze the following!
Props:
One of the most common patterns in React is to make a layer of abstraction of the component. Components expose a simple property (Props) to implement functionality, but internal details can have very complex implementations.
Each component in react contains a property (props), which is passed from the parent component to the child component, and within the component, we can get the Property object by This.props
Two ways to use the props attribute:
1. Specify attributes directly in the component using the Key/value form (case as above)
2. Use the extended attribute to specify properties for the component (the following case)
<div id= "Example" ></div>
<script type= "Text/babel" >
var helloreact = React.createclass ({
Render:function () {
Return <div>hello {this.props.name1} {this.props.name2}</div>
}
});
var props = {
Name1: ' Jhon ',
Name2: ' Tom '
};
Reactdom.render (
document.getElementById (' example ')
)
</script>
The next day on time Punch, self-taught little rookie, I hope you great God more advice
React.js the next day, optimize the last component of the first day
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
