Component layout mini-case

Combined with the previous content (interested in iron iron look forward to the home page), make a small case of interface layout, the final results of the case are as follows:

Basic layout

The CSS style has been written in advance, and placed in the root path, called style.css, and the code is as follows:

html, body { height: 100%; }

body { margin: 0; padding: 0; }

.header, .footer {
  width: 100%; height: 80px; position: absolute; left: 0;
  line-height: 80px; text-align: center; font-size: 18px;
  color: #fff;
}

.header { background-color: skyblue; top: 0; }

.footer { background-color: purple; bottom: 0; }

.main {
  width: 100%; position: absolute; top: 80px; bottom: 80px;
  padding: 20px 0; text-align: center; background: khaki;
}
Copy the code

SRC \Components\ header. js, SRC \Components\ home.js, SRC \Components\ footer.js;

Import the above three child components and style files in \ SRC \ app.js:

import React, { Component } from 'react'

import Header from './Components/Header'
import Home from './Components/Home'
import Footer from './Components/Footer'

import './style.css'

export class App extends Component {
  render() {
    return (
      <>
        <Header></Header>
        <Home></Home>
        <Footer></Footer>
      </>
    )
  }
}

export default App
Copy the code

Then in the child component, write the initial code, because there is already the corresponding style code, so use the child component directly:

// src\Components\Header.js import React from 'react' function Header() { return ( <> <div className={'header'}> Header </div> </> ) } export default Header // ================================================= // src\Components\Home.js import React from 'react' function Home() { return ( <> <div className={'main'}> Home </div> </> ) } export default Home  // ================================================= // src\Components\Footer.js import React from 'react' function Footer() { return ( <> <div className={'footer'}> Footer </div> </> ) } export default FooterCopy the code

After the basic code is implemented, we can see the corresponding effect, but according to normal coding logic, the header and footer should be the common part, and whatever the middle part shows, the head and tail should be shown.

Integrating common components

So we need to use Header and Footer as public Components. We need to add a SRC \Components\ layout. js component that displays the Header and Footer. Also, leave the main content blank in the middle. Whatever JSX we pass in, the DOM will be displayed in main.

In layout. js, we need to apply the Header and Footer components to JSX, and then use JSX to pass the parameters to display the main content. Then get {props. Children} where the body is displayed:

import React from 'react'
import Header from './Header'
import Footer from './Footer'

function Layout(props) {
 return (
   <>
     <Header />
     <div className="main">
       {props.children}
     </div>
     <Footer />
   </>
 )
}

export default Layout
Copy the code

After the public component is completed, we want to display the content of the main component. We introduce Layout into that component, and then pass the main content in the way of JSX. Finally, we introduce the main component into the App for display, the specific code is as follows:

// Home.js 
import React from 'react'
import Layout from './Layout'

function Home() {
 return (
   <Layout>
     <div>Home</div>
   </Layout>
 )
}

export default Home

// ====================================
// List.js 
import React from 'react'
import Layout from './Layout'

function List() {
 return (
   <Layout>
     <div className="main">
       list
     </div>
   </Layout>
 )
}

export default List

// ====================================
// App.js 
import React, { Component } from 'react'
import Home from './Components/Home'
import List from './Components/List'

import './style.css'

export class App extends Component {
 render() {
   return (
     <>
       <Home />
       <List />
     </>
   )
 }
}

export default App
Copy the code

In general, the implementation takes advantage of the JSX feature that passes to components.

conclusion

Finally, to sum up, we learned a lot about JSX from touching components to passing between components. We also realized that JSX is JS, and Props is a key part of the data passing between components. However, you may not know that Props has a very important feature: read-only. This means that you can only use the Props data that we got in the component.

The official manual reads:

A component must never modify its props, either using a function declaration or through a class declaration.

…

React is very flexible, but it comes with a strict rule: All React components must protect their props from being changed like pure functions.

Here is a reference to the concept of a pure function in functional programming. Let me briefly explain what a pure function is: “A function does not modify its input parameter in the function body, and the same input parameter always returns the same result after multiple calls.”

In fact, the React team wanted components to be pure functions themselves, so Props had to be read-only and could not be modified in components.

The problem is that the content displayed in React interface needs to be changed according to the data. One of the core concepts of React design is data-driven UI. When you see this, you will feel that React is contradicting itself. On the other hand, DOM changes are driven by data changes.

Is it really so? The state allows the React component to dynamically change its output based on user actions, network responses, or other changes, without violating the above rules.

Next write component state, go to work.