React Note 02 - Components of React

A web page can be split into small portions, each portion can be called a component , i.e. a component part of a web page . Component may also have a plurality of components.

App.js is a component on one of the (inherited class React.Component class).

A component configured:

React from Import 'REACT'; 
class {React.Component the App the extends 
        the render () { 
           return ( 
              <div> the Hello World </ div> 
            ); 
        }         
} 
Export default the App; 
// =========== =========================== 
// actual project downward using this simplified wording 
Import React, {from} the Component 'REACT'; 
class the extends the Component {the App 
　　　　　　the render () { 
           return ( 
              <div> the Hello World </ div> // tag is also used as JSX syntax here, still need to be introduced React module! 
            ); 
        }         
} 
Export default the App; 
// syntax split appreciated ⬇️ ⬇️⬇️  
// Import {from} the Component 'REACT';
// Import from React 'REACT';
//const { Component } = React
//const Component = React.Component

Need to introduce components constitute js file:

import React from 'react'; // JSX responsible for parsing grammar 
Import ReactDOM from 'REACT-dom'; 

Import App from '/.App';// introducing components 
// JSX syntax required React module supports, if not introduced React module You are given 
ReactDOM.render (<App />,document.getElementById('root '))　　 ;

render () function

To render the content on the page.

Page rendering process: First, there is an index.html file, introduced import documents index.js, after performing introduced App.js component (component is inherited by a class that implements the React.Component), component content is the render functions return the contents, with this component after, index.js will () function to the component mount index.html with id div root, the page has successfully rendered by ReactDOM.render.

Creating multiple components

Create your own components in the src directory: component name .js , modeled App.js to write. In index.js introduced into the assembly by import, () function is mounted to the page through ReactDOM.render, wherein ReactDOM.render () function can only render a single label, and therefore a plurality of packages to make the tag label div It can be.

React Note 02 - Components of React

Guess you like