react實戰課程

by Tomas Eglinskas

由Tomas Eglinskas

在使用React一年后，我學到的最重要的課程 (The most important lessons I’ve learned after a year of working with React)

Starting out with a new technology can be quite troublesome. You usually find yourself in a sea of tutorials and articles, followed by millions of personal opinions. And every single one states that they found the “right and perfect way.”

開始使用新技術可能會很麻煩。 通常，您會在大量的教程和文章中發現自己，然后是數百萬的個人觀點。 每個人都說他們找到了“正確而完美的方式”。

This leaves us debating whether our chosen tutorial will be a waste of time or not.

這使我們爭論我們選擇的教程是否會浪費時間。

Before diving into the ocean, we must understand the underlying concepts of a technology. Then we need to develop a technology-based mindset. If we are starting to learn React, we first have to think in React. Only later on we can start mixing various mindsets into one.

在深入海洋之前，我們必須了解技術的基本概念。 然后，我們需要發展基于技術的思維方式。 如果我們開始學習React，我們首先必須考慮React。 直到后來，我們才可以開始將各種思維方式融合在一起。

In this article we’ll be covering some lessons I learned regarding this mindset from my personal experiences with React. We’ll go over the days at work and nights with personal projects and even the talk I gave at a local JavaScript event.

在本文中，我們將介紹一些我從React的個人經驗中學到的關于這種思維方式的課程。 我們將在白天和晚上進行個人項目，甚至是我在本地JavaScript活動中所做的演講。

So let’s go!

所以走吧！

React不斷發展，因此您必須保持最新 (React is evolving, so you must be up to date)

If you remember the initial announcement of version 16.3.0, you’ll remember how excited everyone was.

如果您還記得版本16.3.0的最初發布，您會記得每個人都很興奮。

Here are some of the changes and improvements we received:

以下是我們收到的一些更改和改進：

• Official Context API
  官方上下文API
• createRef API
  createRef API
• forwardRef API
  forwardRef API
• StrictMode
  嚴格模式
• Component Lifecycle Changes
  組件生命周期變更

The React Core team and all the contributors are doing a great job trying to improve the technology we all adore. And in version 16.4.0 we received Pointer Events.

React Core團隊和所有貢獻者都在努力改善我們都喜歡的技術方面做得很好。 在16.4.0版中，我們收到了指針事件 。

Further changes are surely coming, and it’s only a matter of time: Async Rendering, Caching, version 17.0.0 and many others not yet known.

當然，進一步的更改即將到來，這只是時間問題：異步渲染，緩存，17.0.0版和許多其他尚不為人所知。

So if you want to be at the top, you have to be up to date with things that are happening in the community.

因此，如果您想成為高層，就必須了解社區中正在發生的事情。

Know how things work and why they are being developed. Learn what problems are being solved and how development is being made easier. It’ll really help you out.

了解事情如何運作以及為什么要開發它們。 了解正在解決的問題以及如何使開發變得更容易。 它將真正幫助您。

不要害怕將代碼拆分成較小的夾頭 (Don’t be afraid to split your code into smaller chucks)

React is component-based. So you should leverage this concept and not be afraid to split bigger pieces into smaller ones.

React是基于組件的。 因此，您應該利用這個概念，不要害怕將較大的部分拆分為較小的部分。

Sometimes a simple component can be made of 4–5 lines of code, and in some cases, it is totally fine.

有時，一個簡單的組件可以由4-5行代碼組成，在某些情況下，它完全可以。

Make it so that if a new person jumps in, they won’t need days to understand how everything works.

做到這一點，這樣，如果一個新人跳了進來，他們將不需要幾天的時間來了解一切。

// isn't this easy to understand?

return (  [   <ChangeButton    onClick={this.changeUserApprovalStatus}    text="Let’s switch it!"   />,   <UserInformation status={status}/>   ]);

You don’t have to make components that all have complex logic built-in. They can be only visual. If this improves code readability and testing, and reduces further code smells, it’s a great win for everyone on the team.

您不必制作所有內置了復雜邏輯的組件。 它們只能是視覺的。 如果這可以提高代碼的可讀性和測試能力，并減少進一步的代碼氣味，那么這對于團隊中的每個人都是一個巨大的勝利。

import ErrorMessage from './ErrorMessage';

const NotFound = () => (  <ErrorMessage    title="Oops! Page not found."    message="The page you are looking for does not exist!"    className="test_404-page"  />);

In the above example, the properties are static. So we can have a pure component which is responsible for the website’s error message Not Found, and nothing more.

在上面的示例中，屬性是靜態的。 因此，我們可以使用一個純粹的組件負責網站的錯誤消息“ Not Found ，僅此而已。

Also, if you don’t like having CSS classes as class names everywhere, I would recommend using styled components. This can improve readability quite a lot.

另外，如果您不喜歡到處都有CSS類作為類名，我建議您使用樣式化的組件。 這樣可以大大提高可讀性。

const Number = styled.h1`  font-size: 36px;  line-height: 40px;  margin-right: 5px;  padding: 0px;`;//..

<Container>  <Number>{skipRatePre}</Number>  <InfoName>Skip Rate</InfoName></Container>

If you’re afraid of creating more components because of polluting your folders with files, rethink how you structure your code. I have been using the fractal structure and it’s awesome.

如果由于文件污染文件夾而擔心創建更多組件，請重新考慮如何構造代碼。 我一直在使用分形結構 ，它很棒。

不堅持基礎-變得先進 (Don’t stick to the basics — become advanced)

You might think sometimes that you don’t understand something enough to move on to the advanced stuff. But often times you shouldn’t worry about it too much — take up the challenge and prove yourself wrong.

有時您可能會認為您不了解某些內容，無法繼續學習高級內容。 但是，通常情況下，您不必太擔心–接受挑戰并證明自己做錯了。

By taking up the advanced topics and pushing yourself, you can understand more of the basics and how they are used for bigger things.

通過學習高級主題并推動自己發展，您可以了解更多基礎知識以及如何將它們用于更大的事情。

There are many patterns which are yours to explore:

您可以探索許多模式：

• Compound Components
  復合成分
• High Order Components
  高階組件
• Render Props
  渲染道具
• Smart/Dumb Components
  智能/啞巴組件
• many others (try out Profiling)
  其他許多(嘗試分析)

Explore them all, and you’ll know why and where they are used. You’ll become more comfortable with React.

瀏覽所有內容，您會知道為什么使用它們以及在哪里使用它們。 您將對React更加滿意。

// looks like magic?// it's not that hard when you just try

render() {  const children = React.Children.map(this.props.children,   (child, index) => {      return React.cloneElement(child, {        onSelect: () => this.props.onTabSelect(index)    });     });   return children;}

Also, don’t be afraid to try something new at your work — within certain boundaries, of course! Don’t just experiment on personal projects.

另外，不要害怕在工作中嘗試一些新事物-當然，在一定范圍內！ 不要只是嘗試個人項目。

People will ask questions, and that is normal. Your task is to defend your work and decisions with strong arguments.

人們會問問題，這很正常。 您的任務是以有力的論據捍衛您的工作和決策。

Your aim should be to solve an existing problem, make further development easier, or just clean some pasta in the code. Even if your suggestions are rejected, you’ll go home knowing more than by sitting silent.

您的目標應該是解決現有問題，使進一步開發變得容易，或者只是清理代碼中的某些意大利面。 即使您的建議被拒絕，您也可以坐在家里而不是沉默。

不要讓事情過于復雜 (Don’t over-complicate things)

This might sound like a counter argument, but it’s different. In life, and everywhere, we must have balance. We shouldn’t over-engineer to show off. We must be practical. Write code which is easy to understand and fulfills its purpose.

這聽起來像是一個反論點，但是卻有所不同。 在生活中，在任何地方，我們都必須保持平衡。 我們不應該過度設計來炫耀。 我們必須務實。 編寫易于理解并實現其目的的代碼。

If you don’t need Redux, but you want to use it because everyone uses without knowing it’s true purpose, don’t. Have an opinion and don’t be afraid to stand up for yourself if others push you.

如果您不需要Redux，但又想使用它，因為每個人都在使用它而不知道它的真正目的，那就不要。 有意見，不要怕別人推你而站起來。

Sometimes you might think that by leveraging the latest technologies and writing complex code you’re saying to the world:“I’m not a junior, I am becoming a mid/senior. Look what can I do!”

有時您可能會認為，通過利用最新技術并編寫復雜的代碼，您對世界說的是：“我不是大三，我正在成為中高級。 看我該怎么辦！”

To be honest, that was my mindset in the beginning of my developer journey. But over time you understand that the code which was written without showing off or because “it works” is easier to live with.

老實說，這就是我開發者旅程之初的想法。 但是隨著時間的流逝，您會了解編寫的代碼不會炫耀，也不會因為“有效”而易于使用。

1. Co-workers can work on your projects and you’re not the only person who’s responsible for developing / fixing / testing <insert task>.

   同事可以從事您的項目，而您不是唯一負責開發/修復/測試＆ lt; insert tas k>的人。

2. The team can understand what others did without sitting through a long meeting. A couple of minutes is enough to discuss.
   團隊無需長時間開會即可了解其他人的所作所為。 幾分鐘就足夠討論了。
3. When your colleague goes out for a two week vacation, you can take over their task. And you won’t have to work on it for 8 hours, because it can be done in an hour.
   當您的同事出去度假兩個星期時，您可以接管他們的任務。 您無需花8個小時就可以完成它，因為它可以在一小時內完成。

People respect people who make other people’s lives easier. Thus if your goal is to gain respect, move up the ranks, and improve, aim to code for the team and not yourself.

人們尊重使別人的生活更輕松的人。 因此，如果您的目標是贏得尊重，晉升并提高自己，則應為團隊而非自己編寫代碼。

You’ll become everyone’s favorite team player.

您將成為每個人最喜歡的團隊合作者。

重構，重構和重構-這是正常的 (Refactor, refactor and refactor — it’s normal)

You will change your mind dozens of times, although the project manager will change theirs more often. Others will criticize your work, and you will criticize it. As a result, you’ll have to change your code many, many times.

您會改變主意數十次，盡管項目經理會更頻繁地改變主意。 別人會批評您的工作，您也會批評它。 結果，您將不得不多次更改代碼。

But don’t worry, it’s a natural learning process. Without faults and errors we cannot improve.

但是不用擔心，這是一個自然的學習過程。 沒有錯誤和錯誤，我們就無法改善。

The more times we fall down, the easier it becomes to get back up.

我們跌倒的次數越多，就越容易恢復。

But here’s a hint: make sure you test your current software. Smoke, unit, integration, snapshot — don’t be shy of them.

但是，這里有一個提示：請確保您測試當前的軟件。 冒煙，單元，集成，快照-不要害羞。

Everyone has faced or will face a scenario when a test could have saved precious time.

每個人都面臨或將要面對一種情況，那就是測試可以節省寶貴的時間。

And if you, like many people, think that they are a waste of time, just try thinking a little different.

而且，如果您像許多人一樣認為自己在浪費時間，請嘗試一些不同的想法。

1. You won’t have to sit with your colleague explaining how things work.
   您無需與同事坐在一起解釋事情的運作方式。
2. You won’t have to sit with your colleague explaining why things broke.
   您無需與同事坐在一起解釋事情為什么破裂。
3. You won’t have to fix bugs for your colleague.
   您不必為同事修復錯誤。
4. You won’t have to fix bugs which were found after 3 weeks.
   您無需修復3周后發現的錯誤。
5. You will have time to do stuff you want.
   您將有時間做自己想做的事情。

And these are quite big benefits.

這些都是很大的好處。

如果你喜歡它，你會蓬勃發展 (If you love it, you’ll thrive)

Over the previous year, my goal was to get better at React. I wanted to give a talk about it. I wanted others to enjoy it with me.

去年，我的目標是在React上變得更好。 我想談一談。 我希望別人和我一起享受它。

I could sit all night coding non-stop, watching various talks and enjoying every minute of it.

我可以整夜不停地編寫代碼，觀看各種演講并享受每一分鐘。

The thing is, if you want something, somehow everyone starts helping you. And last month, I gave my first React talk to a crowd of 200 people.

問題是，如果您需要某些東西，每個人都會以某種方式開始幫助您。 上個月，我對200人進行了第一次React演講。

During this year period I became stronger and more comfortable with React — the various patterns, paradigms, and inner workings. I can have advanced discussions and teach others about topics that I was afraid to touch.

在這一年中，我變得更加堅強，對React感到更加舒適-各種模式，范例和內部工作方式。 我可以進行高級討論，并教別人一些我怕碰到的話題。

And today I still feel the same excitement and enjoyment I felt a year ago.

今天，我仍然感到與一年前一樣的激動和享受。

Therefore I would recommend everyone to ask themselves: “Do you enjoy what you do?”

因此，我建議大家自問：“您喜歡自己的工作嗎？”

If not, continue looking for that special piece which you can talk about for hours, learn about every night, and be happy.

如果沒有，繼續尋找您可以談論幾個小時的特殊作品，每晚學習并快樂。

Because we have to find something that is closest to our hearts. Success cannot be forced, it must be achieved.

因為我們必須找到最貼近我們內心的東西。 成功不能被強迫，它必須被實現。

If I could go back a year in time, this is what would I say to myself to prepare before the big journey ahead.

如果我能回到過去的一年，這就是我要對自己說的話，準備在前進的大路上。

Thank you for reading!

感謝您的閱讀！

If you found this article helpful, ???.

如果您發現這篇文章有幫助，???。

翻譯自: https://www.freecodecamp.org/news/mindset-lessons-from-a-year-with-react-1de862421981/

react實戰課程