React basic mastery

React basic mastery

Create project

When using scaffolding to create a project, you need to install the npm package, and initialize a react project through this package

npm install create-react-app -g duplicated code

Create project

create-react-app item name Copy the code

Run the project

npm run start Copy the code

JSX syntax

  • JSX
    It can be regarded as an extended syntax of JS. It is neither a string nor an html. It contains all the functions of js. When the browser parses it, it will compile it as HTML code when it encounters ``<>`. When JSX creates the DOM, all nodes must be wrapped by a unique root element

    function App () { return ( //JSX syntax < div > </div > ) } Copy code

Writing JS inside JSX

By using **{} to wrap the JS code inside JSX , when the browser encounters {}** during rendering , it will regard it as JS code and compile it.

  • Dynamic display of data and notes

    var name = 'react' function App () { return ( < div > {/* need to be written in this form */name} </div > ) } Copy code
  • You can use template strings

    var name = 'react' function App () { return ( < div > {`Mainstream frame ${name}`} </div > ) } Copy code
  • Can call function method

    function seyHello () { return'Hello ' } function App () { return ( < div > {seyHello()} </div > ) } Copy code

PS: Calling methods, not only can call custom methods, but also call built-in methods of the system for use

  • When writing if judgments, JSX syntax does not support

    if
    Statement, if judged, you need to write a ternary expression

    var flag = false function App () { return ( < div > {flag?'Hello':'I'm not good'} </div > ) } Copy code
  • Add attributes to elements

    var name = 'item' function App () { return ( < div > < span title = "item" > </span > < span title = { name }> </span > </div > ) } Copy code

PS: When adding attributes to elements, there are generally two situations, one is to add a common class name, and the second is to assign a value to the attribute

{}
, Write the variable name inside the curly braces.

JSX event operation

  1. Event binding, **events use camel case nomenclature={event handler function name}** directly added to the element

    function App () { return ( < div > < button onClick = { handler } > Click the button </button > </div > ) } const handler = () => { //event handler } Copy code
  2. Event parameter

    • Method 1: Arrow function (recommended) [ event={ () => {event handler function name (parameter)}} ]

      • return ( < div > < button onClick = { () => {handler(parameter)} }>Click event </button > </div > ) const handler = ( receive parameters ) => { } Copy code
    • Method 2: By using bind [ event={event handler function name.bind(null,parameter)}, bind is the type of return, which is passed from the second parameter ]

      • return ( < div > < button onClick = { handler.bind ( null ,parameter)} > click the button </button > </div > ) const handler = ( parameter ) => { } Copy code
  3. Get event object

    • Method 1: No parameters are passed by default, and the default parameters of the event handler are set to

      ev

      • return ( < div > < button onClick = {handler} > </button > </div > ) const handler = ( ev ) => { console .log(ev) } Copy code
    • Method 2: Arrow function transfer parameters

      • return ( < div > < button onClick = { ( ev ) => {handler(ev)} }> </button > </div > ) const handler = ( ev ) => { console .log(ev) } Copy code

Iterate over the data

The map traverses the data. By using the map to traverse the data, the map returns a new array. When traversing data, the same as VUE, the key attribute needs to be set for the element.

const arr = [{ name : ' ' , age : 18 },{ name : ' ' , age : 18 }] function App () { const newArr = arr.map( ( item,index ) => { return ( < li key = {index} > {item} </li > ) }) return ( < ul > {newArr} </ul > ) } Copy code

Add style

  1. When processing styles, pseudo-classes and media query settings cannot be used, and the installation package needs to be downloaded for use
npm install --save-dev radium duplicated code
  1. When writing the class name, you need to pay attention to writing in the JSX syntax, you need to change the class to
    className
    , In js, class is a keyword and cannot be used.

Inline style

const styles = { width : 100 , height : 100 , backgroundColor : 'red' } const styless = { font-size: 20 , color : 'green' , backgroundColor : `rgb(0,0,1)` } return ( < div > /* method one*/ < button style = {{ wdith: ' 100px ' }}> </button > /* Method two*/ < button style = { styles }> </button > /* Method three can write multiple inline styles, use it in array form, and use ternary expressions to determine which style to use*/ < button style = {[ styles , styless ]}> </button > </div > ) Copy code
  • When using inline styles, since pseudo-classes and media queries cannot be used, a specific package needs to be downloaded for processing, and which component is used and where to import
Import Radium from 'rudium' const styles = { backgroundColor : 'green' , ":hover" : { backgroundColor : `rgb(0,0,1)` } } return () { < button style = { styles }> </button > } Export default Radium (the App) copying the code

When exporting components, you need to pass

Radium
Function wraps the component before using pseudo-class

  • If you need to use media query, you need to introduce a package inside the displayed component to wrap the component
Import {StyleRoot} from 'Radium' ReactDOM.render( < React.StrictMode > //You need to use the tag to wrap the component, so that the set media query can be used < StyleRoot > < App/> </StyleRoot > </React.StrictMode > , document .getElementById( 'root' ) ); Copy code

Outreach style

  • Global Outreach Style

    • return ( < div className = { ' box ' }> </div > ) Copy code

PS: Need to introduce styles inside public components and introduce inside index.js

Import './app.css' duplicated code
  • Single component out-of-line style

     When using the external style of a single component, when naming the style sheet, two forms are generally used. The first is the same as the component name.

A certain component.module.css

// Import style difference global style import style from'style path' return ( < div className = { style. A certain class name}> </div > ) Copy code

PS: The imported style file can be used to call the internal style in the form of an object.

Create components

Import React, Fragment {} 'REACT' duplicated code

PS: Deconstruct Fragment, its role is a placeholder, it will not be rendered on the page, if you do not want to create multiple dom elements, you can use this tag to wrap , in fact, in React, if you don t import Fragment , you can actually By replacing tags with **<></>, the effect achieved is the same**

Create functional components

In React, the constructor is the most basic component.

If you want to put the component on the page, you can use the name of the constructor as the name of the component introduce it into the page in the form of HTML tags.

Import React from 'REACT' function App () { return ( < div > </ div > ) } Export default App Copy the code
  • Where to use
    app
    Component, where it needs to be introduced and used
  • The React package needs to be introduced when creating components .
  • React to resolve all the labels in time, based on the first letter of the label to distinguish: If the first letter is lowercase tags, HTML tags will be in accordance with common resolve; if the first letter is capitalized, according to the component form to resolve

Conclusion : The first letter of the component must be capitalized.

Component passing parameters (parent to child)

  1. Parent component
const obj = { name : 'This is the data passed in the past' , data : 2021417 , arr : [ { name : ' ' , age : 18 , id : 0 }, { name : ' ' , age : 18 , id : 1 }, { name : 'Xiaohong' , age : 18 , id : 2 } ] } function App () { return ( < div > < Header { ...obj }> </Header > < About { ...obj }> </About > //single attribute transfer < Header attribute name = { 'attribute value'}> </Header > </div > ) } Copy code
  • Father and son pass by value, it is recommended to use deconstructed form to pass parameters. When requesting data, it cannot be a single or several data, so use
    {...data}
    Store data in a unified way
  1. Subcomponents receive parameters
function About ( {arr} ) { return ( < div > {arr} </div > ) } Copy code
  • The data is deconstructed in the form of objects, and in use, the name of the receiving parameter is custom, not fixed

Set default values and specify data types without passing parameters

Need to download the package to handle the default value or specify the type of data passed

npm i prop-types -D incorporated//package when using Import PropTypes from 'prop-types' duplicated code
//Set the default value without passing parameters About.defauleProps = { name : 'Hello' , age : 18 } //Specify what type of data is received About.propTypes = { //Specify the type of parameters passed, and the parameters must be passed arr : PropTypes.array.isRequired } Copy code
  • If the parameter must be passed. Need to add after the type
    isRequired

Create class components

//The component needs to be introduced and deconstructed, otherwise the setting is not a component, and the component needs to inherit methods Import React, the Component {} from 'REACT' class Heaber extends Component { //The render function must be set render () { return ( < div > Class component </div > ) } } //Export the component export default Header copy code
  • When using a component, it needs to be introduced inside the using component
Import Header from './header.js' duplicated code

Component passing parameters (parent to child)

  1. Parent component
const obj = { name : 'This is the data passed in the past' , data : 2021417 , arr : [ { name : ' ' , age : 18 , id : 0 }, { name : ' ' , age : 18 , id : 1 }, { name : 'Xiaohong' , age : 18 , id : 2 } ] } function App () { return ( < div > < Header { ...obj }> </Header > < About { ...obj }> </About > </div > ) } Copy code
  1. Subcomponents receive parameters
  • In the class component, there is a fixed property, props , and the parameters passed from outside can be received through props.
Import React, the Component {} from 'REACT' class Header extends Component { render () { //When printing, you need to print the value inside the function console .log( this .props.name); return ( < div > {this.props.name} </div > ) } } Export default Header copy the code
  • Receiving multiple data, deconstructing which value is needed
render( const {name,data} = this .props return ( < p > {name} </p > < p > {data} </p > ) ) Copy code

Display default values without passing parameters

class Header extends Component { //Use static properties to operate static defaultProps = { name : 'Xiaoming' } render () { //It needs to be destructured before it can be used normally const {name} = this .props return ( < div > {name} </div > ) } } Copy code

Pass JSX data between components

  1. Parent component passes JSX data
function App () { return ( < div > < Header > < p > Pass jsx data; Class accept </p > </Header > < About { ...obj }> < p > Pass JSX data; Function receive </p > </About > </div > ) } Copy code
  1. Subcomponent receiving

    • class
      To receive
    class Header extends Component { render () { return ( < div > {this.props.children} </div > ) } } Copy code
    • Receive inside the function
    function About ( props ) { console .log(props); return ( < div > < p > {props.name} </p > {props.children} </div > ) } Copy code

The receiving method is the same. They are all childre attributes under the same props, no matter how much JSX data is passed, it will be received and rendered