初学react实现路由跳转
by Ali Spittel
通过Ali Spittel
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 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分开,但是如果您愿意,您甚至可以使该组件特定!
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框架的所有文章。
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差异来显示将更改的代码行。 如果您复制并过去,则需要删除该行开头的+
。
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功能(我们将在后面详细讨论!)。
I also made a Codepen template that you can use!
我还制作了一个可以使用的Codepen模板 !
In a full React project, I would split my components into different files. For learning purposes we will combine our JavaScript into one file for now.
在一个完整的React项目中,我会将组件拆分为不同的文件。 出于学习目的,我们现在将JavaScript合并到一个文件中。
For this tutorial, we will be building a Facebook status widget, since Facebook wrote React in the first place!
对于本教程,我们将构建一个Facebook状态小部件,因为Facebook首先编写了React!
Think about how many places the like
widget appears on Facebook. You can like a status, or a link post, or a video post, or a picture! Or even a page! Every time Facebook tweaks something about the like functionality, they don’t want to have to do so in all those places. So, that’s where components come in! All the reusable pieces of a webpage are abstracted into a component. That component can be used over and over again. Ee will only have to change the code in one place to update it.
考虑一下like
小部件在Facebook上出现了多少个位置。 您可以喜欢状态,链接文章,视频文章或图片! 甚至一页! 每次Facebook对类似功能进行调整时,他们都不想在所有这些地方都这样做。 因此,这就是组件的所在! 网页的所有可重用部分都被抽象为一个组件。 该组件可以反复使用。 Ee只需在一个地方更改代码即可对其进行更新。
Let’s look at a picture of a Facebook status and break down the different components within it.
让我们看一下Facebook状态的图片,并分解其中的不同组成部分。
The status itself will be a component. There are lots of statuses within a Facebook timeline. We definitely want to be able to reuse the status component.
状态本身将是一个组成部分。 Facebook时间轴内有很多状态。 我们绝对希望能够重用状态组件。
Within that component, we will have subcomponents or components within a parent component. Those will be reusable as well . We could have the like button component be a child of the PhotoStatus
component and the LinkStatus
component.
在该组件中,我们将在父组件中包含子组件或组件。 这些也将可重用。 我们可以将like按钮组件作为PhotoStatus
组件和LinkStatus
组件的子代。
Maybe our subcomponents would look something like this:
也许我们的子组件看起来像这样:
We can even have subcomponents within subcomponents! So, the group of like, comment, and share could be its own ActionBar
component. It would have components for liking commenting and sharing within it!
我们甚至可以在子组件中包含子组件! 因此,点ActionBar
,评论和分享可能是它自己的ActionBar
组件。 它会包含喜欢评论和共享的组件!
There are a bunch of ways you could break down these components and subcomponents depending on where you will reuse the functionality in your application.
您可以通过多种方法来分解这些组件和子组件,具体取决于您将在应用程序中重用功能的位置。
I wanted to start off this tutorial with a React “Hello World” — it is the tradition after all! Then we’ll move to the slightly more complex status example.
我想从React“ Hello World”开始本教程-毕竟是传统! 然后,我们将转到更为复杂的状态示例。
In our HTML file, let’s add just one element — a div
with an id on it. By convention, you will normally see that div have an id "root" on it since it will be the root of our React application!
在我们HTML文件中,我们仅添加一个元素-上面有id的div
。 按照惯例,您通常会在div上看到一个id“ root”,因为它将成为我们React应用程序的根!
If you’re writing the code in the CodePen template, you can write this JavaScript directly in the js
section. If you are instead writing this on your computer, you will have to add a script tag with the type text/jsx
, so:
如果要在CodePen模板中编写代码,则可以直接在js
部分中编写此JavaScript。 如果要在计算机上编写此代码,则必须添加类型为text/jsx
的脚本标签,因此: