Prediction: Use the CLI tool, node, and YARN

    1. Introduce React and ReactDOM
    1. Use the JSX
    1. Use conditional judgments and loops

1. Introduce React and ReactDOM

Use create-react-app to build react applications.

Yarn global add create-react-app create-react-app my-app CD my-app yarn start // Open http://localhost:3000/Copy the code

Use VScode to open my my-app,

We can print the code in SRC /index.js

console.log(React)
console.log(ReactDOM)
Copy the code

In this article, we only need to use the React.createElement() to create the React element. Reactdom.render () to render the React element to the page.

import React from 'react'
import ReactDOM from 'react-dom'

const element = React.createElement('div'.null.'hello,world');
ReactDOM.render(element, document.querySelector("#root")); // Take a look at the page
Copy the code

2. Use the JSX

const element = <div>hello,world,</div>	
// This is not a string or HTML. It is! JSX! JSX can generate React elements
React.createelement () creates the React element. They're equal to each other

// The React website says that JSX is not recommended for use above. JSX is the syntactic sugar for React. CreateElement.
// React.createElement is still needed for generation
Copy the code
  • Using “embedded expressions” in JSX
const name = 'your name'
const element = <div>hello,{name}</div>		// All valid JavaScript expressions can be placed inside {}
Copy the code
  • Specific properties in JSX
const name = "your name"
const element = <div className="greeting">hello</div> 
//JSX's syntax is similar to JavaScript's, so it uses small camel names
Copy the code
  • Child elements in JSX
Const element = (<div> <div> </div> </div>Copy the code

3. Use conditional judgments and loops in React elements

conditionalfunction Hi(){
	return <div> Hi </div>
}	// Hi is the React component

function Hello(){
	return <div> Hello </div>
}	// Hello is the React component

function Greeting(props){
	return props.greeting === 'hi'? <Hi /> : <Hello />
}	// Greeting is the React component
ReactDOM.render(<Greeting greeting="hi" />.document.querySelector("#root"));

// The page will display Hi
// Note: User-defined components begin in uppercase, and conditions are judged using JavaScript if or conditional operators.
// Try using the conditional operator
Copy the code
cycle// We know to use render to render JSX. How do you loop through multiple JSX's? Use the map
function Component(props){
	return props.numbers.map((number) = ><li>{number}</li>)
}
ReactDOM.render(
	<ul>
    <Component numbers={} [1, 2, 3, 4, 5] />
    </ul>.document.querySelector("#root"));// The page will render a ul. Open the console and you will see an error message. We didn't add the key
// The key exists mainly because the neighboring sibling node has changed. How do I add a key?
<li key={number.toString()}> {number} </li>Can beCopy the code

See you next time. – Smile