When I first touched the front end, I was deeply attracted by its flexibility and freedom. It can be said that there is no front-end knowledge in school, and I can only learn simple Html tags by referring to W3school. Read other people’s articles and read some official documents to learn. Here I will slowly explain my experience of learning from the front end of zero.

<div></div> </div> </div> </div> </div> </div> </div> There is a first step in everything. .box{ width: 100px; height: 200px; } <div class="box"> Hello World! </div> Here I want to make fun of why I always write Hello World when I first print it out, whether it's on the front end or the back end.Copy the code

HTML’s full name is Hypertext Markup Language, and its partner CSS cascading style sheets, can be said to be the first step for every front-end learner, of course, HTML tags are not good to introduce, here is CSS. CSS can be used as long as you want it, it can satisfy you, height, width, color, font… All kinds of styles.W3schoolCSS is a handbook for learning CSS, and you can read articles and books to continually strengthen your front-end basics. Only a good foundation to be competent for any task, Html, Css can be said to be the reason to seduce me. Of course, front-end learning includes not only the language of building styles, but also JavaScript, one of the farmer’s three Fists, which my friends and I joke about.

JavaScript

JavaScript has seven data types (up to ES6) : number, String, Boolean, undefined, NULL, Symbol, and Object. The first six are basic types, and object is a reference type.

Var, let, const

They all define one property but if there are three of them there must be different ones, why not create them.

Variables defined by var have no concept of blocks and can be accessed across blocks rather than functions

Variables defined by the LET can only be accessed in the block scope, not across blocks or functions

Const is used to define constants, which must be initialized when used and can only be accessed in the block scope

<script type="text/javascript">
    // block scope
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; / / an error
        var aa;
        let bb;
        // const cc; / / an error
        console.log(a); / / 1
        console.log(b); / / 2
        console.log(c); / / 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); / / 1
    // console.log(b); / / an error
    // console.log(c); / / an error
 
    // Function scope
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); / / 5
        console.log(e); / / 6
        console.log(f); / / 7}) ();// console.log(d); / / an error
    // console.log(e); / / an error
    // console.log(f); / / an error
</script>
Copy the code

Var has a variable boost compared to others. If a variable is referenced in the same code block before it is declared after the let, an error is reported. Let prints undefined

<script>
        console.log(a)// Print undefined
        var a=3
        console.log(b)/ / an error
        let b=3



        // Var can be interpreted as
        var a
        console.log(a)
        a=3
      
    </script>
Copy the code

Is the value defined by const immutable? No, you can try defining an object that is const and changing the value of the property inside the object to see if an error occurs.

There is so much syntax in JavaScript that it can be said that it is the most painful of the farmer’s three punches. I don’t know exactly what to introduce here, because they are all very important. I will pick a problem and explain it systematically in the next article.

react

React, Vue, Angular, etc.

Angular

AngularJS is a client-side JavaScript MVC open source framework specifically designed for single-page Web applications that use the MVC architectural pattern to develop dynamic Web applications. It is not a complete stack, but rather a front-end framework for handling Web pages. AngularJS is based entirely on HTML and JavaScript, so you don't need to learn other syntax or languages. AngularJS changes static HTML to dynamic HTML. It extends the power of HTML by adding built-in properties and components, and also provides the ability to create custom properties using simple JavaScript. At the heart of AngularJS are MVC(Model -- View -- Controller), modularity, automated two-way data binding, semantic tagging, dependency injection, and so on. Angular extends HTML with directives, publishing it as a JavaScript file and adding it to a web page with script tags. Angular's advantage is that zero-configuration, deeply integrated design patterns, and conventions are the essence of the framework.Copy the code

React

React is an open source JavaScript library maintained by Facebook and a large developer community. This library (which can also be converted to a Web development framework) is widely used to develop user interfaces for Web applications. This particular framework is designed for building large applications whose data changes over time. React's main function is DOM manipulation, declarative design, faster development of Web applications. React makes it easy to create user interfaces that give you concise views of every state in your app. React also updates the render interface efficiently when data changes.Copy the code

Vue

Vue is an open source JavaScript framework for developing single-page applications. It can also be used as a Web application framework with the goal of simplifying Web development. It's popular for a number of reasons, one of the key ones being its ability to re-render without any action, its ability to build reusable, a small but powerful component and its ability to add components whenever we need them. Vue provides MVVM data binding and a composable component system with a simple, flexible API. Technically, Vue focuses on the view-model layer on top of the MVVM pattern and connects the view to the model through two-way data binding. The actual DOM manipulation and output formats are abstracted into instructions and filters, making Vue easier to use than other MVVM frameworks.Copy the code

There isn’t much of a “learn before” or “learn after” distinction between the three front-end frameworks, as learning which one is based on your JavaScript skills. The author learned Vue and React and wrote projects. Vue is better for my feelings, so I recommend React. Don’t ask why, just like React.

State of the state

React treats a component as a State machine. Achieve different states by interacting with the user, and then render the UI to keep the user interface and data consistent. React simply updates the component's state and rerenders the user interface based on the new state (don't manipulate the DOM).class Clock extends React.Component {
    constructor(props) {
      super(props);
      this.state = {date: new Date(a)}; }render() {
      return (
        <div>
          <h1>Hello, world!</h1>
          <h2>Is now a {this. State. The date. ToLocaleTimeString ()}.</h2>
        </div>
      );
    }
  }
   
  ReactDOM.render(
    <Clock />.document.getElementById('example'));Copy the code

props

The main difference between state and props is that props are immutable, whereas state can be changed depending on how it interacts with the user. This is why some container components need to define states to update and modify data. Subcomponents can only pass data through props. function HelloMessage(props) { return <h1>Hello {props.name}! </h1>; } const element = <HelloMessage name="Runoob"/>; ReactDOM.render( element, document.getElementById('example') );Copy the code

The life cycle

The React lifecycle is broadly divided into three phases: mount, render, and unload

  • Mounting: The real DOM is inserted
  • Updating: Being rerendered
  • Unmounting: The real DOM has been removed

Therefore, the React lifecycle can be divided into two types: mount and unload processes and update processes.

  • ComponentWillMount is called before rendering, both on the client side and on the server side.
  • ComponentDidMount: Called after the first rendering, only on the client side. The component then generates the corresponding DOM structure, which can be accessed through this.getDomNode (). If you want to use it with other JavaScript frameworks, you can use this method to call setTimeout, setInterval, or send AJAX requests (to prevent asynchronous operations from blocking the UI).
  • ComponentWillReceiveProps component receives a new prop (updated) is invoked. This method is not called when render is initialized.
  • ShouldComponentUpdate returns a Boolean value. Called when the component receives new props or state. Not called during initialization or when forceUpdate is used. This can be used when you are sure that you do not need to update the component.
  • ComponentWillUpdate is called when the component receives a new props or state but has not yet rendered. Will not be called during initialization.
  • ComponentDidUpdate is called immediately after the component has finished updating. Will not be called during initialization.
  • ComponentWillUnmount is called immediately before the component is removed from the DOM.

Learning front end has passed a year, I also gradually adapt to a variety of work, but there is still a lot to learn, let me here while learning and share it with you.