Document the entire process.

First, initialize a project. If no scaffolding is installed install first

create-react-app my-app
Copy the code

Then you can go into that folder and start to see if you can run.

npm start/yarn start
Copy the code

A successful page at http://localhost:3000 pops up with a rotating React icon.

Take a look at the structure of the project, mainly in the SRC directory, and remove anything you don’t need.

After the cleanup is complete, you get a React project that you initialize yourself. The project structure is as follows:

The demo is pretty simple. Control the color and animation display of a row of ICONS through buttons:

The ICONS are from IonIcons, version 4.2, and each icon is a separate component. Control the size, color, and animation of ICONS through some properties.

Demo introduces four components, which are presented as an unordered list in iconlist.js under Compoments.

Start by placing four components in an array:

Let list = [] list.push(< icon 1 component name />,< Icon 2 component name />...Copy the code

Then display it on the page

return(
<div>
	...
	<div className="list-box">
		<ul className="list">
			{list.map((_, i) => (
				<li key={i}>{list[i]}</li>
			))}
		</ul>
	</div>
</div>
)
Copy the code

I tried to change the color of the icon in this way

list[1].color='red'
Copy the code

An error in the

TypeError: Cannot add property color, object is not extensible
Copy the code

Print list[1] and see what it is

The color attribute is under props

list[1].props.color='red'
Copy the code

Or an error

TypeError: Cannot assign to read only property 'color' of object '#<Object>'
Copy the code

The properties under props should be read-only and cannot be modified using the methods described above. However, you can modify this property by changing the value of the icon component passed in.

See the IonIcons website for an example:

So when I initialize the list, I add

Const [color,setColor] = useState('#000000') list.push(< color={color}/>, < color}/>...Copy the code

And then you can go through

SetColor (' a hexadecimal color value ')Copy the code

To change the color of the icon.

In the same way, add the remaining three animation effects to be implemented.

[isRotate,setIsRotate] = useState(false),
[isShake,setIsShake] = useState(false),
[isBeat,setIsBeat] = useState(false) 
Copy the code

It takes some action to trigger these changes, so I have a list of five buttons at the top of the icon list and bind click events.

<button onClick={changeColor}>changeColor</button>
<button onClick={(){changeState('rotate')}}>rotate</button>
<button onClick={()=>{changeState('shake')}}>shake</button>
<button onClick={()=>{changeState('beat')}}>beat</button>
<button onClick={()=>{changeState('stop')}}>stop</button>
Copy the code

The changeColor function assigns a new hexadecimal color string to color, and the changeState function changes the Boolean value of the animation variable based on the variable passed in. That is, when isRotate, isShake are false and isBeat is true, the Beat animation will be performed.

Don’t forget to bind these properties when you initialize the array

Rotate ={isRotate} shake={isShake} beat={isBeat}/> Rotate ={isRotate} shake={isShake} beat={isBeat}/>...Copy the code

Here’s the end result: