react.js导航条_如何在React.js生态系统中导航而不会迷路

react.js导航条

by Marius Espejo

由Marius Espejo

如何在React.js生态系统中导航而不会迷路 (How to navigate the React.js ecosystem without getting lost)

In the world of software development it’s often hard to find one direct path for learning something new. Should you read a book? Follow a tutorial? Watch a video? Ask for advice?

在软件开发领域，通常很难找到学习新事物的直接途径。 你应该读书吗？ 遵循教程？ 观看视频？ 请教？

With so many possible paths and options to take, getting lost is easy.

有这么多可能的路径和选择，迷路很容易。

Learning React.js is actually straightforward, all it takes is knowing which path to take.

学习React.js实际上很简单，所要做的就是知道走哪条路。

先决条件 (Prerequisites)

Here are some things I recommend you get a solid grasp on before you start learning React.

我建议您在开始学习React之前牢牢掌握以下内容。

确保您对HTML和CSS有所了解 (Make sure you have some understanding of HTML and CSS)

Pretty much every web development is going to require some form of knowledge of these two. If you’re an absolute beginner in this space, I would recommend checking out Travis Neilson’s videos like HTML5 Basics and CSS Basics. Then jump over to freeCodeCamp.org or codeacademy.com for some practice.

几乎每个Web开发都需要这两种知识的某种形式。 如果您绝对是该领域的初学者，我建议您查看Travis Neilson的视频，例如HTML5 Basics和CSS Basics 。 然后跳到freeCodeCamp.org或codeacademy.com进行一些练习。

Your ultimate goal should be to take a basic design or structure for a web page, turn it into code, and visually see what you were hoping it would look like. Ideally, it will look very similar to your design.

您的最终目标应该是为网页采取基本的设计或结构，将其转换为代码，并直观地看到您希望的外观。 理想情况下，它看起来与您的设计非常相似。

掌握JavaScript本身 (Have a good grasp of JavaScript itself)

I don’t recommend trying to learn frameworks and libraries before you’ve spent some time learning the JavaScript language first. There is a tremendous amount of resources out there to learn JavaScript depending on your experience.

在您花一些时间先学习JavaScript语言之前，我不建议您尝试学习框架和库。 根据您的经验，这里有大量的资源来学习JavaScript。

For an absolute beginner, freeCodeCamp has an awesome set of resources, including a video playlist of all the JavaScript basics and an interactive place to learn and practice right right on their website.

对于一个绝对的初学者来说， freeCodeCamp拥有一系列很棒的资源，包括所有JavaScript基础的视频播放列表以及一个可以在其网站上直接学习和练习的交互式场所。

The best way to learn code is to write code!

学习代码的最好方法是编写代码！

If you’ve already used JavaScript in the past and need a refresher checkout this re-introduction.

如果您过去已经使用过JavaScript，并且需要复习一下，请参阅此重新介绍 。

If you’re not sure if you do know JavaScript, then I bet You Don’t Know JS. That’s actually a popular book series that is helpful for those of you who are looking to get a better understanding of the language.

如果您不确定自己是否懂JavaScript，那么我敢打赌， 您不懂JS 。 这实际上是一本受欢迎的丛书，对那些希望更好地理解该语言的人很有帮助。

“When you strive to comprehend your code, you create better work and become better at what you do. The code isn’t just your job anymore, it’s your craft.”

“当您努力理解代码时，您将创造更好的工作，并在做事上变得更好。 代码不再只是您的工作，而是您的工作。”

— Jenn Lukas

—珍妮·卢卡斯(Jenn Lukas)

除了学习基本JavaScript外，您还需要对ECMAScript 2015(ES6)的某些功能有一个体面的了解。 (Beyond learning basic JavaScript, you’ll also need to get a decent understanding of some ECMAScript 2015 (ES6) features)

Specifically, focus on understanding the following:

具体来说，重点是了解以下内容：

• Modules (import/export)
  模块(导入/导出)
• let and const
  let和const
• Arrow functions
  箭头功能
• Classes
  班级
• Destructuring
  解构
• Rest/Spread
  休息/传播

These are guaranteed to show up in your React code and having some understanding of them will allow you to consume documentation much easier.

保证它们会出现在您的React代码中，并且对它们有一些了解将使您更轻松地使用文档。

To get a quick start on these, I would recommend LearnCode.academy’s ES6 Cheatsheet or one of Babel’s resources.

为了快速入门，我建议使用LearnCode.academy的ES6速查表或Babel的资源之一 。

了解如何使用节点包管理器(npm) (Learn how to use the Node Package Manager (npm))

Install Node.js and it will come with npm packaged with it. At the moment npm is one of the best ways to download JavaScript development dependencies.

安装Node.js ，它将附带打包的npm。 目前，npm是下载JavaScript开发依赖项的最佳方法之一。

For example, this simple command will allow you to install and download React for a project:

例如，这个简单的命令将允许您为项目安装和下载React：

npm install --save react

Most of what you need to know initially is how to install packages. This alone will open you up to an extensive set of tools and libraries that will allow you to get more done in less time.

最初，您需要了解的大多数信息是如何安装软件包。 仅此一项就为您打开了广泛的工具和库集，使您可以在更短的时间内完成更多工作。

(可选)了解函数式编程的基础 ((Optional) Learn the basics of functional programming)

Although it is not required to learn React, understanding basic functional programming concepts will come in handy many times in your React development.

尽管不需要学习React，但在React开发中，很多时候都可以理解基本的函数编程概念。

I would recommend understanding function composition, purity, and higher-order functions. The goal here is not to be an expert about the subject, but to be at least exposed to it. For a quick introduction, here’s an awesome talk from a great speaker. Or you can learn right from your inbox if you want to.

我建议您了解函数的组成，纯度和高阶函数。 这里的目标不是成为该主题的专家，而是至少要对此有所了解。 为了快速介绍，这是一位出色演讲者的精彩演讲 。 或者，您可以根据需要直接从收件箱中学习。

“Every mountain top is within reach if you just keep climbing.”

“如果您继续攀登，每个山顶都近在咫尺。”

— Barry Finlay

— 巴里·芬莱

Depending on your development experience, you can learn React basics within a few hours to a few days. Beyond that it just takes a bit more experience and you’ll be able to create applications in no time.

根据您的开发经验，您可以在几小时到几天内学习React基础知识。 除此之外，它还需要更多的经验，您将能够立即创建应用程序。

How is that possible? Well…

那怎么可能？ 好…

首先，不要学习Redux或其他库 (First of all, don’t learn Redux or other libraries yet)

The biggest mistake a lot of people make when learning React for the first time is search for a starter template or a tutorial that already includes Redux and a bunch of other libraries in it.

很多人在第一次学习React时犯的最大错误是搜索入门模板或教程，其中已经包含Redux和许多其他库。

People often ask me what’s the best way to learn React. For some reason it never occurs to them that the official documentation is actually a great place to start because it focuses on teaching you just React.

人们经常问我什么是学习React的最好方法。 出于某种原因，我从不给他们的正式文件实际上是一个很好的起点，因为它侧重于教导你刚React过来。

Forget about Redux for now. You might not even need it.

暂时忘记Redux。 您甚至可能不需要它 。

Forget about other libraries and boilerplates.

忘记其他库和样板。

“Learning React by copying boilerplates is like learning to cook by eating food in fancy restaurants. It doesn’t work. You need to start with basics and ignore the fear of missing out.” — Dan Abramov

“通过复制样板来学习React就像在高档餐馆吃食物来学习烹饪。 没用 您需要从基础开始，而忽略错过的恐惧。” — 丹·阿布拉莫夫

只关注React和React。 (Focus on React and React alone.)

I would recommend this for the same reason that you might not want to learn Calculus before becoming comfortable with Algebra. Or you might not even need Calculus to solve a simple math problem.

我之所以建议这样做，是因为您可能不喜欢代数之前就不想学习微积分。 否则，您甚至不需要微积分即可解决简单的数学问题。

Figure out what problems React can and can’t solve for you on its own. That will give you a basic guide to know when it’s time to pull in more libraries, and ultimately more things to learn, into your project.

找出React可以为自己解决或不能为您解决的问题。 这将为您提供基本的指南，以了解何时该将更多的库以及最终更多的要学习的知识引入您的项目。

这是最简单的入门方法 (Here’s the easiest way to get started)

Start with create-react-app. It will give you everything you need to start small without being held back by boilerplate and configuration.

从create-react-app开始 。 它会为您提供从小处开始所需的一切，而不会受到样板和配置的限制。

It allows you the freedom to focus on learning React on its own without having to worry about learning and setting up Webpack, Babel, and various other configuration.

它使您可以自由地专注于自己学习React，而不必担心学习和设置Webpack，Babel和其他各种配置。

npm install -g create-react-app create-react-app my-app

cd my-app npm start

Those four simple commands will get you everything you need to get a project started. It includes tooling that will refresh your browser when you change your code.

这四个简单的命令将为您提供启动项目所需的一切。 它包含的工具可在您更改代码时刷新浏览器。

It also offers a build command which will compile your code to a few static assets that you can easily deploy anywhere and an awesome user guide that will guide you through that process.

它还提供了一个构建命令，该命令会将您的代码编译为一些可以轻松部署到任何地方的静态资产，并且还提供了一个很棒的用户指南 ，它将指导您完成该过程。

I think of create-react-app as sort of like hiking boots. You don’t necessarily need hiking boots to climb a mountain, but they sure will help and might even make it easier to climb certain surfaces. And if you realize you don’t need them, you can always “eject” them from your feet!

我认为create-react-app就像远足靴一样。 您不一定需要登山靴来爬山，但是它们肯定会有所帮助，甚至可能使某些表面的攀登变得更容易。 如果您意识到自己不需要它们，则可以随时从脚上“ 弹出 ”它们！

With tooling out of the way, let’s get back on the path of learning React.

随着工具的发展，让我们回到学习React的道路上。

掌握React的基础知识 (Master the fundamentals of React)

Check out this great post on the main concepts of React. There actually aren’t a lot of stuff you need to learn.

查看关于React主要概念的精彩文章。 实际上，您不需要学习很多东西。

In general you should get an understanding of the following:

通常，您应该了解以下内容：

• JSX: what it is, how it differs from traditional HTML, and how to declaratively set it up to handle dynamic changes

  JSX： 它是什么 ，它与传统HTML有何不同，以及如何以声明方式设置它以处理动态更改

/* Notice how you have to use className instead of class     And how the expression inside the curly braces allow it to    dynamically handle any name passed in via props */

<h1 className="greeting">Hello, {this.props.name}</h1>

• Learn how to write functional stateless components. Here’s why.

  了解如何编写功能性无状态组件。 这就是为什么 。

// These are really just simple functions which return JSXfunction MyComponent(props) {      return <h1 className="greeting">Hello, {props.name}</h1>; }

// Alternatively write them using arrow functionsconst MyComponent = (props) => (<h1 className="greeting">Hello, {props.name}</h1>);

• Learn how to write components using the ES6 class syntax. It allows you to write more complex components with access to lifecycle hooks and local state

  了解如何使用ES6类语法编写组件。 它允许您编写更复杂的组件，并可以访问生命周期挂钩和本地状态

class MyComponent extends React.Component {      render() {          return <h1 className="greeting">Hello, {this.props.name}</h1>;      } }

• Make sure you have a good understanding of state and how to properly use it. Understanding the pros and cons of using a component’s local state will give you the mental building blocks for when, and when not to, use a different state management solution

  确保您对状态及其正确使用方式有很好的了解。 了解使用组件的本地状态的利弊，将为您在何时以及何时不使用其他状态管理解决方案方面提供思路上的基础

• Learn how to write and use the component lifecycle hooks and when each one may be useful

  了解如何编写和使用组件生命周期挂钩以及何时使用每个挂钩

class MyComponent extends React.Component {   // A couple examples of hooks that I've had to use a lot:

componentDidMount() {      /* useful for initializing or triggering events after the          component renders to the DOM */                                   }          shouldComponentUpdate() {     /* useful for performance purposes and preventing redundant           re-rendering */   }      componentWillReceiveProps() {     /* useful for when you need to trigger changes when new props             come in */   }      render() {          return <h1 className="greeting">Hello, {this.props.name}</h1>;      } }

• Learn how to use PropTypes. It’s an easy way to get some basic type checking added to your components

  了解如何使用PropTypes 。 这是将一些基本类型检查添加到组件中的简便方法

import PropTypes from 'prop-types';

class MyComponent extends React.Component {      render() {          return <h1 className="greeting">Hello, {this.props.name}</h1>;      } }Greeting.propTypes = {    name: PropTypes.string };

了解如何构建代码 (Learn how to structure your code)

Once you have the fundamentals down you’ll want to start thinking about how your code is structured.

掌握了基础知识之后，您将开始考虑代码的结构。

Look into the concept of Container and Presentational components. Doing so will help you to understand how to better separate concerns within your React code.

研究容器和表示组件的概念。 这样做将帮助您了解如何更好地在React代码中分离关注点。

If you decide to incorporate a state management solution in the future, such as Redux, then Container components will help with that transition. You’ll know that most of the data passed around your application are coming from containers.

如果您决定在将来合并诸如Redux之类的状态管理解决方案，那么Container组件将帮助实现这一过渡。 您会知道，围绕应用程序传递的大多数数据都来自容器。

If you haven’t already, also think about your folder structure. As your codebase starts to grow, consider how well your folder structure scales.

如果还没有，请考虑一下您的文件夹结构。 随着代码库开始增长，请考虑文件夹结构的扩展程度。

Are files easy to find?

文件容易找到吗？

If you’re working with a team, are they able to intuitively know where specific components are?

如果您与团队合作，他们是否能够直观地知道特定组件在哪里？

Note that you don’t have to have your code in a specific structure immediately. Try to get into the habit of refactoring and improving your code as you learn each of these concepts.

请注意，您不必立即将代码放在特定的结构中。 在学习这些概念时，请养成重构和改进代码的习惯。

“I’m not a great programmer; I’m just a good programmer with great habits.”

“我不是一个伟大的程序员； 我只是一个有良好习惯的优秀程序员。”

— Kent Beck

肯特·贝克

构建解决实际问题的应用程序 (Build an application that solves a real problem)

The best and true way to deeply understand React is by building something with it.

深入理解React的最好，真实的方法是通过构建一些东西。

Try to build something that will actually motivate you to work on it and avoid creating things that you probably already know the solution to.

尝试构建一些可以真正激发您进行工作的东西，并避免创建可能已经知道解决方案的东西。

• Try to incorporate some sort of external data (maybe make an api call) and figure out how to get that data to properly flow throughout your application, taking full advantage of state and props
  尝试合并某种外部数据(也许进行api调用)，并弄清楚如何充分利用状态和道具来使这些数据正确地流遍整个应用程序

• Consider integrating react-router once you have the need to have multiple pages to your application

  一旦需要在应用程序中包含多个页面，请考虑集成react-router

• Use some component libraries to get up and running quickly with a basic look and feel. Know that this amazing JavaScript ecosystem that we have with npm and Github allows you to easily incorporate ready-to-use components into your application
  使用一些组件库以基本的外观快速启动并运行。 知道我们与npm和Github一起拥有的这个惊人JavaScript生态系统使您可以轻松地将现成的组件整合到您的应用程序中
• Deploy your application somewhere. There are so many different ways that you can deploy your code for free. Try one out. There is nothing cooler than seeing your work be deployed out to the internet and being able to share that link to someone else
  将您的应用程序部署到某个地方。 您可以通过多种不同方式免费部署代码。 尝试一下。 没有比将您的工作部署到互联网并能够将链接共享给其他人更酷的了

If you have gotten this far, that’s awesome! Look back at your progress and be proud of it.

如果您走到了这一步，那就太棒了！ 回顾自己的进步，并为此感到自豪。

Hungry for more? Here’s a couple tips.

渴望更多？ 这里有一些提示。

测试您的代码！ (Test your code!)

Make sure you learn how to test your code as early as possible. Use Jest (or your favorite test runner) and Enzyme.

确保您学会了如何尽早测试代码。 使用Jest (或您最喜欢的测试跑步者)和Enzyme 。

Jest and Enzyme are fairly easy to learn and can actually help you to understand how your components work in isolation.

Jest和Enzyme非常易于学习，实际上可以帮助您了解组件如何独立工作。

On top of that, tests make your code safer to refactor and improve, while also serving as dynamic documentation for your components.

最重要的是，测试可以使您的代码更安全地进行重构和改进，同时还可以作为组件的动态文档。

使用高级状态管理 (Use advanced state management)

Does it feel like your state management with setState is becoming too complex? Are you constantly passing props down to multiple levels of descendant components?

感觉您使用setState的状态管理变得太复杂了吗？ 您是否不断将道具传递到多个子孙组件级别？

Time to learn Redux or another flavor of Flux! You’ll need to understand what benefits a state management system brings to the table, and when or when not to use it.

是时候学习Redux或Flux的另一种风味了！ 您需要了解状态管理系统为表带来的好处，以及何时或何时不使用它。

不要重复自己 (Don’t repeat yourself)

If you find yourself writing the same code in multiple places, see if you can instead leverage other strategies for reusing logic. Learn how to create and use Higher-Order Components. This is an advanced technique for reusing component logic. It will improve your knowledge when it comes to component composition.

如果发现自己在多个地方编写相同的代码，请查看是否可以利用其他策略来重用逻辑。 了解如何创建和使用高阶组件 。 这是重用组件逻辑的高级技术。 在组件组成方面，它将提高您的知识。

升级 (Leveling up)

In reality, the list never ends.

实际上，列表永远不会结束。

There are constantly new things that you can learn to improve and add to your applications and skillset.

您可以学习不断改进的新事物，并将其添加到应用程序和技能中。

If you focus on the basics and do most of the above, I believe that you’ll already be on a good path not only with React, but also front-end and JavaScript development in general.

如果您专注于基础知识并完成上述大部分操作，那么我相信您不仅将在React方面走上一条好路，而且在总体上也将进行前端和JavaScript开发。

The JavaScript ecosystem is constantly changing. Keep yourself in the mindset of continuously learning. Keep trying things and find out what works best for you.

JavaScript生态系统不断变化。 保持不断学习的心态。 继续尝试并找出最适合您的方法。

Going forward, your experience will help guide you on what to do next.

展望未来，您的经验将帮助您指导下一步的工作。

Thanks for reading! If you found this post useful, drop some ?? ???? on this post so others can find it!

谢谢阅读！ 如果您发现此帖子有用，请放一些?? ???? 在此帖子上，以便其他人可以找到它！

翻译自: https://www.freecodecamp.org/news/how-to-navigate-the-react-js-ecosystem-without-getting-lost-43db14b00e08/

react.js导航条