过去几个月我一直在使用React和React-Native。我已经发布了两个应用程序作为产品，KivenAa(React)和PollenChat(ReactNative)。当我开始学习React时，我一直在寻找不仅能教我如何用React编写应用程序的东西（博客、视频、课程等），我还希望它能帮助我准备面试。我发现的大部分材料都集中在一个方面。因此，本文针对的是那些希望理论与实践最佳结合的读者。我将告诉您一些理论，以便您了解幕后发生的事情，然后我将向您展示如何编写一些React.js代码。如果你喜欢视频格式，我把整个课程上传到[YouTube][https://youtu.be/WJ6PgzI16I4]，你可以去看看。让我们开始吧……React.js是一个用于构建用户界面的JavaScript库。您可以构建各种单页应用程序。例如，您希望实时显示用户界面变化的聊天软件和电子商务门户。一切皆组件React应用程序由组件组成，其中许多组件相互嵌套。您可能会问：“但是什么是组件？”组件是一段可重用的代码，它定义了特定功能在UI上的外观和行为方式。例如，按钮是一个组件。让我们看看下面的计算器，当您尝试计算2+2=4-1=3（简单的数学问题）时，您会在Google上看到它。红色标记表示组件。如上图所示，这个计算器有很多区域，比如显示窗口和数字键盘。所有这些都可以是许多单独的组件，也可以是一个巨大的组件。这取决于你在React中分解和抽象事物的程度。您分别为所有这些组件编写代码，然后将它们组合到一个容器中，而容器又是一个React组件。通过这种方式，您可以创建可重用的组件，最终的应用程序将是一组协同工作的独立组件。这是您可以实现上述原则并在React中编写计算器的方法。<计算器>。..是的！它看起来像HTML代码，但事实并非如此。我们将在后面的部分中详细探讨它。设置我们的Playground本教程重点介绍React的基础知识。它不偏向于网络或ReactNative（开发移动应用程序）。所以，我们会使用在线编辑器，这样在学习React能做什么之前，就可以避开web或者native的具体配置。我已经在codepen.io上为读者搭建了一个开发环境。只需点击链接并阅读所有HTML和JavaScript格式的评论。控制组件我们已经看到，React应用程序是各种组件的集合，结构为嵌套树。因此，我们需要某种机制将数据从一个组件传递到另一个组件。在“props”中，我们可以使用props对象将任意数据传递给我们的组件。React中的每个组件都有一个props对象。在学习如何使用props之前，我们先了解一下功能组件。a)功能组件在React中，功能组件使用您通过props对象传递给它的任何数据。它返回一个描述React应该呈现的UI的对象。功能组件也称为无状态组件。让我们编写我们的第一个功能组件。functionHello(props){return
{props.name}
}就这么简单。我们只是将props作为参数传递给普通的JavaScript函数并有一个返回值。嗯？返回什么？那个
{props.name}
。它是JSX（JavaScript扩展）。我们将在后面的章节中详细了解它。上面的函数将在浏览器中呈现以下HTML。
rajat
请阅读以下关于JSX的部分，其中解释了如何从我们的JSX代码段HTML中获取它。我如何在React应用程序中使用这个功能组件？很高兴你问！就像下面一样简单。
上述代码中Hello组件中属性name变为props.name，属性age变为props.age。记住！你可以将一个React组件嵌套在另一个React组件中。让我们在codepen游乐场中使用Hello组件。将ReactDOM.render()中的div替换为我们的Hello组件，然后在底部窗口中查看更改。functionHello(props){return
{props.name}
}ReactDOM.render(
,document.getElementById('root'));但是如果你的组件有一些内部状态呢？例如，像下面的Counter组件一样，它有一个内部计数变量，当按下+和-键时该变量会发生变化。具有内部状态的React组件b)基于类的组件基于类的组件有一个额外的属性状态，您可以使用它来存储组件私有数据。我们可以使用类表示法重写我们的Hello。由于这些组件具有状态，因此这些组件也称为有状态组件。classCounterextendsReact.Component{//这个方法应该出现在你的组件中render(){return(
{this.props.name}
);我们从React库Classes继承React.Component以在React中创建基于类的组件。在此处了解有关JavaScript类的更多信息。render()方法必须存在于您的类中，因为React会查找此方法以了解它应该在屏幕上呈现什么UI。为了使用这个内部状态，我们首先要在组件中使用这个内部状态，我们首先要在组件类的构造函数中初始化状态对象，如下所示。Counter类扩展了React。组件{constructor(){super();//定义组件的内部状态this.state={name:'rajat'}}render(){return(
{this.state.name}
);}}//Usage://在你的React应用程序中：
同样，可以使用this.props对象在我们基于类的组件中访问props。要设置状态，请使用React.Component的setState()。我们将在本教程的最后一部分看到一个这样的例子。提示：切勿在render()函数内部调用setState()，因为setState会导致组件重新渲染，从而导致***循环。基于类的组件有一个可选属性“state”。除了状态之外，基于类的组件还有一些生命周期方法，例如componentWillMount()。您可以使用它们来执行诸如初始化状态之类的操作，但这超出了本文的范围。JSXJSX是JavaScriptExtended的缩写，是一种编写React组件的方式。使用JSX，您可以在类似XML的标记中获得JavaScript的全部功能。您将JavaScript表达式放在{}中。下面是一些有效的JSX示例。
按我！按我{3+1}次！; 它的工作方式是您编写JSX来描述您的UI应该是什么样子。像Babel这样的代码转换器将此代码转换为一堆React.createElement()调用。React库然后使用这些React.createElement()调用来构建DOM元素树。对于React的webview或ReactNative的nativeview，它会被保存在内存中。然后，React会计算它在呈现给用户的UI中在内存中为这棵树建模的效率。这个过程称为和解。计算完成后，React对屏幕上的真实UI进行更改。React如何将您的JSX变成一棵描述应用程序UI的树。您可以使用Babel的在线REPL来查看在您编写一些JSX时React实际输出的内容。使用BabelREPL将JSX转换为纯JavaScript由于JSX只是React.createElement()调用的语法糖，因此可以在没有JSX的情况下使用React。现在我们已经理解了所有的概念，我们已经准备好编写我们在之前的GIF图中看到的计数器组件。代码如下，希望您已经知道如何在我们的playground上渲染它。类Counter扩展React.Component{constructor(props){super(props);this.state={count:this.props.start||0}//以下绑定是使`this`在回调中工作所必需的this.inc=this.inc.bind(this);this.dec=this.dec.bind(this);}inc(){this.setState({count:this.state.count+1});}dec(){this.setState({count:this.state.count-1});}render(){return(
);}}以下是关于上述代码的一些要点。JSX使用驼峰式命名，所以按钮的属性是onClick，而不是我们在HTML中使用的onclick。绑定this是处理回调所必需的。请参阅上面代码中的第8行和第9行。最终的交互代码位于此处。至此，我们的React速成课程结束了。我希望我已经阐明了React的工作原理，以及如何使用React使用更小且可重用的组件来构建更大的应用程序。
