The introduction

Web front end

The front end discussed in this article represents only the Web front end

Three mountains in front

Front-end fundamentals are HTML, CSS, JavaScript, but it’s almost impossible for programmers to say they don’t know anything about it. If you think about it, we all have the potential to be front-end programmers.

The front end of the back end

In Web development, don’t back-end programmers have access to front-end content? Of course not! The Web back end has a technology called a template engine — rendering data to HTML pages on the server side — that is one of the basic skills of a Web back end programmer.

For example, JSP, Thymleaf, and FreeMarker in Java; Mako, JinJia2, etc in Python. This technique requires back-end programmers to first master HTML, CSS, and JavaScript, and then work with other proprietary tags and syntax.

obstacles

For back-end programmers, want to break through to the front of the biggest obstacles is the Layout of the Layout, after all, not professional do the front, and a lot of companies, even if the front end is not yet separation (use the template engine), should also be professional front cut good Html page first, then by the backend into a template engine needs, in the form of steps is very complicated, the wasted effort, As a result, backend programmers are rarely able to systematically learn layouts or CSS.

Relying on an ambiguous body of knowledge ends up discouraging most back-end programmers from writing pages, not because they don’t know the basics of the front end, but because most of their time is likely to be wasted on Layout.

Why learn the front end?

Of course, by “learning” we mean “systematically learning”. There are three reasons:

  • Avoid people, such as themselves suddenly have a good Idea, is about to realize it, think of a lot of time to do layout, it is better to chew middleware source code; Or you want to build your own blog, struggle with layout, and end up stuck with a ready-made static blog builder.
  • Node.js is here, ES6 is here, the front end has its own packaging tool Webpack, its own package management tool NPM \ YARN, mature JavaScript frameworks react, Vue, Angular, scaffolding, You have class, import, export, and Lamda (arrow expressions). The front-end ecology is more like the back-end, so learning can be more systematic, less intrusive and easier to learn.
  • Add value, Web development — middleware — big data — machine learning, this seems to be more like the back end of the attack route, but the front end of learning compared to them, the threshold and time is less than nothing, rather than every time it is tired, take some time to kill it, once and for all.

Why learn React?

Not to mention the features, at least the ecosystem and user numbers tell us that Angular is dying and React is competing with Vue — React or Vue: How Do You Choose?

Why did I learn React?

  • As a backend, I’ve had enoughThe template(Some people prefer Vue for this reason), which is exactly what Vue does, compared to ReactJavaScript ES6+HtmltheJSXVue requires you to relearn moreHTML extensions, similar to the followingv-on:click: 
    <button v-on:click="reverseMessage">Reverse Message</button>
Copy the code
  • The author’s girlfriend is working on the front end of Android. In order to help her develop Native apps in the future, React, which is suitable for both Web and Native apps, has become the best choice

The body of the

As a document lover, I will always be loyal to the official documents as long as there are detailed official documents. I have to say that I really learned a lot of professional words before learning to use Google Translate. I give two reasons for relying on official documents:

  • Authoritative, official documents, unlike tech blogs, are free of subjective opinion;
  • Real-time, especially constantly updated technology, such as the React individuals outside of the official tutorial tutorial, will soon be out of date, because some of these technologies may be abandoned or replaced, so don’t recommend watching individual tutorial, for example: nguyen other nguyen teacher introduction to React instance tutorial “(actually I have seen, at first, warning)

In order to make it more convenient for readers to learn, the following routes will also provide Chinese documents or blogs close to the official documents, in fact, most of them are translated or summarized after learning the official documents!!

1. CSS layout

The display: Table layout had performance issues, but now we have two more convenient and efficient layouts, depending on compatibility and page complexity: Flex layout:

  • Official: developer.mozilla.org/en-US/docs/…
  • English: www.runoob.com/w3cnote/fle…

The Grid layout:

  • Official: developer.mozilla.org/en-US/docs/…
  • English: www.jianshu.com/p/d183265a8…

2. JavaScript ES6

React JSX syntax is nothing more than HTML+JavaScript mixed together, while ES6 is the new standard for JavaScript. JavaScript in React has been close to ES6 since a long time ago, until now (V16.6.3), ES6 has been completely written.

  • Official: developer.mozilla.org/en-US/docs/…
  • English: www.runoob.com/js/js-tutor…
  • Open courses: www.imooc.com/learn/955

3. Npm/Yarn

Package management tools. Just like Maven and Gradle in Java, Pip and Conda in Python, you can download common code directly from the repository to avoid repeating the wheel. It is a necessary tool in the big front-end era.

Npm is a package management tool in Node environment. If Node environment is installed, Npm is installed. When using Yarn, pay attention to version problems and update periodically

  • Official: docs.npmjs.com/downloading…
  • Mirror: npm.taobao.org/

4. The scaffold

A scaffold, as its name implies, is a frame that can be used directly. Before there was scaffolding, big front-end projects required us to build our own file structures, integrate some of the necessary tools, and create the necessary configuration files. These were repetitive but essential steps, like creating an Android project in the IDE and a SpringBoot project.

Create-react-app scaffolding for Web (PC or mobile) :

  • Github:github.com/facebook/cr…
  • The official document: facebook. Making. IO/create – fax…

React-native scaffolding — Expo

  • Official: expo. IO/learn

5. The React tutorial

  • Official tutorial: reactjs.org/tutorial/tu…

  • Official main concept: reactjs.org/docs/hello-…

  • Official senior Guidance: reactjs.org/docs/contex…

  • Chinese tutorial: react.docschina.org/tutorial/tu…

  • Product main concepts: react.docschina.org/docs/hello-…

  • Chinese senior guidance: react.docschina.org/docs/jsx-in…

  • Open courses: www.imooc.com/learn/1045

6. Redux

With the increasing complexity of JavaScript single-page application development, JavaScript needs to manage more states than ever before. Consider some new requirements from the front-end development world, such as update tuning, server-side rendering, Websocket long connections, routing pre-jump requests for data, and so on. Front-end developers are experiencing unprecedented complexity and just give up? Of course not, we can use Redux to solve this problem.

  • Official: redux.js.org/
  • English: www.redux.org.cn/
  • Ruan Yifeng Tutorial (good for getting started) :
    • Basic usage: www.ruanyifeng.com/blog/2016/0…
    • Middleware and asynchronous operations: www.ruanyifeng.com/blog/2016/0…
    • The React – Redux usage: www.ruanyifeng.com/blog/2016/0…

7. React-Redux

For ease of use, the authors of Redux have packaged a react-redux library dedicated to React.

  • Official: react-redux.js.org/docs/introd…
  • English:
    • Cn.redux.js.org/docs/basics…
    • www.redux.org.cn/docs/react-…

8. React-Router

React Router is a powerful routing library built on top of React that allows you to quickly add views and data streams to your application while keeping pages and urls in sync. If you don’t know what routing is? You can Google

  • English:
    • www.redux.org.cn/docs/advanc…
    • The react – guide. Making. IO/react – the route…
  • Official: reacttraining.com/react-route…
  • GitHub:github.com/ReactTraini…

9. Promise

The Promise object represents the final completion (or failure) of the asynchronous operation and its resulting value.

In the JavaScript world, all code is executed in a single thread. Due to this “bug”, all web operations of JavaScript, browser events, must be executed asynchronously. Asynchronous execution could be implemented with callback functions, but it was cumbersome, so promises were introduced — as the ancients say, “a gentleman keeps his Promise.” These “Promise to perform” objects are called Promise objects in JavaScript.

  • Official: developer.mozilla.org/en-US/docs/…
  • English: www.liaoxuefeng.com/wiki/001434…

10. Fetch API

The Fetch API provides an interface for fetching resources (including the entire network). This may seem familiar to anyone who has worked with XMLHttpRequest, but the new API offers a much more powerful and flexible set of features. Unlike $.ajax () and Axios, Fetch is an HTML5 API, a standard and a future trend.

  • Official: developer.mozilla.org/en-US/docs/…
  • English: reactnative. Cn/docs/networ…

11. React-Native

React Native is a library that uses Javascript to build mobile Native applications (iOS, Android). It’s the same as React. Js, except instead of using Web components, it uses native components. If you learn React. Js, you’ll quickly learn React Native, and vice versa. Here we have a basic understanding of the React ecosystem, so it’s easy to get into the React-Native system

  • Official: facebook. Making. IO/react – nativ…
  • English: reactnative. Cn/docs/gettin…

12. Webpack

In essence, Webpack is a static Module bundler for modern JavaScript applications. Scaffolding has integrated and configured Webpack for us, but it’s still worth taking a closer look at Webpack for some advanced features.

  • What is Webpack? WebPack can be viewed as a module baler: What it does is analyze the structure of your project, find JavaScript modules and other extension languages that browsers don’t run directly (Scss, TypeScript, etc.), and package them into a format that browsers can use.
  • Why use WebPack? Many of today’s web pages can be thought of as feature-rich applications, with complex JavaScript code and a lot of dependencies. Many good practices have emerged in the front-end community to simplify development
    • A: Modularity allows us to break down complex programs into smaller files.
    • B: Development languages such as TypeScript, which are extensions of JavaScript, allow us to implement features that are not directly available in current versions of JavaScript and can then be installed as JavaScript files for browsers to recognize.
    • C: SCSS, LESS CSS preprocessors………

These improvements have greatly improved our development efficiency, but files developed using them often require additional processing to be recognized by the browser, and manual processing is very locked, which provides the need for webPack-like tools.

  • Official: webpack.js.org/concepts/
  • English: webpack.docschina.org/concepts/
  • Open courses: www.imooc.com/learn/802