react项目开发步骤_成为专业React开发人员的31个步骤

react项目开发步骤

我为达到可雇用水平而进行的每个项目和课程。 (Every single project and course I took to reach a hireable level.)

Before I learned how to code, I used to ask developers how much time it took them to learn their craft — and how they managed to do it.

在学习编码之前，我曾经问过开发人员学习他们的技术需要花费多少时间，以及他们如何做到这一点。

They would answer stuff like 1.5 years, a bachelor's degree or I just started playing around with it - none of which really satisfied my curiosity. I wanted to know specifically how much work they had put in, as I was wondering if I could ever possibly do it myself (which I doubted, as it seemed close to impossible).

他们会回答诸如1.5年 的学历，学士学位或我刚开始尝试的事情 -没有一个能真正满足我的好奇心。 我想特别知道他们做了多少工作，因为我想知道自己是否可以做(我对此表示怀疑，因为这似乎几乎是不可能的)。

Fast forward a few years, and I had done the transition from a hobby coder to a professional React developer myself. Now, I think I’m able to give the answer I was looking for.

几年过去了，我本人已经完成了从业余编码员到专业React开发人员的过渡。 现在，我认为我能够给出我想要的答案。

So if you’re an amateur wondering how much effort it takes to become a professional front-end developer: this post is for you.

因此，如果您是一个业余爱好者，想知道要成为一名专业的前端开发人员需要付出多少努力：这篇文章适合您。

However, I'm not claiming that my path is the most efficient one. It took me a long time to realize I wanted to work with React, and I wasn't determined to reach a hirable level until I started a coding bootcamp.

但是，我并不是说我的道路是最有效的道路。 我花了很长时间才意识到我想和React一起工作，直到开始编码训练营之前，我还没有决心要达到一个可雇用的水平。

If you're looking for the absolutely fastest route, I'll be bold enough to recommend our intro course on React, and our upcoming advanced course, as they are built with this goal in mind.

如果您正在寻找绝对最快的路线，那么我将大胆地推荐我们关于React的入门课程以及我们即将推出的高级课程 ，因为它们是为实现这一目标而构建的。

Now, let's have a look at all the courses and projects I’ve done since I got started, along with some advice I picked up on the way.

现在，让我们来看看自开始以来我完成的所有课程和项目，以及从中获得的一些建议。

第一阶段：简介 (PHASE ONE: INTRODUCTION)

I’ve divided my learning path into three phases; introduction, hobby and bootcamp.

我将学习路径分为三个阶段。 介绍 ， 爱好和训练营 。

My introductory phase started in 2012 and lasted for about two years. The progress was slow and it all happened quite sporadically, without proper structure or goals. In hindsight, I wish I had started off more seriously, I wish I had committed to code for 30 minutes a day. This brings me to my first piece of advice for aspiring developers:

我的入门阶段始于2012年，历时约两年。 进展缓慢，没有适当的结构或目标，这都是零星发生的。 事后看来，我希望我能更认真地开始工作，希望我承诺每天进行30分钟的编码。 这为有抱负的开发人员提供了第一条建议：

Remember that it’s never too early to start being serious about your learning. Your future self will thank you for this.

请记住，认真对待您的学习永远不会太早。 您未来的自我会为此感谢您。

密码学 (Codecademy)

As many others I started off with Codecademy, completing four of their tracks: JavaScript, HTML & CSS, jQuery, and PHP. This gave me a mental model of what coding was. If you’ve never written a single line of code before, Codecademy is an excellent starting point. It's almost as good as Scrimba ;)

与其他许多人一样，我从Codecademy开始学习，完成了他们的四个方面：JavaScript，HTML和CSS，jQuery和PHP。 这给了我关于什么是编码的思维模型。 如果您以前从未编写过一行代码，那么Codecademy是一个很好的起点。 这几乎和斯克林巴一样好;)

儿童互动应用 (Interactivity For Kids Apps)

After Codecademy, I knew just enough to do simple interactivity for a few kids book apps my startup created. It consisted of simple web animations: tap somewhere and an image fades in and out while triggering a sound.

加入Codecademy之后，我知道足以为一些由我的初创公司创建的孩子预订应用程序进行简单的交互。 它由简单的网络动画组成：点击某处，图像在触发声音的同时淡入淡出。

30天学习jQuery (30 Days To Learn jQuery)

Fast forward to the end of 2013. I did the 30 days to learn jQuery course at TutsPlus made by Jeffrey Way, which is an excellent tutor. He takes you through a lot of interesting small projects.

快进到2013年底。我花了30天的时间在Jeffrey Way制作的TutsPlus 上学习jQuery课程 ，这是一位出色的导师。 他带您完成许多有趣的小项目。

If you’d like to learn how to create interactive websites, I’d recommend you to start with jQuery over Vanilla JavaScript because it’s easier to learn.

如果您想学习如何创建交互式网站，建议您先使用基于Vanilla JavaScript的jQuery，因为它更易于学习。

第二阶段：兴趣 (PHASE 2: HOBBY)

Apart from the TutsPlus course, I did very little coding in 2013, as I spent all my time on my startup. Also, I didn’t really believe I could ever become a professional developer.

除了TutsPlus课程外，2013年我很少编写代码，因为我将所有时间都花在了创业上。 另外，我真的不相信自己会成为专业的开发人员。

However, I got started again upon discovering Udacity at the beginning of 2014. This time I was more serious and set the goal of educating myself at least one hour per day.

但是，在2014年初发现Udacity之后，我又重新开始了。这次我更加认真，并设定了每天至少学习一小时的目标。

I find process-based goals to be much more effective than outcome-based goals. It feels less overwhelming, and the results always come automatically.

我发现基于过程的目标比基于结果的目标要有效得多。 感觉不那么令人沮丧，结果总是自动出现的。

Udacity —计算机科学入门 (Udacity — Intro To Computer Science)

The CS101 course on Udacity made by Dave Evans is a great intro to both computer science and Python. This is where I properly learned about data types, functions, conditionals and other stuff, though I only finished 80% of it. To be honest, I’ve never finished a single MOOC, as I quit as soon as I get bored.

戴夫·埃文斯 ( Dave Evans )撰写的关于Udacity的CS101课程对计算机科学和Python都有很好的介绍。 在这里，我可以正确地学习数据类型，函数，条件和其他内容，尽管我只完成了其中的80％。 老实说，我从来没有完成过一次MOOC，因为我一无聊就退出了。

Don’t feel bad for dropping out of a course — you’re not in school anymore. Be aware of boredom, as it’s poisonous to your motivation.

不要因为辍学而感到难过-您不再上学了。 要注意无聊，因为它会刺激您的动力。

Udacity — Web开发 (Udacity — Web Development)

I followed up with CS253, created by Reddit co-founder Steve Huffman. It takes you through building a blog and is a natural next step after CS101.

我跟进了Reddit联合创始人史蒂夫·霍夫曼(Steve Huffman)创建的CS253。 它会带您构建博客，这是CS101之后的下一步。

简单的Javascript游戏 (Simple Javascript Game)

At some point in early 2014, I became interested in creating JavaScript games. I started off with this tutorial, which takes you through creating a very simple JS game, where you control a character with the arrow keys in order to catch goblins.

在2014年初的某个时候，我对创建JavaScript游戏产生了兴趣。 我从本教程开始，它带领您完成一个非常简单的JS游戏，在该游戏中，您可以使用箭头键控制角色来捉住妖精。

JavaScript中的扫雷器 (Mine Sweeper In JavaScript)

I followed up with the classic Mine Sweeper game, as explained in this tutorial. This was tough, and I remember feeling a bit overwhelmed by the logic. Though I like to follow through regardless of not always understand what's going on (which I write more about here).

如本教程所述，我继续了经典的扫雷游戏。 这很艰难，我记得自己的逻辑有点不知所措。 尽管我不喜欢总是了解发生了什么，但我喜欢继续进行下去(我将在此处写更多内容)。

蛇在JavaScript (Snake In JavaScript)

At some point, I also created a snake game. I can’t remember exactly which tutorial I followed, but it could have been the one below.

在某些时候，我还创建了一个蛇游戏。 我不记得确切地遵循了哪个教程，但是可能是下面的教程。

jQuery游戏—儿童购物 (jQuery Game — Shopping For Kids)

During Easter of 2014 I built a demo for an educational app for kids, as our startup had gotten a request from a company that was going to turn their Flash games into HTML5. Though we didn’t take the job, I wanted to know if I had enough coding skills to do a job that I theoretically could get paid for.

在2014年复活节期间，我为一家儿童教育应用程序制作了一个演示，因为我们的初创公司收到了一家公司的要求，该公司打算将其Flash游戏转换为HTML5。 尽管我们没有接受这份工作，但我想知道我是否有足够的编码技能来完成我理论上可以得到的工作。

It’s surprising how little knowledge you need to start generating a little bit of money on your coding skills. Try and get to this point as soon as possible.

令人惊讶的是，您需要很少的知识来开始为您的编码技能赚钱。 尝试并尽快达到这一点。

Udemy —为企业家编码 (Udemy — Coding For Entrepreneurs)

In the early summer, I did the awesome Coding For Entrepreneurs tutorial by Justin Mitchel. It’s a completely project-based course and follows a learning by doing methodology. It’s a great intro to the Django Python framework.

在初夏，我做了 Justin Mitchel撰写 的精彩的《 Coding For Entrepreneurs》教程 。 这是一门完全基于项目的课程，遵循通过做方法学的学习 。 这是Django Python框架的精彩介绍。

While the Udacity courses will give you a foundation of CS concepts, this one will enable you to use your skills practically. Combining these types of courses is critical.

虽然Udacity课程将为您提供CS概念的基础，但该课程将使您能够实际使用技能。 结合这些类型的课程至关重要。

众议院网站 (House Of Fam Website)

My first paid job as a developer was to code a simple website (which my co-founder designed) for a Norwegian fashion designer. It’s a great feeling to finally get paid for doing your hobby, as you realize you can finance growing your skills further, even though we made peanuts compared to the hours we put into it.

作为开发人员，我的第一份报酬工作是为挪威的时装设计师编写一个简单的网站 (由我的联合创始人设计)。 终于为自己的业余爱好而获得报酬，这是一种很棒的感觉，因为您意识到，即使与我们投入的时间相比，我们做得还算花生，但仍可以进一步提高自己的技能。

Don’t worry about the hourly rate being below the minimum wage for your first job. It’s still infinitely more than you got paid for your last project.

不必担心小时工资低于您第一份工作的最低工资。 它仍然远远超过您上一个项目的收入。

迪斯科手指网站 (The Disco Fingers Website)

I also built a simple landing page for our music creation app Disco Fingers, which our startup launched in late 2014.

我还为音乐创作应用程序Disco Fingers构建了一个简单的登录页面 ，该应用程序于2014年底启动。

迪斯科手指热门歌曲履带 (Disco Fingers Top Songs Crawler)

After launching Disco Fingers I wrote a Python script that crawled our internal list of Disco Fingers beats and tweeted a link to the most popular beat every day. This taught me a lot about APIs, cron jobs and scraping.

启动Disco Fingers之后，我编写了一个Python脚本，该脚本抓取了我们的Disco Fingers节拍的内部列表，并在Twitter上发布了指向每天最受欢迎的节拍的链接。 这教会了我很多关于API，cron作业和抓取的知识。

Creating a script that saves you time feels empowering. I’d recommend you to try this out.

创建节省您时间的脚本让人感到很权能。 我建议您尝试一下。

Udacity —监督学习(ML) (Udacity — Supervised Learning (ML))

At the end of 2014, I started getting fascinated by machine learning, so I took a few lessons from this course. I‘d recommend it if you’re interested in getting a mental model of what machine learning is. But it doesn’t involve any coding, which was kind of disappointing.

2014年底，我开始着迷于机器学习，因此我从本课程中吸取了一些教训。 如果您有兴趣获得关于什么是机器学习的心理模型的建议，我建议您使用它。 但这不涉及任何编码，这有点令人失望。

CoderByte挑战 (CoderByte Challenges)

In order to improve my fundamental skills (which you can read more about here) I solved a lot of challenges on CoderByte.

为了提高我的基本技能(您可以在此处了解更多 )，我解决了CoderByte上的许多挑战。

井字游戏JavaScript (Tic Tac Toe In JavaScript)

I also built a Tic Tac Toe game as a part of my applications to various coding bootcamps.

我还开发了一个Tic Tac Toe游戏，作为我各种编码训练营应用程序的一部分。

第三阶段：引导营 (PHASE THREE: BOOTCAMP)

At this point in time, I was good enough to create simple scripts and knew how to deploy a Django website if I followed the Coding For Entrepreneurs formula. But I was still was far from able to take on a job as a developer. This became my goal after our startup failed, so I applied for a bunch of coding bootcamps and finally chose Founders and Coders (FAC) in London.

在这一时间点上，我足够擅长创建简单的脚本，并且知道如果遵循“企业家编码”公式，该如何部署Django网站。 但是我离开发人员的工作还很遥远。 在我们的创业失败之后，这成为我的目标，因此我申请了一堆编码训练营 ，最后选择了伦敦的创始人和编码者 (FAC)。

FAC is built around weekly projects. Building these projects involved reading a lot of tutorials and taking small online courses — not all of which I remember. So I’m linking to the GitHub repos instead, in addition to the assignments. I’ve also noted which skills we gained from each task.

FAC围绕每周项目而建。 建立这些项目需要阅读很多教程并参加小型在线课程，而我记得的并不是全部。 因此，除了分配之外，我还链接到GitHub存储库。 我还指出了我们从每个任务中获得了哪些技能。

第一周：团队博客 (Week 1: Team blog)

A basic blog using Github Pages. Source code is available at this repo, and the assignment here. Skills: GitHub Pages, CSS, jQuery, Jekyll.

使用Github Pages的基本博客 。 源代码可在此版本库中找到 ，并在此处进行分配 。 技能：GitHub Pages，CSS，jQuery，Jekyll。

第二周：Guardian API (Week 2: The Guardian API)

A website that pulls in content from the Guardian API. Source code in this repo, and the assignment here. Skills: Web APIs, Ajax, JSON.

一个从Guardian API提取内容的网站。 此仓库中的源代码，以及此处的赋值 。 技能：Web API，Ajax，JSON。

第三周：附近的东西 (Week 3: Nearby Stuff)

A social wall that displays nearby tweets. Assignment & Repo. Skills: Servers, Node.js.

显示附近推文的社交墙。 分配和回购 。 技能：服务器，Node.js。

第四周：Instagram和Twitter搜索 (Week 4: Instagram & Twitter Search)

An app where you can search for tweets and Instagram posts. Repo & Assignment. Skills: Heroku, MongoDB.

一个可以在其中搜索推文和Instagram帖子的应用程序。 回购和转让 。 技能：Heroku，MongoDB。

第五周：D3 Tweet可视化 (Week 5: D3 Tweet Visualization)

This was the D3.js week on FAC. We experimented with how to create visualizations. Assignment & Repo.

这是FAC上的D3.js周。 我们尝试了如何创建可视化。 分配和回购 。

第六周：笔记应用 (Week 6: Note Taking App)

Our first introduction to React.js, which I immediately enjoyed working with. Assignment & Repo

我们对React.js的第一个介绍，我立即喜欢上它。 分配和回购

第七周：博客1.0 (Week 7: Blog 1.0)

A simple blog with authentication. Skills: Server side rendering, cookies. Assignment & repo.

一个带有身份验证的简单博客。 技能：服务器端渲染，cookie。 分配和回购 。

第八周：博客2.0 (Week 8: Blog 2.0)

This time we added more authentication methods, e.g. Twitter, Facebook, and email signup, and used the Hapi.js framework. Assignment & repo. Skills: Hapi.js

这次我们添加了更多身份验证方法，例如Twitter，Facebook和电子邮件注册，并使用了Hapi.js框架。 分配和回购 。 技能：Hapi.js

第9周：关键字王 (Week 9: Keyword King)

In the ninth week, we got to build whatever we wanted. Our team built a site that analyzes your App Store keywords and tells you which ones are worthless. Repo is here. Skills: jQuery, Heroku, APIs.

在第九周，我们必须构建我们想要的任何东西。 我们的团队建立了一个网站，可以分析您的App Store关键字，并告诉您哪些关键字毫无价值。 回购在这里。 技能：jQuery，Heroku，API。

普雷迪卡洛特爵士 (Sir Predictalot)

In week ten we started doing projects for clients, making a little bit of money. Our first one was a prototype for a Tinder’ish news predictions app. Repo.

在第十周，我们开始为客户做项目，赚了点钱。 我们的第一个是Tinder'ish新闻预测应用的原型。 回购 。

儿童益智 (Kids Puzzle)

A kids puzzle based upon a Norwegian kids book series named Troll-Olav. Repo

一个基于挪威儿童读物系列Troll-Olav的儿童益智游戏。 回购

评价我的东西 (RateMyStuff)

A social network based around image rating. (I unfortunately don’t have an image of this one.) Repo

基于图像评级的社交网络。 (我很遗憾没有这一项的图像。) 回购

压扁 (Squish)

A tool for students to help them repeat and remember what they have learned. Repo

学生使用的工具，可以帮助他们重复学习并记住所学。 回购

Coursera —机器学习入门 (Coursera — Intro To Machine Learning)

At some point during FAC I got started with this course. As usual, I did not finish it but still learned a lot.

在FAC的某个时候，我开始了这门课程。 和往常一样，我没有完成它，但仍然学到了很多东西。

机器学习周 (Machine Learning Week)

I also did a one-week machine learning stunt, where I tried to learn as much ML as possible. This involved a range of tutorials and trial and error, which you can read more about in this article.

我还做了一个为期一周的机器学习特技，在那里我尝试学习尽可能多的ML。 这涉及一系列教程和反复试验，您可以在本文中了解更多信息。

得到一份工作 (Getting a job)

After FAC finished I moved back home, and after about a month I got a job as a React developer at Xeneta, where I worked for a little over a year. I hope this article has helped you get an impression of the amount of work it takes to become a developer.

FAC完成后，我搬回了家，大约一个月后，我在Xeneta担任了React开发人员的工作 ，在那儿工作了一年多。 我希望本文能帮助您了解成为一名开发人员所需的大量工作。

If you'd like to become a React developer yourself, I'd strongly consider the courses we have one Scrimba. Start with the Learn React For Free course, and then sign up for the waitlist for our upcoming advanced React course as well.

如果您想自己成为一名React开发人员，我强烈考虑我们拥有一门Scrimba的课程。 从“ 免费学习React”课程开始，然后注册我们即将推出的高级React课程的候补名单 。

Good luck :)

祝好运 ：)

翻译自: https://www.freecodecamp.org/news/31-steps-to-become-a-professional-react-developer/

react项目开发步骤