Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the necessary JavaScript foundations before you learn React". In daily operation, I believe many people have doubts about the necessary JavaScript foundation before you learn React. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the necessary JavaScript foundations before you learn React?" Next, please follow the editor to study!

Exploration of creating React Application

A common way to start learning about React is to run the create-react-app package, which sets up everything you need to run React. When this process is complete, open src / app.js and show us the only React class in the entire application:

Import React, {Component} from 'react'; import logo from'. / logo.svg'; import'. / App.css'; class App extends Component {render () {return (

Edit src/App.js and save to reload.

Learn React);}} export default App

If you have never learned ES6 before, you may think that this class statement is a feature of React. This is actually a new feature of ES6, which is why learning ES6 correctly can give you a better understanding of React code. We'll start with the class of ES6.

Classes of ES6

ES6 introduces class syntax, which is similar to OO (object oriented) languages such as Java or Python. The basic classes in ES6 are as follows:

Class Developer {constructor (name) {this.name = name;} hello () {return 'Hello World! I am' + this.name + 'and I am a web developer';}}

The class syntax is followed by an identifier (or a name) that can be used to create a new object. The constructor method is always called during object initialization. Any parameters passed to this object are passed to the new object. For example:

Var nathan = new Developer ('Nathan'); nathan.hello (); / / Hello World! I am Nathan and I am a web developer

Class can define any method it needs, in which case we define a hello method that returns a string.

Class inheritance

A class can extend the definition of another class, and new objects initialized from this class will have all the methods of both classes.

Class ReactDeveloper extends Developer {installReact () {return 'installing React. Done.';}} var nathan = new ReactDeveloper (' Nathan'); nathan.hello (); / / Hello World! I am Nathan and I am a web developer nathan.installReact (); / / installing React. Done.

A class that inherits another class, often called the child class or sub class, while the class being extended is called the parent class or the super class. The subclass can also override the method defined in the parent class, which means that it will replace the definition of the parent method with the new method it defines. For example, let's override the hello function:

Class ReactDeveloper extends Developer {installReact () {return 'installing React. Done.';} hello () {return' Hello World! I am'+ this.name + 'and I am a REACT developer';}} var nathan = new ReactDeveloper (' Nathan'); nathan.hello (); / / Hello World! I am Nathan and I am a REACT developer

In this way, we rewrite the hello method in the Developer class.

Use in React

Now that we understand the classes and inheritance of ES6, we can understand the React classes defined in src / app.js. This is a React component, but it is really just a normal ES6 class that inherits the definition of the React Component class imported from the React package.

Import React, {Component} from 'react'; class App extends Component {/ / class content render () {return (Hello React!)}}

This allows us to use the render () method, JSX, this.state, and other methods. All of these definitions are in the Component class. But as we'll see later, class is not the only way to define React Component. If you don't need state and other lifecycle methods, you can use functions.

Declare variables using let and const in ES6

Because the var keyword of JavaScript is a global variable, two new variable declarations have been introduced in ES6 to solve this problem, namely let and const. They are all used to declare variables. The difference is that const cannot change its value after it is declared, while let can. Both declarations are local, which means that if let is declared within the scope of a function, it cannot be called outside the function.

Const name = "David"; let age = 28; var occupation = "Software Engineer"

Which one should I use?

As a rule of thumb, variables are declared using const by default. When you write your application later, when you realize that the value of const needs to be changed, that's when you should ReFactor const to let. Hopefully it will get you used to the new keywords and you will begin to realize that you need to use const or let patterns in your application.

When do we use it in React?

When we need variables:

Import React, {Component} from 'react'; class App extends Component {/ / class content render () {const greeting =' Welcome to React'; return ({greeting})}}

Greeting does not change throughout the life cycle of the application, so we use const here

Arrowhead function

The arrow function is a new feature of ES6 and is almost widely used in modern code bases because it makes the code simple and easy to read. It allows us to write functions in shorter syntax.

/ / regular function const testFunction = function () {/ / content.. } / / arrow function const testFunction = () = > {/ / content.. }

If you are an experienced JS developer, switching from regular function syntax to arrow syntax may make you uncomfortable. When I learned the arrow function, I used these two simple steps to rewrite my function:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Remove the function keyword

Add = > after ()

Parentheses are still used to pass parameters, and if there is only one parameter, you can omit them.

Const testFunction = (firstName, lastName) = > {return firstName+''+ lastName;} const singleParam = firstName = > {return firstName;}

Hidden return

If the arrow function has only one line, you can return the value without using the return keyword and curly braces.

Const testFunction = () = > 'hello there.'; testFunction ()

Use in React

Const HelloWorld = (props) = > {return {props.hello};}

Class components equivalent to ES6

Class HelloWorld extends Component {render () {return ({props.hello};);}}

Using the arrowhead feature in React applications makes the code more concise. But it also removes the use of state from the component. This type of component is called stateless functional component. You will see this name in many React tutorials.

Parse the assignment of arrays and objects

One of the most useful new grammars introduced in ES6, deconstructing assignments is simply copying parts of an object or array and putting them into named variables. A simple example:

Const developer = {firstName: 'Nathan', lastName:' Sebhastian', developer: true, age: 25,} / / destructure developer object const {firstName, lastName} = developer; console.log (firstName); / / returns' Nathan' console.log (lastName); / / returns' Sebhastian' console.log (developer); / / returns the object

As you can see, we assign firstName and lastName in the developer object to the new variables firstName and lastName. Now, what if you want to put firstName in a new variable called name?

Const {firstName:name} = developer; console.log (name); / / returns' Nathan'

Deconstruction also applies to arrays, using indexes instead of object keys:

Const numbers = [1 one, two] = numbers; / / one = 1, two = 2

You can skip some subscripts during deconstruction by passing in:

Const [one, two, four] = numbers; / / one = 1, two = 2, four = 4

Use in React

The most common is to deconstruct state in a method:

ReactFunction = () = > {const {name, email} = this.state;}

Or in stateless function components, combined with the examples mentioned earlier:

Const HelloWorld = (props) = > {return {props.hello};}

We can deconstruct the parameters immediately and simply:

Const HelloWorld = ({hello}) = > {return {hello};}

Map and filter

Although this article focuses on ES6, you need to mention the JavaScript array Map and filter methods, as they are probably one of the most commonly used ES5 functions when building React applications. Especially when it comes to processing data.

These two methods are used more frequently when dealing with data. For example, suppose you get an array that returns JSON data from an API result:

Const users = [{name: 'Nathan', age: 25}, {name:' Jack', age: 30}, {name: 'Joe', age: 28},]

Then we can render the list of projects in React, as shown below:

Import React, {Component} from 'react'; class App extends Component {/ / class content render () {const users = [{name:' Nathan', age: 25}, {name: 'Jack', age: 30}, {name:' Joe', age: 28},] Return ({users .map (user = > {user.name})})}

We can also filter data in render

{users .filter (user = > user.age > 26) .map (user = > {user.name})}

ES6 module system

The ES6 module system enables JavaScript to import and export files. Let's take another look at the src / app.js code to explain this.

Import React, {Component} from 'react'; import logo from'. / logo.svg'; import'. / App.css'; class App extends Component {render () {return (

Edit src/App.js and save to reload.

Learn React);}} export default App

We see the import statement in the * * line of code:

Import React, {Component} from 'react'

We see the export default statement in the * * line of code:

Export default App

To understand these statements, let's first discuss the module syntax.

A module is simply an JavaScript file that uses the export keyword to export one or more values (which can be objects, functions, or variables). First, create a new file called util.js in the src directory

Touch util.js

Then we write a function here, using a default export.

Export default function times (x) {return x * x;}

Or multiple named exports

Export function times (x) {return x * x;} export function plusTwo (number) {return number + 2;}

Then we can introduce it in src/App.js.

Import {times, plusTwo} from'. / util.js'; console.log (times (2)); console.log (plusTwo (3))

Each module can have multiple named exports but only one default export. You can import the default export without using curly braces and the corresponding export function name:

/ / in util.js export default function times (x) {return x * x;} / / in app.js export k from'. / util.js'; console.log (k (4)); / / returns 16

However, for named exports, you must import using curly braces and the exact name. Alternatively, import can use aliases to avoid two different imports having the same name:

/ / in util.js export function times (x) {return x * x;} export function plusTwo (number) {return number + 2;} / in app.js import {times as multiplication, plusTwo as plus2} from'. / util.js'

Introduce the name directly like this:

Import React from 'react'

JavaScript will be asked to check the node_modules for the appropriate package name. Therefore, if you are importing a local file, don't forget to use the correct path.

Use in React

Obviously we've seen this in the src / App.js file, and then we've seen how the exported App component is rendered in the index.js file. Let's ignore the serviceWorker section for the time being.

/ / index.js file import React from 'react'; import ReactDOM from' react-dom'; import'. / index.css'; import App from'. / App'; import * as serviceWorker from'. / serviceWorker'; ReactDOM.render (, document.getElementById ('root')); / / If you want your app to work offline and load faster, you can change / / unregister () to register () below. Note this comes with some pitfalls. / / Learn more about service workers: http://bit.ly/CRA-PWA serviceWorker.unregister ()

Notice how to import App from the. / App directory and omit the .js extension. We can only omit the file extension when importing the JavaScript file, but we must include the extension, such as .css, in other files. We also import another node module, react-dom, which enables us to render the React component as a HTML element.

As for PWA, it is a feature that makes React applications work offline, but because it is disabled by default, there is no need to learn it at the beginning. After you are confident enough to build the React user interface, learn PWA.

At this point, the study on "what are the necessary React basics before you learn JavaScript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.