1.react example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<-! React core library ->
<script src="lib/react.development.js"></script>
<! - responsible for implementing the resolve to render your application layer, depending on your react.development.js ->
<script src="./lib/react-dom.development.js"></script>
</head>
<body>
<div id="myApp">
</div>
</body>
<script>
// The first parameter is the content you want to appear, and the second parameter is specified position presented
ReactDOM.render ( "Hello World", document.querySelector ( "# myApp"))
</script>
</html>
2.JSX grammar
ReactDOM.render ( "<h2> Hello World </ h2>", document.querySelector ( "# myApp"));
Variable elements:
const dom = <h5> I element is a variable </ h5> // variable value is referred to as element variable elements
ReactDOM.render(dom,document.querySelector("#myApp"))
The introduction of external js
<! - need to add type is introduced ->
<script type="text/babel" src="./lib/react-jsx.js"></script>
<script type="text/babel">
// The first parameter is the content you want to appear, and the second parameter is specified position presented
ReactDOM.render(dom,document.querySelector("#myApp"))
</script>
3.className
<style>
.one{
color:yellow;
}
.two{
color:red;
}
</style>
<script type="text/babel">
let a = "one";
let b = "two";
ReactDOM.render((
<div className={b}>
I'm sure you're the bird horse wolf in wool
</div>
),document.querySelector("#myApp"))
// ReactDOM.render((
// <div className="one">
// I'm sure you're the bird horse wolf in wool
// </div>
// ),document.querySelector("#myApp"))
</script>
When the specified attribute value (attribute value is a variable, than external double quotes in {})
let a = "one"
let b = "two";
ReactDOM.render((
<div className={b}>
I'm sure you're the bird horse wolf in wool
</div>
),document.querySelector("#myApp"))
4. style.html
<script type="text/babel">
let obj = {
background:"yellow",
color:"red"
}
ReactDOM.render((
<div>
<P style = {{color: "blue"}}> you well, I know </ p>
<P style = {{color: "red"}}> you come or not come, I have been here, you go or not go, I do not wait for you </ p>
<P style = {obj}> you come or not come, I have been here, you go or not go, I do not wait for you </ p>
</div>
),document.querySelector("#myApp"))
</script>
</script>
5. Render list
<script type="text/babel">
// jsx your array will direct expansion
let a = [1,2,3,4,5,6]
ReactDOM.render(<div>{a}</div>,document.querySelector("#myApp"))
</script>
6.// only with a root element.
// encountered lowercase tags are regarded as normal label, if capitalized tag encountered will be treated as components. If you are experiencing {}, it will be considered to be output, or to parse an expression.
ReactDOM.render(<Div>adsfasdf</Div>,document.querySelector("#myApp"))
// no
// let arr = [1,2,3,4];
// ReactDOM.render({arr},document.querySelector("#myApp"))
// yes:
// let arr = [1,2,3,4];
// ReactDOM.render(arr,document.querySelector("#myApp"))
// yes:
ReactDOM.render("123123123",document.querySelector("#myApp"))
//yes:
ReactDOM.render(<div>asdfasdf</div>,document.querySelector("#myApp"))
//no:
// ReactDOM.render(
<H1> Hello, world </ h1> <div> asdfasdf </ div>, document.querySelector ( "# myApp"))