The problem
- What stages did the React code go through to convert HTML code when we wrote the project?
- What tools were used during these phases and what did you learn?
The evolution of code
We want to implement a login and exit function, we can be developed in HTML+JavaScript, this is the most primitive method, the code is as follows:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
</head>
<body>
<div id="root">
<h2 class='head'></h2>
<button class='btn' onClick="changeText()"></button>
</div>
</body>
<script>
let isLogin = false;
let root = document.getElementById("root");
let h2 = document.getElementsByClassName("head") [0];
let button = document.getElementsByClassName("btn") [0];
function changeText() {
isLogin = ! isLogin;
render();
}
function render() {
h2.innerHTML = isLogin ? Welcome nagin : 'Please log in first';
button.innerHTML = isLogin ? 'exit' : 'login';
}
render();
</script>
</html>
Copy the codeIn the above code, we display a different UI on the interface based on the status of the login. This approach must be front-end developers can be handy.
So how do you code with the Pure React framework? To develop a Web application using the React framework, you need to import two packages: React. Js and React -dom.js.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
<script>
let isLogin = false;
function changeText() {
isLogin = ! isLogin;
render();
}
function render() {
let root = document.getElementById("root");
let h2 = React.createElement('h2'.null, isLogin ?Welcome nagin:'Please log in first');
let button = React.createElement('button', {onClick:changeText}, isLogin ? 'exit' : 'login');
let e = React.createElement('div'.null, h2, button);
ReactDOM.render(e, root);
}
render();
</script>
</html>
Copy the codeReact creates the element using the React. CreateElement method, and then inserts the element into the specified HTML tag with the id root using reactdom.render. The React approach is less elegant and more complex than the original HTML +JavaScript approach, and the createElement method is too cumbersome to write. Happily, in real development, we don’t do this either; we code in JSX.
To implement the above code using JSX, set script type to type=”text/ Babel “, indicating that the code needs to be converted using Babel. You also need to introduce the babel.js package.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<script src="./babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
<script type="text/babel">
let root = document.getElementById("root");
let isLogin = false;
function render() {
ReactDOM.render(
<div>
<h2>{isLogin ? 'Welcome nagin ':' Please login first '}</h2>
<button onClick={changeText}>{isLogin ? 'Exit' : 'login '}</button>
</div>.
root
)
}
function changeText() {
isLogin = ! isLogin;
render();
}
render();
</script>
</html>
Copy the codeWith the above two code edits, we use JSX syntax instead of using DOM methods or React methods to manipulate the DOM for UI writing. Instead, we use HTML tags directly. This further lowers the barrier to development and allows developers to focus more on business logic.
About Babel
Babel is a toolchain for converting ECMAScript 2015+ version code into backwardly compatible JavaScript syntax so it can run in current and older versions of browsers or other environments. At the same time, Babel can convert JSX syntax. For more information: https://www.babeljs.cn/. You can use the “try it out” function on the official website to see the conversion results.
Answer the questions
The JSX code we wrote is converted to React code via Babel, and React code is converted to HTML code via ReactDOM and inserted into the document flow.
The main tool used is the Babel framework, which simplifies and focuses complex React development by adding a layer of Babel transformations. The biggest trigger is that adding layers where it doesn’t make sense can have unexpected benefits.