Vue basic exercises will, there is a need to learn React?

This is the 12th day of my participation in the More text Challenge. For details, see more text Challenge

preface

Public number to NPY front – end esoteric

Add vx👉16639199716, pull you into the group Ow ~❤️

This column will comb through a Vue Coder’s experience and knowledge of React 👍👍👍

If you are the same as me, with the same technical pursuit and dream of joining a big factory, then choosing the front-end secrets for NPY will be a good choice for you, and I am also willing to make progress and learn together with you. Without further ado, let’s get started 👇

The foreword the React

I’m glad you’re here to learn the React.js technology. This is the first section of this column, which looks at some of the most common questions people ask.

Introduction of the React

First of all, it cannot be denied that React.js is the world’s most popular front-end framework (the front-end framework launched by Facebook). Most of the first-tier and second-tier Internet companies in China are using React for development, such as Ali, Meituan, Baidu, Qunar, netease, Zhihu and other first-tier Internet companies regard React as the main front-end technology stack. The React community is also very strong, and the popularity of React has spawned more useful frameworks such as ReactNative and React VR. React has been promoted since 2013, and now version 18.X. x has been released, with great improvement in performance and ease of use.

React advantages Summary

• The ecology is strong: No framework is better than the React ecosystem right now, with mature solutions for almost all development needs.

• Easy to use: You can even use the React technology in a few hours, but its knowledge is so extensive that you may need more time to fully master it.

• Strong community: You can easily find like-minded people to study with because there are so many people using it.

React versus Vue

These are the two most popular frameworks in the front end. Although React is the most used framework in the world, the number of users of Vue is likely to surpass React in China. Both frameworks are very good, so they are on par in terms of technology and sophistication.

For that person, when given a project, how do I choose that? Compared with vue. js, React is more flexible and collaborative, so when I deal with complex projects or core projects of the company, React is my first choice. With rich apis, vue. js is easier and faster to implement. Therefore, when the team is small and the communication is close, I will choose Vue because it is faster and easier to use. (It should be noted that Vue is also fully qualified for large projects, which depends on his mastery of the framework. The above is just a personal summary based on my knowledge.)

What will we learn?

We will learn all the basic concepts of React, which is divided into three parts:

• Write components: JSX syntax, Component, Props
• Component interactions: including State and lifecycle
• Component rendering: including list and Key, conditional rendering
• Related to DOM & HTML: event handling, forms.

The premise condition

We assume you are familiar with HTML and JavaScript, but even if you are a transfer from another programming language, you will be able to follow this tutorial. We also assume that you are familiar with some programming language concepts, such as functions, objects, arrays, or even better, classes.

Environment to prepare

Prepare the Node development environment. Visit the Node official website to download and install the Node development environment. Open the terminal and run the following command to check whether the Node is successfully installed:

Node - v # v10.16.0

NPM - v # 6.9.0

Pay attention to

Windows users need to open the CMD tool, Mac and Linux is the terminal.

If no error is reported in the preceding command, the Node environment is successfully installed. Next, we will use the React scaffolding — Create React App (CRA) — to initialize the project, and this is officially recommended as the best way to initialize a React project.

Enter the following command in the terminal:

npx create-react-app my-todolist

Wait for the command to complete, then enter the following command to start the project:

cd my-todolist && npm start

CRA automatically opens the project and opens the browser

🎉🎉🎉 Congratulations! Successfully created your first React app!

There’s a lot of extraneous stuff in the CRA initializing project right now, and we need to do a little cleaning up to get started. First, press CTRL + C in the terminal to close the development environment that you just ran, and then enter the following commands in the terminal:

Go to the SRC directory

cd src

If you’re on a Mac or Linux:

rm -f *

Or, you’re using Windows:

del *

Next, create the JS file that we will learn to use

If you’re on a Mac or Linux:

touch index.js

Or, you’re using Windows

type nul > index.js

Finally, cut back to the project directory folder

cd .. At this point, if we run NPM start in the terminal project directory, we will get an error because our index.js has no content yet. We will use CTRL + C to close the development server in the terminal, then use the editor to open the project, and add the following code to the index.js file we just created:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    return <div>Hello, World</div>;
  }
}

ReactDOM.render(<App />.document.getElementById("root"));
Copy the code

We see that the code inside index.js is divided into three parts.

The first is a series of guides. We imported the React package and named it React, and we imported the React-dom package and named it ReactDOM. Files that contain the React component (which we’ll cover later) must import React at the beginning of the file.

Then we defined a React component, called App, inherited from React.Com component, and we’ll talk about the contents of that component later.

Then we use ReactDOM’s Render method to render the App component we just defined. The render method takes two parameters, the first parameter is our React root component, and the second parameter takes a DOM node. This means that we will mount the React application under this DOM node and render it into the browser.

Pay attention to

Of the three parts of the code above, parts 1 and 3 will not be changed throughout the tutorial, and both are required when writing any React app. All subsequent code changes are part 2 code changes, or insert or delete code between part 1 and Part 3.

JSX grammar

First, let’s take a look at one of React’s proudest features — JSX. It allows us to write user interfaces using XML syntax in JS code, allowing us to take full advantage of the powerful features of JS to manipulate user interfaces.

The contents of a React component’s render method return are the contents that the component will render. For example, our current code:

render() {
    return <div>Hello, World</div>;
}
Copy the code

is a piece of JSX code, which will be translated by Babel into the following JS code:

React.createElement(
  'div'.null.'Hello, World'
)
Copy the code

React. CreateElement () takes three arguments:

• The first parameter represents the JSX element label.
• The second argument represents the attribute that this JSX element receives, which is an object, and here it is null because our div does not receive any attributes.
• The third parameter represents the contents wrapped by the JSX element.

React. CreateElement () does some checking on the arguments to make sure you’re not writing buggy code. It ends up creating an object like this:

{
  type: 'div'.props: {
    children: 'Hello, World'}};Copy the code

These objects are called React Elements. You can think of them as describing what you want to see on the screen. React will receive these objects, use them to build the DOM, and update them.

The App component eventually returns this JSX code, so we use ReactDOM’s render method to render the App component and end up with the “Hello, World” content on the screen.

JSX is used as a variable

Since JSX will eventually be compiled into a JS object, we can use it as a JS object, which has the same status as a JS object. For example, we can assign it to a variable. We can modify the render method in the above code as follows:

render() {
  const element = <div>Hello, World</div>;
  return element;
}
Copy the code

Saving the code, we found that the content rendered in the browser was similar to what we had before.

Use variables in JSX

We can use braces {} to dynamically insert variable values in JSX. For example, we can modify the render method as follows:

render() {
  const content = "World";
  const element = <div>Hello, {content}</div>;
  return element;
}
Copy the code

JSX is used in JSX

We can also include JSX in JSX, so that we can write any level of HTML structure:

render() {
    const element = <li>Hello, World</li>
    return (
      <div>
        <ul>
          {element}
        </ul>
      </div>)}Copy the code

We can add attributes to element tags just like we do in HTML, but we need to follow a camel’s hump naming rule. For example, the attribute data-index on HTML is written as dataIndex on JSX nodes.

const element = <div dataIndex="0">Hello, World</div>;
Copy the code

Pay attention to

In JSX, all properties should be named in a camel’s hump. For example, onclick should be changed to onclick. The only special thing is class, because class is reserved in JS, we should change class to className.

const element = <div className="app">Hello, World</div>;
Copy the code

In actual combat

Open SRC /index.js in the editor and make the following changes to the App component:

class App extends React.Component {
  render() {
    const todoList = ["Front-end cheats for NPY."."fyj"."Every day a fan."."Look up to big Hairy."];
    return (
      <ul>
        <li>Hello, {todoList[0]}</li>
        <li>Hello, {todoList[1]}</li>
        <li>Hello, {todoList[2]}</li>
        <li>Hello, {todoList[3]}</li>
      </ul>); }}Copy the code

As you can see, we define a todoList array constant using const, and we insert four elements of the array using dynamic interpolation in JSX using {}.

prompt

You don’t need to close the development server you just started with NPM Start, the browser will automatically refresh after you change the code!

You may have noticed that we manually get the four values of the array and then insert them into JSX one by one using {} syntax for final rendering. This is rather primitive. We’ll simplify this in the list and Key sections later.

In this section, we learned about JSX concepts and put the knowledge into practice. We also introduced the concept of components, but we did not go into detail about them; we will cover them in more detail in the next section.

conclusion

In the first column, I learned the basic knowledge of React with you. There will be more exciting stories in the follow-up. Let’s cheer together

❤️ Thank you all

If you think this content is very helpful to you: like support, let more people can also see this content (collection does not like, is playing rogue – -) follow the public number to NPY front secret, we learn together progress. If you like it, you can also read other articles (thanks to friends for their encouragement and support 🌹🌹🌹)

Start the LeetCode tour

Double pointer to LeetCode

Leet27, remove element

Classic sorting algorithms that front-end engineers must learn

LeetCode20, bracket match

LeetCode7, integer inversion