react based tutorial

• Recommended Learning Resources: https: //blog.csdn.net/qq_42813491/article/details/90213353

Official website

• https://react.docschina.org/
  

• Official Tutorial: https: //react.docschina.org/tutorial/tutorial.html

• What is presented is not to say, from the beginning of the code

installation

• Prior to this, make sure you have installed node.js.
• Enter cmd node -vdisplays the version number indicates a successful installation
• node official website: https: //nodejs.org/en/
  
• Quick Start

npx create-react-app my-app
cd my-app
npm start

• Note that the installation is outside the network installation, we recommend the use of a mirror, or will be very slow

• Details can be found: https: //blog.csdn.net/qq_42813491/article/details/90311075

• More than three command finishes, the following interface represents a successful installation of scaffolding
  

• This is the main interface, running on port 3000
  

Directory Structure

• It is common, little introduction

hello world

• src some useless can be deleted, as follows: It looks more friendly for the novice

• index.js entrance and down the file server configuration files do not move, css what can be deleted
• APP.js

import React from 'react'

class App extends React.Component{

  render(){
    return <h1>hello world</h1>
  }

}

export default App;

• It can be so

import React, {Component}from 'react'

class App extends Component{

  render(){
    return <h1>hello world</h1>
  }

}

export default App;

• Renderings
  

• important point

• render html + js mixed inside is written jsx syntax, HTML tags unquoted

• The outermost wrap must have a root tag, ideally with a parenthesis

• Single-label must be closed
  

Componentization

Although render the template function inside you can write directly, but usually do not put everything into them. Is not conducive to the maintenance, not beautiful, it is a common component of natural development.

• Modify the directory structure, src folder under the new components, various components used to put
  注意，规范中组件名大写，且以js或jsx为后缀名,就像.vue 文件一样

• Your editor might be finished this
  

• Color is strange grammar recognition problem, the compiler environment into jsx just fine

• After exposing to remember component definitions, the interface with the APP introduced import, use and mount

• Renderings
  

• Define and use data, the data similar vue

• Direct written warning will render inside, it should be written in the constructor inside
  

Introducing pictures and style sheets

• Pictures are divided into local and remote resources, resource load remote images directly address can be introduced into the src
• Remember to add alt attribute, otherwise there will be a warning

 <img alt="logo"src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75"/>

• Loading local images and style sheets loaded is local way of introduction path

*import logo from './logo.png'
<img alt="logo" src={logo}/>

• {}The syntax is react in the environment jsx
• import style from './style.css'