Create react app is a global command line tool used to create a new project. React scripts are the development dependencies required for a generated project.
In order to use React in the browser, two class libraries need to be referenced: React and React dom. The React library is used to create views, and the React DOM library is used to render the UI in the browser. The usage is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- Following introduction react.js, react-dom.js(react 0.14 Later general react-dom from react Core separation, more in line with react Positioning of cross platform abstraction) and babel-core browser edition -->
<!-- react Use the latest version CDN Mode introduction -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- This way id="example" of <div> by React Component Where to insert -->
<div id="example"></div>
<!-- The following is the package babel(Through language translation) React JSX Grammar, babel Will turn it into a browser JavaScript -->
<script type="text/babel"> ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
); </script>
</body>
</html>
There are two points to note in the above code. First, the type attribute of the last < script > tag is text/babel. This is because React's unique JSX syntax is incompatible with JavaScript. type="text/babel" should be added wherever JSX is used.
Secondly, the above code uses three libraries: react.js, react-dom.js and babel.js.
-
react-min.js: the core library of react
-
react-dom.min.js: provides DOM related functions
-
babel.min.js: we can convert ES6 code to ES5 code, so that we can execute React code on browsers that currently do not support ES6. Babel has built-in support for JSX. By using Babel and Babel sublime package together, the syntax rendering of the source code can be raised to a new level.
react CDN refers to the latest version (directly in the https://cdnjs.com Search:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
Html is just a set of simple instructions that a browser executes when constructing a document object model (DOM). When the browser loads HTML and renders the user interface, the elements that make up the HTML document are DOM elements.
Above, we briefly introduced the CDN based development method to give you a basic impression of React, but there are many shortcomings in the CDN based development method. So the next Webpack will be the main development tool for our next example.
Webpack is a module bundler. The following are the main functions of webpack:
-
Package CSS, images, and other resources
-
Preprocessing (Less, CoffeeScript, JSX, ES6, etc.) files before packaging
-
Split. js into multiple. js files depending on the entry file
-
Loader s with rich integration can be used (Webpack itself can only handle JavaScript modules, and other files such as CSS and Image need to be loaded into different loaders for processing)
[](
)2. ReactDOM.render()
ReactDOM.render is the most basic method of React. It is used to convert the template into HTML language and insert the specified DOM node.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Summary tips: in ReactDOM.render(), only one div, h1 or p HTML tag can be used, and a comma should be added at the end of these tags. If you want to write multiple div, h1 or p tags, you can write only one div tag on the periphery, and then nest it, as shown in the following example code:
ReactDOM.render(
<div>
<div></div>
<h1></h1>
<p></p>
</div>,
document.getElementById('example')
);
[](
)3. JSX syntax
HTML language is written directly in JavaScript language without any quotation marks. This is the syntax of JSX, which allows the mixing of HTML and JavaScript. JSX is the core component of react. It uses XML tags to directly declare the interface. Interface components can be nested with each other. React uses JSX instead of regular JavaScript. JSX is a JavaScript syntax extension that looks much like XML. Basic syntax rules of JSX: when HTML tags (starting with < are encountered), they are parsed with HTML rules; When a code block (starting with {) is encountered, it is parsed with JavaScript rules.
JSX allows you to insert JavaScript variables directly into the template. If the variable is an array, all members of the array will be expanded:
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
The operation results are as follows: