Component: Parts of a component page

React components can be created in two ways:

  • Functional: Make simple components
  • Class approach: Make complex components

1. Functional component production:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < / head > < body > < div id =" app "> < / div > <! - to quickly create elements -- -- > < script SRC = "https://cdn.staticfile.org/react/16.4.0/umd/react.development.js" > < / script > <! - quick render element on the page - > < script SRC = "https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js" > < / script > <! - the Babel compiler -- > < script SRC = "https://unpkg.com/@babel/standalone/babel.min.js" > < / script > < script type = "text/Babel" > / / Component making // Component naming: similar to VUE, must be big camel name // Reason: Function HelloWorld(){return <h2>hello world</h2>} HelloWorld() // <HelloWorld/>: JSX syntax, more HTML style, easy to accept, // reactdom.render (HelloWorld(),app); Reactdom.render (<HelloWorld/>,app); Let more=(<div><HelloWorld/> <HelloWorld/> </div>); </script> </body> </ HTML >Copy the code

Functional parameter passing:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < / head > < body > < div id =" app "> < / div > <! - to quickly create elements -- -- > < script SRC = "https://cdn.staticfile.org/react/16.4.0/umd/react.development.js" > < / script > <! - quick render element on the page - > < script SRC = "https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js" > < / script > <! - the Babel compiler -- > < script SRC = "https://unpkg.com/@babel/standalone/babel.min.js" > < / script > < script type = "text/Babel" > Function Hello(props){return <h2> Hello,{props. Name}, age {props Reactdom. render(Hello({name:' dongdong ',age:'10'}),app) // JSX (<Hello name=' dongdong '/>,app) let item=(<div> "Hello name = 'things' age =' 10 '/ > < Hello name =' east 'age =' 12 '/ > < Hello name =' east 'age =' 10 '/ > < / div >). ReactDOM.render(item,app) </script> </body> </html>Copy the code

2. Class-based components: Components suitable for complex functions

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < / head > < body > < div id =" app "> < / div > <! - to quickly create elements -- -- > < script SRC = "https://cdn.staticfile.org/react/16.4.0/umd/react.development.js" > < / script > <! - quick render element on the page - > < script SRC = "https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js" > < / script > <! - the Babel compiler -- > < script SRC = "https://unpkg.com/@babel/standalone/babel.min.js" > < / script > < script type = "text/Babel" > / / Object-oriented writing: Class HelloWorld extends React.Component{render() {return <div>HelloWorld</div>}} ReactDOM.render(new HelloWorld().render(),app); Reactdom.render (<HelloWorld/>,app) </script> </body> </ HTML >Copy the code

Class component parameters

<! -- Class component parameters --> <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < / head > < body > < div id =" app "> < / div > <! - to quickly create elements -- -- > < script SRC = "https://cdn.staticfile.org/react/16.4.0/umd/react.development.js" > < / script > <! - quick render element on the page - > < script SRC = "https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js" > < / script > <! - the Babel compiler -- > < script SRC = "https://unpkg.com/@babel/standalone/babel.min.js" > < / script > < script type = "text/Babel" > Class Hello extends react.component_props (props) {class Hello extends react.component_props (props) {class Hello extends react.component_props (props) {class Hello extends react.component_props (props) {class Hello extends react.component_props (props) {class Hello extends react.component_props (props) { Super (props) // This. Props =props // Console.log (props); Return <div>Hello,{this.props. Name},{this.props. Age}</div>}} reactdom.render (new) {// this Hello ({name: "east", the age: "10"}). The render (), app) / / abbreviations: Reactdom. render(<Hello name=" east "/>,app) let item=(<div> <Hello name=" east "age="10"/> <Hello name=" east" age="10"/> <Hello name=" east 3 east "age="10"/> </div>); ReactDOM.render(item,app) </script> </body> </html>Copy the code