代码改变世界

People like to look at changing the world as a big task. I believe changing the world can be done in little steps.

人们喜欢将改变世界视为一项艰巨的任务。 我相信，改变世界可以一步步完成。

The key is identifying a problem and taking a little step.

关键是确定问题并采取一些措施。

My journey began on Friday, September 7th, 2018. That was the day I decided to build a React plugin for the freeCodeCamp Test Suite. I noticed a problem and I took action.

我的旅程从2018年9月7日星期五开始。 那天我决定为freeCodeCamp Test Suite构建一个React插件。 我注意到了一个问题，并采取了措施。

There is a working version up for installation on the Node Package Manager registry. This is a milestone for me, as the project is my first Open Source contribution.

在Node Package Manager注册表上有一个可供安装的工作版本 。 对我来说，这是一个里程碑，因为该项目是我对开放源代码的首次贡献。

I used certain key technologies to build the project, like Webpack, React, NPM, and Node.js. I had a lot of fun building it, and I learned a lot, too.

我使用了某些关键技术来构建项目，例如Webpack，React，NPM和Node.js。 构建它带来了很多乐趣，我也学到了很多东西。

I tried several times (for a whole day actually) before I could even succeed in making the plugin work.

在使插件正常工作之前，我尝试了几次(实际上是一整天)。

After making it work, implementation in a React app was a challenge. Although I was faced with technical difficulties, in the end, the plugin worked.

在使其运行之后，在React应用程序中的实现是一个挑战。 尽管我遇到了技术困难，但最终，该插件仍然有效。

过程 (The process)

The idea behind the project was simple. All I wanted to do was find a simple way to add the freeCodeCamp Test Suite to React apps.

该项目的想法很简单。 我要做的就是找到一种将freeCodeCamp Test Suite添加到React应用程序的简单方法。

My first plan was to build it with Create-React-App.

我的第一个计划是使用Create-React-App构建它。

I felt that since I could use it to build React applications, I could use it to build a plugin. I was wrong.

我觉得既然可以用它来构建React应用程序，所以可以用它来构建插件。 我错了。

Create-React-App was too heavy for what I needed to build.

对于我需要构建的内容，Create-React-App太重了。

I discovered that to make the plugin easy to export, I would need some extra configuration.

我发现为了使插件易于导出，我需要一些额外的配置。

I went online and googled a couple of times, and came across Webpack and react-helmet. What I came across was both amazing and confusing, at first.

我上网浏览了几次，遇到了Webpack和react-helmet。 首先，我遇到的东西既令人惊奇又令人困惑。

Still, I knew they were what I needed. I continued searching some more.

不过，我知道他们正是我所需要的。 我继续搜索更多。

Before Webpack, I had tried exporting and publishing the plugin as a module with no extra configuration. It did not work. Newbie mistake, I know.

在使用Webpack之前，我曾尝试在没有额外配置的情况下将插件导出和发布为模块。 它不起作用。 新手的错误，我知道。

This was a big challenge that I had to overcome.

这是我必须克服的一大挑战。

Thankfully, we learn as we grow!

值得庆幸的是，我们在成长中学习！

While I was developing the plugin, there were constant power cuts. In Nigeria, the power situation is not very settled.

在我开发插件时，经常断电。 在尼日利亚，权力局势不是很稳定。

I had to work until my laptop powered out, then think deeply about what to do when power returned.

我必须工作直到笔记本电脑断电，然后再深思一下电源恢复后的处理方法。

All of this happened on the second day (Saturday).

所有这些都发生在第二天(星期六)。

魔术，美丽 (The magic, the beauty)

Using Webpack, I began building the plugin.

使用Webpack，我开始构建插件。

I placed the core code in an index.js file. Here is the code below:

我将核心代码放置在index.js文件中。 这是下面的代码：

import React from 'react';
import { Helmet } from 'react-helmet';
import './styles.css';const ReactFCCtest = () => {return (<div><Helmet><script type="text/javascript" src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" ></script></Helmet><h5>react-fcctest running</h5></div>);
};export default ReactFCCtest;

The code above was all I needed to add the script to the head tag of any React app I desired.

上面的代码是我将脚本添加到所需的任何React应用的head标签所需的全部代码。

I came across an article on Medium which was a great help to me.

我遇到了一篇有关Medium的文章，对我有很大的帮助。

It helped me understand how to use Webpack to create a node module that I could successfully publish to the Node Package Manager registry.

它帮助我了解了如何使用Webpack创建可以成功发布到Node Package Manager注册表中的节点模块。

I followed the instructions in that article. After making some changes, I built the following webpack.config.js file:

我按照该文章中的说明进行操作。 进行一些更改之后，我构建了以下webpack.config.js文件：

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, "demo/src/index.html"),filename: "./index.html"
});
module.exports = {entry: path.join(__dirname, "demo/src/index.js"),output: {path: path.join(__dirname, "demo/dist"),filename: "bundle.js"},module: {rules: [{test: /\.(js|jsx)$/,use: "babel-loader",exclude: /node_modules/},{test: /\.css$/,use: ["style-loader", "css-loader"]}]},plugins: [htmlWebpackPlugin],resolve: {extensions: [".js", ".jsx"]},devServer: {port: 3001}
};

Let me explain what this file is doing:

让我解释一下这个文件在做什么：

>> First, it is using the HtmlWebpackPlugin to create an HTML file to serve my webpack bundle.

>>首先，它使用HtmlWebpackPlugin创建一个HTML文件来服务我的webpack捆绑包。

>> Next it is exporting the plugin I created as a node module.

>>接下来，它将导出我创建为节点模块的插件。

>> It is saying that the entry point of my plugin is in the location demo/src/index.js. This means that this is where the code to be exported will be taken from.

>>据说我的插件的入口位于demo/src/index.js位置。 这意味着将在此处提取要导出的代码。

>> Next, it is saying that the output directory of my plugin is  demo/dist. In this directory, the react-fcctest plugin will be exported in a file named  bundle.js.

>>接下来，就是说我的插件的输出目录是demo/dist 。 在此目录中，react-fcctest插件将导出到名为bundle.js的文件中。

>> Next it introduces a set of rules for the file that is to be exported.

>>接下来，它为要导出的文件引入了一组规则。

>> The rules, tell the file to do two things. One, use babel-loader when working with  .js and .jsx files and do not include the node_modules folder. Two, use style-loader and css-loader when working with .css files.

>>规则，告诉文件要做两件事。 一种是在处理.js和.jsx文件时使用babel-loader，并且不包括node_modules文件夹。 第二，在处理.css文件时，请使用style-loader和css-loader。

>> The resolve and extensions part of the file allowed me to leave of the .js and .jsx from the end of my files while importing them.

>>文件的解析和扩展部分允许我在导入文件时从文件末尾离开.js和.jsx 。

>> Lastly, my development server was on port 3001. This port could have been any other of my choosing.

>>最后，我的开发服务器在端口3001上。该端口可能是我选择的其他端口。

I just noticed that beauty involves hard work…

我只是注意到，美丽涉及艰苦的工作……

I added Webpack to the project on Sunday, and then the plugin worked!

我在星期天将Webpack添加到项目中，然后该插件起作用了！

With this, I was able to create a module that could be easily exported. This module was ReactFCCtest.

这样，我就可以创建一个可以轻松导出的模块。 这个模块是ReactFCCtest 。

I cannot say how much the read-search-ask methodology helped me throughout the project.

我不能说整个阅读项目对我的帮助有多大。

Here is Demo of the finished plugin. It was very fun to build.

这是完成的插件的演示 。 建立起来非常有趣。

I tested it out in a freeCodeCamp project, and it worked perfectly.

我在freeCodeCamp项目中对其进行了测试，并且效果很好。

I created a Github Repository that holds all the open source code for the project.

我创建了一个Github存储库 ，其中包含该项目的所有开放源代码。

如何安装和使用`react-fcctest` (How to install and use `react-fcctest`)

Run npm i react-fcctest or yarn add react-fcctest to install the React plugin.

运行npm i react-fcctest或yarn add react-fcctest以安装React插件。

Place import ReactFCCtest from 'react-fcctest'; in your App.js:

import ReactFCCtest from 'react-fcctest';放置import ReactFCCtest from 'react-fcctest'; 在您的App.js中：

import React, { Component } from 'react';
import ReactFCCtest from 'react-fcctest';class App extends Component {render() {return (<div><ReactFCCtest /></div>);}
};export default App;

That is all there is to it!

这就是全部！

最后的笔记 (Final notes)

My 2018 so far has been amazing.

到目前为止，我的2018很棒。

I am now the Developer Student Club Lead for my university, in a program powered by Google Developers in Sub-Saharan Africa.

我现在是我的大学的开发者学生俱乐部负责人，参加的项目由撒哈拉以南非洲的Google Developers提供支持。

I am aiming for greatness, in outer space — perhaps I might just land on a moon. Follow me on my journey.

我的目标是在外太空取得更大成就-也许我可能只是降落在月球上。 跟着我走 。

翻译自: https://www.freecodecamp.org/news/change-the-world-one-line-of-code-at-a-time-5162b229f35e/

代码改变世界