Why should you learn React?

Hello! Today I’m going to talk about why you should learn React? The first time I heard that React was when I was studying in the United States for graduate school, my roommate chose the web programming course, and then I encountered a lot of questions about React. it is good. I think his React configuration was particularly troublesome at that time, and a bunch of dependencies were introduced, such as bower, babel, etc... and the documentation was not clear. Once he just started to do an assignment and asked me a question, probably a component could not be displayed, but after watching it for a long time I didn't know what was going on, because I hadn't studied it either. Later, he researched it himself, because this component was not capitalized when it was used. I thought this React was so complicated, and then I decided that I would not learn it. Later, I learned vue during the summer vacation, but after returning to China, for some reason, I didn’t look for a back-end job and turned to the front-end. Seeing that this react has become particularly convenient, there is a create react app tool that can save a lot of things, and the ecosystem of react is particularly large, so I decided to learn react. Because I think this React is particularly convenient for developing large-scale front-end applications, especially after it has hooks. So, I want to share it with you today. What exactly is this react? What are its benefits?

The past and present of React

In the past, React's position for itself, including his official documents, was used to create a single-page application. What is a single-page application? Single-page application means that the entire page does not have URL redirection. The update of the page is achieved through JavaScript. This kind of website runs like a local APP. Make this user experience better.

However, it needs to load all the js, css and html at the beginning, and the subsequent operation is to deal with the server, and then update the part that needs to be changed after the data is retrieved, without page jumps. turn. React now positions itself as a JavaScript library to create user interfaces. From the perspective of this wording, it can be used for all user interface-related applications, whether you are a single-page application or a multi-page application, a mobile APP or something else, as long as it is used to display the user interface, you can use it to do .

What are the benefits of React for development?

Componentization

The advantage of using React is that you can create components. Then you can make small units such as buttons and menus on a website or application into a component, and these components can be reused in different places.

The changes between components are changed through state. You can think of this state as a trigger switch. As long as the state changes, React will render the component once according to these new states. It is updated to be new. This state is managed internally by the component, so in a separate unit such as a component, it is responsible for its own style and state changes, which will make the development very logical. It is not like jquery. If you want to change the state of a component, you need to find the component first, and then manually change its state.

efficient

React development efficiency is high because of these components. I remember when I went to work before, I got a new project, first analyzed the design drawing, and wrote some components that may need to be reused, and if some were uncertain, I wrote it in the corresponding page first, and then waited for it. When it is reused, it is extracted separately. In the end, these reusable components gradually become more and more, and when new pages are built, they will become faster and faster. In the end, they can develop into a label. You can generate a page. Moreover, these components can be used as your own style library in the future, which can be used directly when developing new projects or other mobile apps, so as to maintain the unity of style.

What skills are needed to learn React?

Learn React, you only need to master html, cssas well as JavaScriptknowledge on the line, while it is some of the new features ES6/ES7/ES8, but also need to look at, with the more there are 箭头函数, as well 解构赋值, 扩展运算. As for class, because after React has hooks, basically all components can be written in functional style, so class has become less important.

Create the first React project

Now let's take a look at how to create a react project. Because React created a node project, you need to install node.js. The installation method is described in the previous video. After installing node.js, you can also optionally install yarn, but this is unnecessary. Personally, I am more accustomed to using yarn.

Node.js video

Yarn video

Create React App

The next step is to create a project. You can use the create-react-app tool to open your command line, find a folder you think is suitable, and enter it

npx create-react-app hello-world

After the space is the name of our project, for example, it is called hello-world.

After it is created, run this project using:

npm startOr yarn start, after running it will automatically help you open a browser, you can see a logo, there is a passage tells us edit it src/app.jslook effect. Let's take a look at the directory structure of the project:

hello-world
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── serviceWorker.js
│   └── setupTests.js
└── yarn.lock

Here you need to care about is srcthis folder:

• App.js-It is the topmost component in this react project. Let's take a look at the code of this App.js:

  import React from "react";
  import logo from "./logo.svg";
  import "./App.css";
  
  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
  
  export default App;
  

  You can see that this react component is defined by a function, and finally returns some html tags, then this html tag is called jsx. This syntax may seem strange at first. When writing html in js, it doesn’t In line with this model of separation of performance and logic. In fact, writing this way is very easy to transfer data between html and js, just get used to it. This last component export this out, so index.jsput it to root div id inside. Use css styles in a component in, then it directly in the top importimport the css style files come in on it, it will automatically apply the style inside. Here note, jsx is used classNameinstead of the class. Reference picture, also just need to import the pictures you can come in, and then assign a value to a variable. In imgthis label, as a direct value of the src just fine, references js variable jsx inside, it requires the use of braces {}grammar.

• index.js-It is the entry file of this project. App put this assembly inside it to mount to the inside div id of the root, by calling the ReactDOM.render()function, div inside it will replace all the code App component generated html:

  ReactDOM.render(<App />, document.getElementById("root"));
  

  We can look at publicthe lower side index.html, he had a id div to root:

  <div id="root"></div>
  

We can now delete the code in the App function and return to a simple component. For example, change the label to h1 and write a hello world in it. After saving the page, it refreshes.

function App() {
  return <h1>Hello World</h1>;
}

Okay, now you have created your first React project.

B station video-click to send

to sum up

Today I told you what React is and what advantages it has. Next, I will gradually introduce some of its features, such as properties, status, and event handling, advanced usage, component design, and so on. Now you can use this project to play it by yourself first, and see if you can make something by yourself. If you have any other questions, please leave a message in the comment area, thank you.