React 之 Hello world

2023-08-11 10:40:40

一入react深似海，从此学习为常态，react 成为了一种趋势，很多人应该很多人准备进坑，下面对react进行简单的描述：

首先学习react，要有多方学习的准备，例如：Webpack, Babel, Redux, React Router, CSS Modules, NPM, ES6/7等等，如果想要完全掌握，就必须去进行了解。

下面，以最原始的Hello World入门：

1、打开

2、建立一个文件夹：mkdir webpack-demo && cd webpack-demo

3、建立一个package.json 文件：npm init（建立的时候会填一些问题：such as project name, description, information about the author, etc.）

　　这些并不重要，如果不填，直接回车就行

4、添加webpack依赖，并进行安装：npm install --save-dev webpack

5、准备完毕，接下来让我们建立相关文件：such as :一个 "app" 文件夹放置编辑的源代码/ JavaScript模板, 一个 "public" 文件夹被用来连接你的浏览器such as：index.html.之后自动建立的bundle.js也在这个文件夹下. 然后创建三个文件：在public文件夹下的index.html 、在app文件夹下的 main.js 、 Greeter.js.建好之后如下所示：

6、接下来将下面代码分别复制到相应文件：

index.html:

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <title>Webpack Sample Project</title>

   </head>

   <body>

     <div id='root'></div>

     <script src="bundle.js"></script>

   </body>

 </html>

main.js:

 //require('./Greeter.js')用于引入Greeter.js文件

 var greeter = require('./Greeter.js');

 document.getElementById('root').appendChild(greeter());

Greeter.js

 module.exports = function() {

   var greet = document.createElement('div');

   greet.textContent = "Hello World";

   return greet;

 };

到这里就可以运行了，因为上面代码采用的ES5的写法，所以就不用进行转换了

运行命令行为：webpack app/main.js public/bundle.js

将会出现如下结果：

同时在public文件夹下会生成bundle.js文件，在浏览器上打来index.html文件将会出现Hello World，如下：

上述是最简单的webpack与react结合使用方法，但是操作起来比较麻烦，下面我们使用配置webpack的方法，建立一个JavaScript文件，来配置我们所需要的信息

创建一个webpack.config.js文件：其源码为：

 module.exports = {

   entry:  __dirname + "/app/main.js",

   output: {

     path: __dirname + "/public",

     filename: "bundle.js"

   }

 }

现在就可以直接运行webpack命令，而不需要任何参数，webpack命令可以通过配置的webpack.config文件，寻找对应的内容，其运行结果如下：

除了以上方法，还可以通过配置使用本地服务器的方式启动，不用打开html文件，而且在你修改文件之后，页面会及时的做相应的更新，而不用人为的操作：

其方式为，在webpack.json更新代码：

 module.exports = {
 2   devtool: 'eval-source-map',
   entry:  __dirname + "/app/main.js",

   output: {

     path: __dirname + "/public",

     filename: "bundle.js"

   },
 8   devServer: {

 9   contentBase: "./public",

10   colors: true,

11   historyApiFallback: true,

12   inline: true

13 }


 }

同时，加载安装依赖，命令为：npm install --save-dev webpack-dev-server

现在你可以运行命令：webpack-dev-server

启动成功，在浏览器上输入：http://localhost:8080/

页面如下：你可以在Greeter.js中修改hello world 为 Hello World!!!。观察页面神奇的变化

下一章节，会引入json代码，css 样式，ES6代码的转换等。

欢迎提出建议和交流

码农公寓

相关文章