join us!
160cdb922ada70 " , to provide front-end developers with technical information and a series of basic articles. For a better user experience, please move to our official website novices (160cdb922ada74 https://xhs-rookies.com/ ) to learn and get the latest articles in time.
"Code tailor" , if you are interested in our article or want to make some suggestions, follow "Novices of Xiaohe Mountain" public account, contact us, you can also watch it on WeChat Our article. Every suggestion or approval is a great encouragement to us!
Preface
In this section, we will teach you how to import React and lead you to write a simple React page.
This article will introduce you to the following:
Reactintroduction method- Implement
Hello React Demo
React introduction method
React development must rely on three libraries, namely:
react: Contains the core code ofreactreact-dom: the core code toreactbabel: AJSXconvertReactto 060cdb922adbd1 code
React can be introduced in the following ways:
- Use
CDNimport, directly usescriptlabel to import remoteReactcore code base - Download
Reactcore code base, use local import - Use scaffolding tools and package management tools for project construction
React was designed to be adopted gradually from the beginning, and you can selectively use React according to your needs. For beginners, we do not recommend that you directly use React scaffolding to create projects, so in the first few chapters of this tutorial, we will use the CDN introduced by 060cdb922adc74 to reduce your doubts about complex operations. First learn the React and JSX syntax.
Implement Hello React Demo
Demo function introduction: There is a button and a text box in the interface. When you click the button for the first time, the text box will change from hello React to hello xhs-rookies .
Step 1: Create a container and put HTML
<div id="app"></div>Step 2: Import React dependencies
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>Step 3: Write the components that need to be implemented
This step will use the JSX syntax and component writing that you need to learn later. For the time being, you don't need to understand the meaning of these codes, we will take you to learn them soon.
<script type="text/babel">
class App extends React.Component {
constructor() {
super();
this.state = {
message: 'hello React'
}
}
render() {
return (
<div>
<p>{this.state.message}</p>
<button onClick={() => this.setState({message: 'hello xhs-rookies'})}>点我一下</button>
</div>
)
}
}
</script>The script tag here must define type as " text/babel ", so that babel will parse the JSX code we wrote.
Step 4: Mount the written component to the container
ReactDOM.render(<App />, document.getElementById('app'))In summary, your code will become like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component {
constructor() {
super()
this.state = {
message: 'hello React',
}
}
render() {
return (
<div>
<p>{this.state.message}</p>
<button onClick={() => this.setState({ message: 'hello xhs-rookies' })}>
点我一下
</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
</script>
</body>
</html>Next let's take a look at the effect:
This is the page before clicking
This is the page after clicking
Congratulations you have completed a simple React demo .
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。