React Booklet - Getting started with JSX

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

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

React Booklet – Getting started with JSX

Writing in the front

You may need to know a little bit about JS syntax

deconstruction

Expansion operator

Arrow function

ESM

start

Use React in HTML

JSX

JSX syntax essence

JSX expression

JSX annotation

Special point

JSX list rendering

JSX event binding

The development of specification

File directory

React Booklet – Getting started with JSX

Writing in the front

You may need to know a little bit about JS syntax

deconstruction

Expansion operator

Arrow function

ESM

start

Use React in HTML

JSX

JSX syntax essence

JSX expression

JSX annotation

Special point

JSX list rendering

JSX event binding

The development of specification

File directory

Related Posts

Vue3 series –1. Getting started (compare and contrast with Vue2.0)

Deep understanding of JSX

PWA(Progressive Web App) Primer series: Install Web applications