How to create your first React page

What is Rract?

React is a JavaScript library for building user interfaces

Build the user interface. User Interface, for our front-end, is simply understood as: HTML page

javscrtipt library. It’s not a framework, it’s a library. The whole react package is a framework.

react family bucket:

react: core library react-dom: dom operation react-router: routing, redux: centralized state management

background

Rract is the best! Most used in the world

Features

Declarative <br /> Use syntax similar to HTML to define the page. In react, view changes are driven by data. When the data changes, react can efficiently update and render the DOM.

const list = [
  { id: 1, name: 'Front-end', salary: 100000 },
  { id: 2, name: 'Backend', salary: 50 }
]

const title = (
  <ul>
    {list.map((item) => (
      <li key={item.id}>
        <h3>Class {item.name}</h3>
        <p>Salary {item.salary}</p>
      </li>
    ))}
  </ul>
)

Componentization (although every framework has it)
Components are the most important content components in react. They are used to represent the combination of partial content in a page. By reusing multiple components, you can achieve complete page functionality.

Learn once, use anywhere <br /> Use react/rect-dom to develop web applications and react/react-native to develop native mobile applications (react-native)
React can be used to develop VR (virtual reality) applications

React Scaffolding

Creating a React project from scratch

First install the scaffolding toolkit globally

Command: npm i -g create-react-app

Use scaffolding tools to create projects

Command: create-react-app 項目名

After execution, we will get a folder like this

Same as Vue framework
1. The src directory is where we write code for project development
2.index.js is the entry file

There is such a command in package.json

You can enter

mpn run start
yarn start

Run the project

Next, we delete all files under src and create a new index.js
Introduce react and react-dom

// Import react and react-dom
import React from 'react'
import ReactDOM from 'react-dom'

Write our structure in the middle

// Create element const title = React.createElement('h1', {}, 'hello react (written by createElement)')

But createElement is too inefficient, we can use jsx

What is JSX

JSX: is the abbreviation of JavaScript XML.

• Writing XML structure in JS code
• Note: JSX is not a standard JS syntax, but a syntax extension of JS. The @babel/plugin-transform-react-jsx package is built into the scaffolding to parse the syntax.
• React uses it to create the UI (HTML) structure

理解：我們之前用html寫頁面，現在是用jsx來寫頁面

const title = <h1>HELLO REACT (written in jsx)</h1>

Finally, our code will be rendered in public/index.html , so we add this line of code at the bottom and render it to the page. Webpack will automatically package it in real time, embed the code into the public/index.html file, and execute it.

// Render react element ReactDOM.render(title, document.getElementById('root'))

With the above code, our pages are finally rendered in the div with id=root in public/index.html

So we wrote our first React page

This is the end of this article on how to create your first React page. For more relevant React content about creating your first page, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!