Entry-level installation and the most superficial explanation of react

The Spring Festival is near, the office half empty, half a piece of floating.

Think of the holiday, the code on the screen has become a jumping bug.

Unable to concentrate.

Finally forced himself to read half a document, wrote a few Tuo program.

This time the record is about react, the most obvious content.

———— I am the line of the wistfully ————

Step 1:NPM Init

Follow the wizard to fill in each field, and finally generate the package.json file.

Error-prone:The value of name does not have the same name as the package .

For example we need to use NPM to install several packages: Browserify react reactify ...

The name value if you write "browserify" or "react", this dependency will fail to install!

Tips are as follows:

NPM WARN install refusing to install react as a dependency of itself

A dependent installation failure in OS X will block other dependent installations,

Ubuntu will only fail the current package installation and will not block other packages.

In short, the name is not the same as the package name and other keywords.

Step 2:npm install--save-dev blah blah blah

Once the Package.json file is complete, you are ready to install the required dependencies:

sudo npm install--save-dev browserify react reactify react-dom Uglify-js

The installation here does not use the global (-g) installation. Only in the current directory.

There are spaces between multiple dependencies.

After successful installation, you need to manually configure the scripts attribute in the Package.json file:

(assuming that the main file in the Package.json file is Index.js)

"Build": "Browserify--debug index.js > Mybundle.js",

"Build-dist": "Node_env=production browserify index.js | Uglifyjs-m > MyBundle.min.js ",

Browserify is a JS file packaging tools, online a lot of introduction, this does not repeat.

Any JavaScript file that contains a require statement runs Browserify will automatically package all dependencies.

But it only supports. js files. Very specificity.

This step is not over yet, and in Package.json you add a property:

"Browserify": {
"Transform": [
"Reactify"
]
}

Well, this step is done.

Step 3:NPM Run Build

This command creates a packaged file, Mybundle.js.

Then you can refer to it in the Index.html page.

Next, every change to Index.js will be run once, the page will be updated.

Add a half sentence,

Webpack can also complete the browserify task,

And it not only supports. js files, very powerful. Don't explain it.

Step 4: Now you can write react code in Index.js.

First require:

var React = require ("React");

var reactdom = require (' react-dom ');

The first contact with the react code is not suitable for people accustomed to jquery.

But it's easy to accept if you've written angularjs.

Not only think of the pain of writing Angularjs two years ago, a cold sweat!

Fortunately after the cultivation, and then the novel JS write up also no longer in cold sweat.

Retelling is helpful to self-understanding, the following is a popular explanation of the principle, can be ignored:

jquery's interception of events is bound to the DOM element,

Every time an event occurs, it acts on the DOM.

And react listens to events through "state", whenever the event occurs, the state changes,

The current state is then rendered to the page in the Render property.

As a result, react will create a UI component,

The event listener, State modification, and DOM structure are all integrated into one component,

This structure is easier to maintain for large Web applications that require multiple components.

Step 5:react.createclass ({...}) Creating UI Components

One of the self-contained properties Getinitialstate to initialize each "state":

Note that this function runs only once per time the component is created.

Getinitialstate:function () {

return {

Text: "",

Closed:false

}

}

Then we can customize our own listener functions , such as:

myhandlechange: Function (event) {

This. setState ({

Text:event.target.value,

Closed:true

})

}

Each time the Myhandlechange function is executed, the state is updated in the SetState.

Here is the value of the rewritten text and closed.

How to trigger the Myhandlechange function is not a react problem,

For example, it is written in the INPUT element's onchange attribute and can be triggered when entered.

Step 6: Finally render the UI component to the page

Reactdom.render (<tweetbox/>, document.body);

The two parameters received by the render function, one is the component variable name with the angle bracket,

The other is the container, this is document.body.

But it seems that the authorities do not recommend using the body as a container directly

It is best to create a container element under the body.

The singular return in Step 7:render function

This is to be presented separately, because I personally look at it is not pleasing to the eye.

The return returned in the render function is an HTML structure,

But it is different from the JS native syntax, and does not follow the HTML syntax,

It is said that this goods is called jsx or something, Whatever.

In short, here are 4 points to note:

The contents of the A:return are enclosed in parentheses.

B: This HTML structure must be contained within one outermost element, and not two of the outermost elements in parallel.

C: The class in the structure should be written as "ClassName"

D: Do not quote quotes when referencing variables within a component, for example Onchange={this.myhandlechange}

———— I'm a naked dividing line ————

The above is the most obvious content.

But it's enough to support me in writing a small program.

Ready for the holiday.

Entry-level installation and the most superficial explanation of react