初学react实现路由跳转_完整的React初学者指南

初学react实现路由跳转

by Ali Spittel

通过Ali Spittel

完整的React初学者指南 (A Complete Beginner’s Guide to React)

I want to get back into writing more technical content. React is one of my favorite technologies, so I thought I would create a React intro! This post requires knowledge of HTML and JavaScript. I am of the firm opinion that you should know these before moving on to libraries like React!

我想重新编写更多的技术内容。 React是我最喜欢的技术之一,所以我想我会创建一个React简介! 这篇文章需要HTML和JavaScript的知识。 我坚信,在进入像React这样的库之前,您应该了解这些知识!

什么是React (What is React)

React is a JavaScript library built in 2013 by the Facebook development team. React wanted to make user interfaces more modular (or reusable) and easier to maintain. According to React’s website, it is used to “Build encapsulated components that manage their own state, then compose them to make complex UIs.”

React是Facebook开发团队于2013年构建JavaScript库。 React希望使用户界面更具模块化(或可重用)并且易于维护。 根据React网站的说法,它用于“构建管理其自身状态的封装组件,然后对其进行组合以构成复杂的UI。”

I’m going to use a lot of Facebook examples throughout this post since they wrote React in the first place!

自从他们首先编写React以来,我将在整个帖子中使用许多Facebook示例!

Remember when Facebook moved from likes to reactions? Instead of being able to like posts, you can now react with a heart, or a smiley face, or a like to any post. If those reactions were primarily made in HTML, it would be a tremendous amount of work to change all those likes to reactions and to make sure that they work.

还记得Facebook从点赞转变为React的时候吗? 现在,您不再喜欢帖子,而是可以对任何帖子用心,笑脸或类似的表情做出React。 如果这些React主要是用HTML进行的,那么将所有这些喜欢的React更改为React并确保它们能起作用将是大量的工作。

This is where React comes in. Instead of implementing “separation of concerns”, we have a different architecture in React. This architecture increases modularity based on a component’s structure.

这就是React的用武之地。我们没有实现“关注点分离”,而是在React中使用了不同的架构。 这种架构基于组件的结构提高了模块化。

Today, we’ll keep the CSS separate, but you can even make that component specific if you want!

今天,我们将CSS分开,但是如果您愿意,您甚至可以使该组件特定!

React与Vanilla JavaScript (React vs. Vanilla JavaScript)

When we talk about “vanilla” JavaScript, we are normally talking about writing JavaScript code that doesn’t use additional libraries like JQuery, React, Angular, or Vue. If you would like to read more about those and what a framework is, I have a post all about web frameworks.

当我们谈论“普通” JavaScript时,通常是在谈论编写不使用其他库(例如JQuery,React,Angular或Vue)JavaScript代码。 如果您想了解更多有关这些内容以及框架是什么的信息,那么我会发布有关Web框架的所有文章。

在我们开始之前的几个快速笔记 (A couple quick notes before we begin)

  • To make this tutorial a little more succinct, some code examples have ... before or after them. This means we omitted some code.

    为了使本教程更加简洁,一些代码示例在其之前或之后都有... 这意味着我们省略了一些代码。

  • I use Git diffs in some places to show lines of code that will change. If you copy and past, you need to delete the + at the beginning of the line.

    我在某些地方使用Git差异来显示将更改的代码行。 如果您复制并过去,则需要删除该行开头的+

  • I have full CodePens with the completed versions of each section — so you can use those to play catch-up!

    我有完整的CodePens,每个部分都有完整的版本-因此您可以使用它们来赶上进度!
  • More advanced concepts that aren’t essential for the tutorial are in blockquotes. These are facts that are interesting!

    块引用中包含了对本教程不是必需的更高级的概念。 这些都是有趣的事实!

建立 (Set Up)

If you are creating a production React application, you will want to use a build tool like Webpack. Webpack will bundle your code since React utilizes some patterns that won’t work by default in the browser. Create React App is super helpful for these purposes since it does most of the configuration for you!

如果要创建生产React应用程序,则需要使用Webpack之类的构建工具。 Webpack将捆绑您的代码,因为React使用了一些默认情况下在浏览器中不起作用的模式。 创建React App对于这些目的超级有帮助,因为它可以为您完成大部分配置!

For now, we will be using the React CDN, which is only for development purposes! We will also use the Babel CDN so that we can use some non-standard JavaScript features (we’ll talk more about that later!).

现在,我们将使用React CDN,这仅用于开发目的! 我们还将使用Babel CDN,以便我们可以使用一些非标准JavaScript功能(我们将在后面详细讨论!)。


                    
                    

你可能感兴趣的:(vue,python,javascript,java,html,ViewUI)