你想学习React—世界上最抢手的JavaScript库。但是，您需要采取什么步骤才能到达那里？让我们逐步介绍您成为专业的React开发人员应学习的七个技能。
当您拼凑自己的React学习道路时，很容易感到不知所措，并说：“不可能全部学习。我需要学习的东西太多了！”#React深入编程#
为了成功使用React，请不要尝试学习所有内容。专注于学习正确的事情。
让我们分解一下构建令人印象深刻的应用程序并成为按需开发React所需的七项关键技能：
想要完整的指南成为React专业人士吗？参加为期3天的React电子邮件课程
步骤1：对HTML，CSS和JavaScript的核心基础充满信心
学习React的第一步实际上是倒退了一步。
网络和每个网页的构建块都是HTML，CSS和JavaScript。任何优秀的React开发人员都应该知道如何使用它们。React建立在它们之上，可帮助您创建可在网络上运行的应用程序。
如果您已经使用HTML，CSS和JavaScript构建了某些东西，那么您来对地方了。例如，如果您已经建立了完整的登录页面或小型网站。
在这三种技术中，React与JavaScript的联系最为紧密。React是JavaScript，具有一些附加功能。因此，您需要具备扎实的JavaScript技能。
您应该为React了解哪些JavaScript概念？
基本数据结构：变量，对象和数组数组方法和使用数组数据：.map（）、.filter（）和.reduce（）对函数非常熟悉，对类有点异步JavaScript：承诺，使用FetchAPI发出HTTP请求，异步/等待语法可以帮助您DOM：学习创建，选择和修改HTML元素及其属性对象和数组的解构有助于处理数据许多开发人员声称您应该了解“ES6/ES7/ES8/ESNextJavaScript”（换句话说，最新的JavaScript功能）以更好地学习React。知道更多的JavaScript会有所帮助，但是新功能也会使新学习者分心。
首先，通过构建一些需要JavaScript的小项目，使我对上面列出的JavaScript概念充满信心。之后，您可以看一下该语言的一些新功能。
第2步：了解React基础知识和React挂钩
对JavaScript充满信心之后，就可以学习React及其核心概念了。
这些基础知识都是特定于React的，它们的存在是为了帮助我们使用JavaScript本身没有的模式使用React构建应用程序。
您需要了解什么React基础知识？
如何构造JSX元素（以及与纯HTML的区别）如何呈现（显示）JSX元素以及如何根据特定条件显示或隐藏元素如何将JSX拆分为组件，以及如何重用和组织这些组件以构成我们的应用程序界面。如何使用道具将数据（+JSX元素和组件）传递给组件以及何时传递如何使用状态在组件内存储和更新数据以及如何将状态“提升”到其他组件如何在React中使用事件数据以及如何处理onClick，onChange和onSubmit事件（即按钮，输入和表单中的事件）作为一个已有7年历史的图书馆，React的功能已经随着时间的推移而发生了变化。我经常被问到的一个问题是，您应该首先学习什么：旧语法还是新语法？在年底，React进行了一次大规模更新，其中包括称为ReactHooks的功能。
挂钩是一个很大的进步。它们使React应用变得更简单，更强大，并允许我们编写更少的代码。对您来说重要的是五个核心React挂钩。
您最需要了解哪些五个ReactHooks？
useState：在单个组件中存储和管理数据useEffect：执行诸如HTTP请求之类的操作或使用浏览器APIuseRef：引用JSX元素useContext：从ReactContext访问数据，以便在组件之间共享数据[比传递道具更容易]useReducer：跨多个组件存储和管理数据钩子比这5个还多，但是不需要经常使用其他钩子。是的，您应该学习最新的React功能。立即使用钩子跳入。它们将成为您制作的每个React应用程序的基础。
步骤3：学习从REST和GraphQLAPI获取数据
React应用程序是完整应用程序的前端。在每个应用程序中，您都可能既有供用户交互的React前端，也有与我们的React代码交互的后端。后端是我们从中获取数据并执行其他操作（例如验证用户身份）的地方。
有两种使用后端数据的方法。获取数据的标准方法是从所谓的RESTAPI中获取。RESTAPI是最常见的API形式。而更新的方法来自所谓的GraphQLAPI。
您将在工作中遇到两种类型的API，因此请熟悉使用React与这两种API进行交互。
步骤4：学习使用组件库或实用程序类库为React应用设置样式
每个React应用都需要为其外观设计样式。一种选择是使用普通CSS。您可以编写自己的样式并将其放在单独的样式表中。
但是除了CSS之外，许多React开发人员还使用所谓的组件库来简化样式。组件库为我们提供了具有自己预制样式的可重用组件。React最受欢迎的组件库是MaterialUI。您可以选择许多其他方式。
开发人员还使用提供预制类名的工具，称为实用程序类库。与组件库不同，实用程序类库附带了用于对元素进行样式设置的预制类。您可以通过将类名应用于每个元素来设置应用样式。这样就无需自己编写任何样式。最受欢迎的实用程序类库是TailwindCSS。
作为开发人员，您会遇到这两种情况，因此请熟悉组件库和实用程序类库。
第5步：使用React上下文管理React中的状态
什么是状态管理？这是决定在我们的应用程序中查找数据的位置以及如何使用数据的过程。要管理应用程序各个组件之间的状态，请使用ReactContext。
ReactContext是内置在核心React库中的工具，它使我们能够在不使用道具的情况下跨应用程序组件传递数据。它帮助我们解决了道具钻探的问题，该问题涉及将道具（数据）传递到彼此深度嵌套的组件中。使用ReactContext，我们在创建的上下文上放置一个值，然后使用useContext（）React钩子对其进行访问。
那Redux呢？Redux是一个流行的库，用于管理React应用程序中的状态。它比要构建的大多数应用程序所需的工具复杂得多。尽管对于大型应用程序仍依赖Redux，但是ReactContext对于您制作的任何应用程序都足够了。
另外，通过将ReactHooks和ReactContext相结合，您可以获得Redux的许多好处。与学习额外的库相比，这是一个很大的优势。
步骤6：学习React路由器。尤其是react-router-dom
什么是路由器？我们访问的任何网站都有许多页面，可以通过浏览器的历史记录前进或后退。为了在React中创建这些不同的页面或路由，我们需要使用所谓的路由器。React本身并不带有自己的路由器，因此我们将需要使用第三方库，一个称为react-router-dom的库。
react-router-dom对于在我们的应用中创建页面以及在每个页面中浏览用户都是必需的。它使我们可以创建指向应用程序不同页面的链接，并进行导航或在需要时将其重定向到其他页面。
您需要了解react-router-dom的哪些功能？
如何使用，和组件创建应用程序路线如何使用组件和使用useHistory（）挂钩以编程方式将用户导航到不同页面如何使用路径属性（即）创建动态路线，以及如何使用useParams（）挂钩获取路径值如何使用该组件将用户从受保护的内容重定向（请参见编号7）第7步：了解React中的身份验证模式
经过身份验证的用户是已登录使用我们的应用程序的人。我们想让这些用户访问不同的事物。因此，身份验证与路由齐头并进。这是因为经过身份验证的用户应该能够看到未经身份验证的用户无法看到的某些页面。
关于React开发人员身份验证，你需要了解什么？有一件主要的事。您应该学习如何向经过身份验证的用户显示某些内容，以及如何对未经身份验证的用户隐藏该内容。
作为回顾，这些都是您作为React开发人员需要具备的所有核心技能，能够构建完整的应用程序并作为受聘的前端开发人员工作。
除了这7项技能外，请注意还有许多可以加深您作为开发人员的理解的技能。例如，更多地了解浏览器，HTTP和API。但是，如果遵循所有这些步骤，您将对React有深刻的了解，并能够构建任何规模的应用程序。
最后多说一句，小编是一名python开发工程师，这里有我自己整理的整套python学习资料和路线，想要这些资料的都可以