react开发

新年伊始,受安哥邀请,和好友一起加入了他的公众号,和他共同管理lnmp开发者公众号 ,在后期给大家推送一些优质的互联网编程资源。

安哥之前一直让我发点技术文档,但是一直没有时间,现在终于有时间了就给大家整理了一篇react基础入门的内容。

在前端日益发展的大环境下,前端技术更新实在是太快了,五花八门的,知道的不知道的都有很多,对身为程序猿的我们来说,学习花费的时间太多太多了,哪里还有时间来交女朋友,哪里有时间制造浪漫呀,程序猿伤不起呀,这里说一下大部分人的心声:)哈哈!!!

进入react基础内容,一听这个词,小伙伴们是不是已经信心满满的进入修练内功心法的境界了呢,对于它的起源呀,发展呀,这个官方已经给了好多介绍,我在这里就不一一赘述了。

工欲善其事,必先立其器(react基础环境)

react环境搭建,是我们学习react的首要条件,在这里我给大家总结一下react基础环境需要的一些注意事项。

nodejs必须要安装,npm必须要安装,装个git客户端就更好了,用visual studio coce代码IDE编写我们的代码感觉实在是爽的不得了,有些小伙伴们可能用的cnpm也是很不错的,因为它是国内的npm镜像,所以访问的要快很多,下面是我使用的nodejs版本:

初始化一个react框架代码,输出hello word内容

(1) 通过 npm init 生成 package.json

(2) 安装必要的扩展

cnpm install --save react react-dom babelify babel-preset-react

cnpm install babel-preset-es2015 --save

cnpm install webpack --save

cnpm install webpack-dev-server --save

cnpm install babel-loader --save

cnpm install babel-core --save

(3) 添加一个react组件

新建src文件夹,在src下新建js文件夹,在js文件夹里添加index.js组件文件,在index.js添加如下代码

const React = require('react')

const ReactDom = require('react-dom')

ReactDom.render(

平哥,安哥,小玉姐,

document.getElementById('example')

)

(4)新建index.html入口文件

var webpack = require('webpack');

var path = require('path');

module.exports = {

context: __dirname+'/src',

entry: "./js/index.js",

module: {

loaders: [

{

test: /\.js?$/,

exclude: /(node_modules)/,

loader: 'babel-loader',

query: {

presets: ['react', 'es2015']

}

}

]

},

output: {

path: __dirname+'/src/',

filename: "bundle.js"

}

};

(6)成功完成如下面的目录结构

上面六步带大家完成一个初始化react框架结构,现在进入react运行环境,需要在git bash here执行webpack-dev-server命令,运行我们的react项目

上面我用的qq游览器,为什么用qq游览器呢?因为好多调试扩展插件要进行翻墙的,如我用的react扩展调试插件在qq浏览器的扩展里大部分都能找到,而无需进行翻墙:)

至此,基础的react框架安装和测试已经完成,如果小伙伴有什么问题的可以后台留言哟~

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180106G0KA6L00?refer=cp_1026

同媒体快讯

  • react框架之mixin扩展

    2018-10-17
  • ant design框架的应用

    2018-10-17

相关快讯

扫码关注云+社区