Writing in the front
This is a series of notes made by bloggers reading the following documents while learning React. If there are any mistakes, please point them out in the comments section 🤩🤩
The React website
The React. Js little book
React Tutorials
Redux Chinese documents
Mobx Chinese documents
REACT ROUTER Chinese document
REACT ROUTER
Next.js
Expect updates as follows
-
React Booklet – Get Started JSX ✅ ✅
-
React Book – Set sail
-
React booklet – Hooks
-
React Booklet – CSS solutions
-
React Booklet – Life Cycle
-
React Booklet – State Management Redux
-
React Booklet – State management Redux middleware
-
React Booklet – State Management Mobx
-
React booklet – Router
-
React Booklet – SSR
-
React Booklet – React Ecology
All of the code in this series is available in the 👉 repository –>
You may need to know a little bit about JS syntax
deconstruction
const target = {
name: 'nanshu'.desc: {
height: 181.age: 18,}};// Deconstruct the first layer
const { name } = target;
// Deconstruct the second layer
const {
desc: { age },
} = target;
Copy the code
Expansion operator
The expansion operator allows us to quickly shallow copy an iterable object
For example, if we want to add a property to an object or overwrite a property and we don’t want to change the original object we can use this
Of course, this is not the only scenario where the expansion operator can be used 📝
const obj = { nickname: 'nanshu' };
constnewObj = { ... obj,age: 18 };
Copy the code
Arrow function
Arrow function expressions have a more concise syntax than function expressions and do not have their own this 🥳
When we need to return an object, we can use () to wrap the object and omit the return
const setUsername = (username: string) = > ({
type: 'SET_USER_NAME',
username,
});
Copy the code
ESM
describe | grammar | instructions |
---|---|---|
Module export | export xxx | |
The default is derived | export default xxx | A module can only have one default export |
To export | export * from xxx | The unified management module is often exported as an aggregation entry |
Rename export | export {xxx as xxx} from xxx | |
The default import | import xxx from xxx | A module can only have one default import |
Deconstruction import | import {xxx} from xxx | |
Rename import | import {xxx as xxx} from xxx |
start
Use React in HTML
To use React in HTML we need to introduce the following script
-
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
-
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
- Mount the component to the root node for rendering
-
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
- Convert JSX syntax to React. CreateElement
Note: Add type=”text/ Babel “to any script you use with JSX syntax otherwise it will not take effect
For example, you can see Hello React on the page with the following code
<body>
<div id="root"></div>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const App = () = > <h1>Hello React</h1>;
ReactDOM.render(<App />.document.getElementById('root'));
</script>
</body>
Copy the code
JSX
JSX syntax essence
JSX is a syntax extension of JS that cannot be executed directly by the browser. It needs to be compiled with Babel before it can be executed properly in the browser
JSX is used to describe the user interface in React and is eventually compiled by Babel as React. CreateElement (type,attrs,children)
-
Type: indicates the type of a node. It can be a standard HTML tag string like “h1” or “div”, or it can be a React component type or React Fragment type.
-
Config: passed in as an object, in which all the component’s properties are stored as key-value pairs.
-
Children: Passed in as an object that records the contents nested between component tags, known as “child nodes” and “child elements.”
So JSX is essentially just a syntactic sugar that eventually gets converted to React. CreateElement
We can see what JSX is finally compiled into on the Babel website
<div class="header">
<div
class="title"
onClick={()= > {
console.log('hello');
}}
>
Title
</div>
</div>;
// After the Babel conversion
('use strict');
/*#__PURE__*/
React.createElement(
'div',
{
class: 'header',},/*#__PURE__*/ React.createElement(
'div',
{
class: 'title'.onClick: () = > {
console.log('hello'); }},'Title'));Copy the code
There is no complicated logic involving algorithms or real DOM in createElement, and almost every step of it is formatting data
This is the virtual DOM we’ve all heard about, which solves a lot of performance problems with DOM manipulation
But today’s browser performance is so complete that you can ignore this aspect of consumption and virtual DOM seems to me to be more of an ambition to unify the big front end
Because the virtual DOM contains the information that describes the UI and if there were a set of rules to translate that information into the languages supported by each platform React would be able to block out the differences between each platform and develop across segments
In the early days of React, the React and React-DOM packages were used together until React15
And that’s when RN was born and you can see how react-DOM works
ReactDOM.render(
// Element to render (ReactElement)
element,
// The target container to which the element is mounted (a real DOM)
container,
// An optional callback function can be used to handle the logic after rendering
[callback]
);
Copy the code
JSX expression
JSX allows us to use our JS expressions in {}
Inside we can use variables to operate on operators call methods and so on
<div>{new Date().toDateString()}</div>
Copy the code
JSX annotation
JSX has special annotation methods
{
/* This is a header */
}
<div className="header""> < div style =" box-sizing: border-box;Copy the code
Special point
-
Because JSX is a syntax extension of JS but we can write things like HTML inside of it so we don’t want to have any conflicts
-
In HTML, a class represents a class in JS. In JSX, we use className instead
-
In HTML, the “for” of a label represents a loop in JS. In JSX, htmlFor is used instead
-
-
undefined / boolean / null
-
JSX does not render to the page for the above data types
-
With this feature we can implement conditional rendering
-
let flag = true
<div>{flag && "Welcome back ~~~"}</div>
Copy the code
JSX list rendering
This section mainly uses the higher-order map function of arrays
const _games = ['sword and shield'.'Zelda'.'Made by Mario'.'Romance, flowers, snow and moon'];
const gamesUI = _games.map((item, index) = > {
// 🙅♂️ Avoid using index as a unique key. Generally, data returned by the back end has a unique key value
return <div key={index}>{item}</div>;
});
Copy the code
JSX event binding
For example, bind a click event to the following DOM node
const handleClick = () = > {
console.log('click... ');
};
<button onClick={handleClick}>Click</button>;
Copy the code
If you’re in a class component you might want to consider binding this
Use the bind | | arrow function 😛😛😛
The development of specification
File directory
content | The path | instructions |
---|---|---|
Stores static resources, such as images | src/assets | You can create a new folder under Assets based on the module |
Business page | src/containers | The actual page corresponds to the requirement |
The business component | src/components | Business common components, some of which can be packaged for later extensibility, and generality |
Page path | src/routes | Page path |
Business Common Style | src/styles | Global common style that can be referenced elsewhere |
Utility public function | src/utils | For example, network request, public function, etc |
Redux state | src/store | Divide files by module |
Business encapsulated hook function | src/hooks | Similar to the components idea, some components can be considered for later withdrawal if they are used in more than one place in the business |
Server interface | src/api | Stores all server interfaces |
The mock data | src/mock | Store some mock data |