I usually learn a programming language from "Hello World!" first !" And react.
First, we need to understand the react operation methods. There are two methods,
First:Jsx syntax sugar is directly written in HTML, so that you do not need to convert jsx offline. Check the Code:
<!DOCTYPE html>This code is written in jsx. After execution, the page is displayed as follows:
The rendercomponent () function instantiates the root component, starts the framework, and injects it into an original Dom element, which is provided as the second parameter. There are two parameters. The first one is the jsx script (similar to the HTML template, which is composed of jsxtransformer. JS converts it to standard JS, and then render the browser as HTML), the second selected DOM object, insert the first parameter to the selected DOM object, rendercomponent () similar to $ (document) in jquery ). ready () is an initial loading operation, but react does not use jquery encapsulation and is fully implemented by itself. In the rendercomponent () function, the judgment logic of the parameter is made multiple times, for example, whether the parameter is an object or a function type, whether the props attribute in the first parameter is a null string or not...
You can see the implementation mechanism of the rendercomponent () function by looking at the source code,
Rendercomponent: function (nextdescriptor, iner, callback) {("production "! = "Development "? Invariant (// here, determine whether the nextdescriptor parameter is an object, and return true or false reactdescriptor. isvaliddescriptor (nextdescriptor), 'rendercomponent (): Invalid component descriptor. % s', (// check whether the nextdescriptor parameter is a function. isvalidfactory returns the reactdescriptor type. isvalidfactory (nextdescriptor )? 'Instead of passing a component class, make sure to instantiate' + 'it first by calling it with props. ': // check if it quacks like a descriptor // determine whether the props attribute in the nextdescriptor attribute is a Null String typeof nextdescriptor. props! = "Undefined "? 'This may be caused by unintentionally loading two independent '+ 'Copies of react. ': ''): invariant (reactdescriptor. isvaliddescriptor (nextdescriptor); var prevcomponent = instancesbyreactrootid [getreactrootid (container)]; If (prevcomponent) {var prevdescriptor = prevcomponent. _ descriptor; If (shouldupdatereactcomponent (prevdescriptor, nextdescriptor) {return reactmount. _ updaterootcomp Onent (prevcomponent, nextdescriptor, container, callback);} else {reactmount. unmountcomponentatnode (container) ;}} var reactrootelement = getreactrootelementincontainer (container); var containerhasreactmarkup = reactrootelement & reactmount. isrenderedbyreact (reactrootelement); var shouldreusemarkup = containerhasreactmarkup &&! Prevcomponent; var Component = reactmount. _ rendernewrootcomponent (nextdescriptor, iner, shouldreusemarkup); callback & callback. Call (component); return component ;}Many encapsulated functions are called for processing. The rendercomponent () function is the first entry to react.
Next, create a component to write "Hello, world !"
<!DOCTYPE html> <link rel="stylesheet" type="text/css" href="css/index.css"/>In this Code, I used the createclass () function to create custom components. In fact, the so-called component creation is an official statement, and the DOM element is finally created, however, the dynamic generation mechanism here is more flexible. As for the component content, you can also share the content of the advanced components after they are created.
Note: Here is a detail. When the DOM element is returned in the render, set the CSS style to use classname. If you want to add the style attribute directly, invalid and DOM elements are not displayed on the page!
The following figure shows the page:
The first programming method is described above. Next, we want to extract the JS files from the page and reference them. This requires the following method;
Second:The jsx offline conversion method has been described in detail on the react official website,
First install the command line tool (NPM required ):
npm install -g react-toolsIf your NPM connection fails, set the NPM Proxy:
Set PROXY command: NPM config set proxy = http: // 127.0.0.1: 8087
NPM config set registry = http://registry.npmjs.org
In cmd, perform the following operations to build the locally created JS
jsx --watch src/ build/SRC is a directory. You can define the directory by yourself. After the operation, you can reference Js for operations.
React has a lot to study and continue to be passionate about...
Getting started with react
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
