如何创建你的第一个React项目并创建你的第一个组件

吴欣
200 阅读4分钟

TLDR; 在这篇文章中，你将学习如何用Snowpack搭建一个React项目的脚手架，并创建你的第一个React组件。这是来自我的免费React书籍

在Twitter上关注我，很高兴接受你对主题或改进的建议/Chris

为什么是React

React可以让你构建SPA，即单页应用程序。React目前在GitHub上有19万颗星，并被一些业内最大的公司所使用。

组件的内容和原因

React，像许多其他帮助你建立SPA应用程序的库和框架一样，使用组件。组件是孤立的片段，能够运行特定的信息，如产品或广告，有时甚至可能有自己的状态。通过使用组件，你创造了一个很好的逻辑分离，同时也使你的代码在一个多开发者团队中更容易维护。

组件的例子

在React中，你可以使用基于类的方法或基于函数的方法创建一个组件。

基于类的
在基于类的方法中，你的代码看起来像这样。

class Banner extends React.Component {
  render() {
      return (
        <div>I am a Banner Component</div>
      );
    }
}

上面，你的组件继承自React.Component ，并有一个render() 方法。该方法最终会运行JSX，并在编译阶段转换为HTML。

基于函数

在基于函数的方法中，你的组件是一个函数，最后返回JSX。下面是上述基于类的组件的样子。

const Banner = () => <div>I am a Banner Component</div>;

//alt II
function Banner {
  return <div>I am a Banner Component</div>
}

为什么选择Snowpack

在构建React应用程序时，我们需要解决两个主要问题。

  • 模块，我们希望能够将我们的代码划分到不同的文件中，以保证秩序和维护等原因。
  • JSX，我们需要一种方法来将JSX转译为HTML和JavaScript。

现在有很多工具可以让你达到这个目的，比如Webpack、Parcel等等。Snowpack是一个相对较新的工具，我发现它是一个开始学习React的好选择，因为你可以从简单的开始，几乎没有配置，它也很快速，这对你以后建立更大的项目没有影响。

参考资料

练习 - 用Snowpack设置你的React项目

让我们用Snowpack创建一个React项目。我们将从Snowpack项目的脚手架开始，之后再添加React需要的部分。

  1. 通过运行下面的命令创建一个新项目。
   npx create-snowpack-app app --template @snowpack/app-template-minimal
  1. 运行npm install ，添加React专用库。
   npm install react react-dom --save
  1. 重命名你的入口点文件。
   mv index.js index.jsx
  1. 在index.jsx中添加以下内容。
   import React from 'react';

   import ReactDOM from 'react-dom';
   ReactDOM.render(
     <div>My app</div>, 
     document.getElementById('root')
   );
  1. 在index.html的脚本标签上方添加以下一行。
   <div id="root"></div>
  1. 用npm start运行应用程序
   npm start

现在你应该看到 "我的应用程序 "在http://localhost:8080。

这将创建一个子目录app。

练习 - 创建你的第一个组件

  1. 创建一个文件Jedi.jsx，并赋予它以下内容。
    import React from 'react';

    class Jedi extends React.Component {
      render() {
        return (
          <div>I am a Jedi Component</div>
        );
      }
    }

    export default Jedi;

上面我们定义了类Jedi ，并让它继承于React.Component 。此后我们定义了方法render() ，该方法定义了我们的组件将输出什么。我们返回一个JSX语句作为输出。

使用组件

现在我们有了我们的组件，我们可以轻松地使用它。

  1. 打开index.js文件，在顶部添加以下一行。
   import Jedi from './Jedi';
  1. 找到代码中写着ReactDOM.render 的部分，并把它改成如下样子。
   ReactDOM.render(
    <Jedi />,
    document.getElementById('root')
   );

<Jedi> 组件已经被添加到标记中。

  1. 通过在根目录下运行以下命令来测试你的项目。
   npm start

这应该会告诉你，捆绑程序编译正确，你的应用程序在**http://localhost:8080。**

  1. 打开浏览器并导航到**http://localhost:8080。**你应该在网页上看到以下文字。
   I am a Jedi Component

成功了!

练习--创建一个函数组件

让我们来创建另一种类型的组件，这样你就可以进行比较。

  1. 找到Jedi.js文件，将其内容改为如下。
   import React from 'react';

   const Jedi = () => <div>I am a Jedi Component</div>

   export default Jedi;

你所做的是创建组件，它只是一个简单的函数。让它工作的原因是它返回JSX，所以无论你使用箭头函数还是使用function 关键字，它都需要返回JSX。

  1. 用npm start 运行该项目。

    npm start

  2. 打开浏览器并导航到**http://localhost:8080。**你应该看到。

   I am a Jedi Component

成功!

摘要

你已经迈出了学习React的第一步，而且你知道在Snowpack中有一个构建工具来支持你。在下一部分，我们将介绍如何渲染各种数据--敬请关注。

avatar
文章
阅读
粉丝