React-jsx, html, css basic knowledge point, react-jsxcss

React-jsx, html, css basic knowledge point, react-jsxcss

Watch video address: https://www.imooc.com/video/9819

Environment setup:

Method: Usecreacte-react-appQuick Building
create-react-appIt is from Facebook. With this command, you can quickly build a React development environment without configuration.

Run$ cnpm install -g create-react-app, Install

Run$ create-react-app my-appBuild your own project

$ cd my-app/
$ npm start
Open the browserhttp://localhost:3000, As shown below:

.
.
.
.
.
.
.
.

Knowledge Point sorting JSX

To use reactreact.js, You also need to introduceJSXTransformer.js.
Because react uses the JSX syntaxJSXTransformer.jsParse it into js syntax to be understood and executed by the browser.
X in JSX refers to XML, and JSX is the syntax pond of JS. Syntax pond refers to a syntax added to a computer language.Language functions are not affectedBut it is more convenient for programmers. Similar to TypeScript.
In addition, the JSX syntax cannot be directly written in the script tag.
The type attribute of the previously used script tag must be changed:

  <script type="text/javascript"></script>

Changed:

    <script type="text/jsx"></script>

JSX is used to declare elements in React.
The biggest convenience brought by JSX syntax is that the DOM-like structure can be directly written in JS, instead of generating strings like the original sound and then replacing them to render elements.

.
.
Example:
HTML:

 <div id="root">    <!-- This element's contents will be replaced with your component. --></div> 

JS:

Function Welcome (props) {return 

Output:

React uses the. render () method to render elements. The first parameter is the element to be rendered, and the second parameter is the inserted target element.
The Page Structure in the preceding example:

You can see that div # root contains the content rendered by react.
.
.
.
.

Component declaration:

The simplest way to declare a component is to useJavaScriptFunction:

Function Welcome (props) {return 

It receives aprops"Object and a React element is returned.

You can also useES6 classTo define a component:

Class Welcome extends React. Component {render () {return 

The two methods are the same in react output.
.
.
Note that: The component name must start with an uppercase letter.
As in the previous example,<div />Indicates a DOM tag,<Welcome />Indicates a component, and you must define or introduce it when using this component.

The React element can be a DOM tag or a custom component. When a custom component is used, the JSX attribute is used as a single object"props. For example, in the first example{props.text}.
.
Components can also be nested with each other. Other components can be referenced in the output of a component:

 function Text(props) {  return 

However, note that,Only one root element can be returned from the component., That is, the root element of the same level cannot appear, as follows:

  function App() {  return (      <Text name="first" />      <Text name="the one" />  );}

Yes. Therefore, you must use<div>To package all<Text />Element.
.
.

JSX-Style

If you want to change the style, you first need to add a class name, which is generally written as follows:
CSS:

  .font-red{        color:red;  }

JS:

  function Text(props) {  return 

The following warning is displayed:

.
This is because in the ES6 standard of JSclassIt has become a keyword and cannot be written directly in js.class="font-red"To writeclassName="font-red".

Alternatively, you can directly write inline styles, and the format also changes. If you write inline styles directly in HTML mode:

  function Text(props) {  return 

An error is reported:

Error Description: The Style in the react row is not represented in the form of a string, and must be represented in a style object. The key value of the style object is the camper mark of the style name, the value is the value of the style, so the correct syntax should be:

  function Text(props) {  return 

The output will be normal:

The preceding double brackets may not be intuitive. You can also write them as follows:

function Text(props) {  var styleObj = {    color:'red'，    fontSize:'35px'  };  return 

We can see that the first bracket of the outer layer is the Javascript expression, and the second bracket is the object parenthesis.

The name of the camper is written in the same way as in the original source JS, such:

  document.getElementById('root').style.fontSize = '35px';

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.