<>create-react-app Scaffolding

Create React App It's a use Node.js Write command line tools , It can help us quickly generate React.js project , And built in
Babel,Webpack And other tools to help us achieve ES6+ analysis , Modular analytic packaging , That is, through it , We can use it modularization as well as ES6+
And so on . It's also built-in ESLint Grammar checking tool ,Jest Unit testing tools . There's another one based on Node.js Of WebServer
Help us better preview the application locally , There's more .

<> Installation and use

adopt npm,yarn,npx Fine , Because the methods are similar , So let's just show you npm How to install and use

<> Installation instructions
npm i -g create-react-app
<> Use instructions

After the installation is complete , We can use it create-react-app Command to create a project
create-react-app ' entry name '
<> Project directory structure description

After running the command , A directory with the name of the project will be created under the directory where the command is running
my-app/ README.md node_modules/ package.json public/ index.html favicon.ico
src/ App.css App.js App.test.js index.css index.js logo.svg
When we write code, our main focus should be on src In this folder , However, the files inside are a template of the system , We can delete it all and rewrite it ourselves

<> assembly

We want to complete the loop data rendering page , Scaffolding alone is not enough , We need the most important thing , It's components

<> What are components ?

Components , That is to say, it is encapsulated and has independent function UI parts .React It is recommended to rethink in the way of components UI constitute , take UI Each module with relatively independent function is defined as a component , Then small components are combined or nested to form large components , Finally complete the whole project UI The construction of .

<> Functional component and class component

* Functional component
* The name of the function is the name of the component
* The return value of the function is the content to be rendered by the component
* Class component
* Component class must inherit React.Component
* Component class must have render method
<> Class component

Here we mainly through the class component to complete the actual case to give you a demonstration

<>1. Create a index.js And the root component is introduced app.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from
'./app'; ReactDOM.render( <App />, document.getElementById('root') );
<>2. Create a app.js As the root component and introduce a custom component

In fact, we can write directly here , But the code will be bloated , It's not concise enough , Not in line with React The meaning of component existence , So we're introducing a component here
import React,{Component} from "react"; import FriendList from './FriendList';
class App extends Component{ render(){ return (<div> <FriendList /> </div>) }; }
export default App;
<>3. Write template frame in custom component , Bring in your data and styles , And a new component is introduced
import React,{Component} from "react"; import './FriendList.css'; import data
from './data'; import Dl from './dl' export default class FriendList extends
Component { render(){ return ( <div className="friend-list"> { Object.keys(data)
.map((item,index)=>{ return <Dl key={index} value={data[item]}/> }) } </div> ) }
focal point :

* Object.keys—— Because of the data we have here data, It's an object , however map Methods are array methods , So we're going to use it Object.keys
This method gets an array
Method returns an array of the enumerable properties of a given object , The property names in the array are arranged in the same order as those returned by normal loop traversal of the object
* react Try not to index the list when rendering (index) Set to key value

React It is set on the component key Property to generate a unique identity for the component , only key Changed ,React Components will be updated , Otherwise, reuse the component . If you want to update the component content , Please make sure every time key It's all different .
* The parent passes parameters to the child , Write the data you want to transfer directly in the component , For example, the code above , We pass specific data to the children
When receiving, it only needs to be used at the child level props That's it
<>4. What's in the last template
import React,{Component} from "react"; export default class Dl extends
Component{ render() { let {title,list} = this.props.value return ( <dl className
="friend-group"> <dt>{title}</dt> { list.map((item,index)=>{ return <dd key={
index}>{item.name}</dd> }) } </dl> ) } }
focal point :

* props Receives the parameters passed from the parent

When we received it , To be props Write in render() Method internal , It's because I've accepted many , So we use construct assignment to store data , When there is only one data , It can be used directly this.props.value
<> Browser feedback

©2019-2020 Toolsou All rights reserved,
html Writing about cherry trees , Writing about cherry trees It's unexpected Python Cherry tree (turtle The gorgeous style of Library ) Browser kernel ( understand )HashMap Explain in detail java Four functional interfaces ( a key , simple )os Simple use of module Some East 14 Pay change 16 salary , Sincerity or routine ?