Original link: reactjs.org/docs/add-re…
A simple introduction
React is a framework designed to be accepted by the public over time, so you can use React as needed in your projects, even if you know how to add bits and pieces of interaction.
Most web projects are not single-page applications, so you can use React to extend your project with a few lines of code or make components that can be used dynamically.
Namely, add the box
This section shows how to use the React component in an existing HTML page. You can try it out in your Web page or create a new HTML file.
1. Add a DOM container to the HTML
First, open the HTML page you want to edit and add an empty
<body> <! <div id="button_container"></div> <! -- Existing HTML--> </body>Copy the codeThe
Tip: You can place DOM containers anywhere within the tag. You can also put multiple DOM containers on a page, but these containers usually need to be empty because React will replace the contents of the container when rendering.
2. Add script labels
Next, add the following three script tags to the bottom of the tag
<! The first two scripts are used to load resources needed by react. - note: When you need to deploy a project, you need to switch from a development environment to a production environment, Will "development. Js" can be replaced with "production. Min. Js" -- -- > < 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 ="button.js"></script>Copy the code3. Create the React component
Create a file named button.js in your HTML file directory. Copy the following code
'use strict'; const e = React.createElement; class ReactButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'React Button'; } return e('button', {onClick: () => this.setState({liked: true})}, 'I'); } } const domContainer = document.querySelector('#button_container'); ReactDOM.render(e(ReactButton), domContainer);Copy the codeThese two lines of code will find the DOM container we added in step 1 and display the ReactButton component we’ve already written.
const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(ReactButton), domContainer);
Copy the codeTip: It doesn’t matter if you don’t understand the code, we’ll explain the concept of each part of the code in a later chapter. For now, just show it on the page.
4. Done
You’ve already added your first React component to your project. Run your project and see.
Tip: Deployment notice JS code in the development environment seriously slows down page running speed and brings bad user experience. Therefore, before deploying the project, you need to replace the react resource file you added with the following resources
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
Copy the codeUse the JSX
1. Simply use JSX
In the example above, we used JavaScript code to tell React to display the components we had written.
const e = React.createElement; Return e('button', {onClick: () => this.setState({liked: true})}, 'I');Copy the codeReact, of course, provides another alternative to JavaScript code, which is JSX. The above code can be replaced with JSX, as shown below
Return (<button onClick={() => this.setState({liked: true})}> </button>);Copy the codeThe above two examples are equivalent, and you are free to use either JavaScript code or JSX to write your code.
If you use JSX, you need to introduce babel.js to convert JSX into JavaScript code that the browser can recognize to compile properly. Here’s how to use JSX in an existing web page.
Using JSX in a web page is as simple as importing the following resource files
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Copy the codeNext you just use JSX in script tags containing type=”text/ Babel “.
<! DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <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> <! -- Don't use this in production: -- > < script SRC = "https://unpkg.com/[email protected]/babel.min.js" > < / script > < / head > < body > < div id = "root" > < / div > <script type="text/babel"> ReactDOM.render( <h1>Hello, world! </h1>, document.getElementById('root') ); </script> </body> </html>Copy the codeThen you just need to introduce the written JS file into the HTML
<! <script SRC ="button.js"></script>Copy the codeThis is a great way to learn React and write simple demos. Note, however, that using Babel can slow down browser compilation, so it is not recommended to deploy web pages containing Babel as a production release.
In the next section, we’ll show you how to install the JSX preprocessor to automatically compile your JSX code.
2. Use JSX in your project
Using JSX in a project does not require complex tools such as packers or developer tools. In fact, adding a JSX preprocessor is as simple as adding a CSS preprocessor. The only requirement is to have Node.js installed on your computer.
Now open the terminal in your project directory and type the following command:
1. npm init -y
2. npm install babel-cli@6 babel-preset-react-app@3
Copy the codeTip: we only use NPM to install the JSX preprocessor, you will never need it again. The React code and your project code don’t need to change, just stay the same.
3. Run the JSX preprocessor
Create a SRC folder and put your js files in it. Run the following command on the terminal
npx babel --watch src --out-dir . --presets react-app/prod
Copy the codeAs you can see, in the SRC folder your code has been processed automatically and a new button.js file has been created. Compare the two and you can see that the new JS file is written in Javascript code.
That’s all you need to do to use React in an existing project.