The premise is that you have installed react scaffolding, if you don’t know how to look here, then create it~
Table of contents
Question 1: How to create a simple hello component?
Question 3: How to add styles?
Question 1: How to create a simple hello component?
1. Define a hello.js
// 引入react库，创建“外壳”组件app
import React, { Component } from "react";
// 定义hello组件并暴露
export default class Hello extends Component {
render() {
return <h3>hello,这是我的 第一个react组件！</h3>
}
}2. Introduce in app.js
look at the effect
Question 2, what to do if there are too many components, it looks disorganized directly under src. How to deal with it?
Answer: Create a components folder and put the react components under this folder.
At the same time, the imported path also needs to be modified.
Question 3: How to add styles?
Create a new css file
Then import it in hello.js. Note that the suffix name cannot be omitted when introducing css. Only js or jsx files can omit the suffix
Therefore, hello.css should be introduced like this , the above is a wrong introduction
Question 4: When there are more and more components, the js and css of all components are mixed together, which looks very messy. How to deal with it?
Answer: You can create the subfolder Hello again in components, and put the js and css related to the hello component. The file name is best capitalized, which means it is a component , which is much more convenient. We can create multiple folders to manage multiple components
Question 5: The js file of the component in react and the pure function js file both end with js, how to distinguish?
Method (1): Naming, capitalize the first letter of the component js file, representing the component js
Method (2): suffix name, you can directly change the suffix name of the js file of the component to jsx, of course, both the js and jsx suffixes can be omitted when importing
Question 6: We can see that it is troublesome to introduce components in the app.js file, and there are many duplicate names. How to deal with it?
It's very simple, change the name, and uniformly change the component name under the folder to index
At this time, the index can be omitted when introducing it, which is much more concise.
Question 7: When two components contain the same class name and are introduced in app.js at the same time, a style conflict will occur. How to solve it?
First we create another Test component
Like the hello component, add a class named title and define it as yellow
Introduced in app.js
Save and look at the effect, we see that the background colors of the two components have become the same, and the style of the class name introduced later is preferred
How to solve? This involves the problem of style conflicts .
Method (1): You can directly name the css name of the hello component as index.module.css
Then the method will change when it is introduced, and you need to pay attention when using it
It's normal after refresh
Method (2): Use less to define a general class name for each component, and then nest and write styles. Of course, the second method is often used in actual development, and the first method is relatively cumbersome.
.hello {
.title {
background: red;
}
}Question 8: When we write a component, we need to manually introduce the react library every time, and then use the class class to define the component, which is quite troublesome. How to solve it?
Answer: Install a vsocde plugin and search in vscode
After installation, click on rcc (react class component means the class component in react) and the class component template will appear
After the carriage return, modify the component name
Knock rfc (react function component means functional component in react)
