说明和准备 最近在进行 react 前端,目标是想用[链接]进行下个项目的前端开发, 然而事实上,我的前端经验还停留在 html+css+jquery 的阶段 = =,react 或者 angularJs 什么的都完全没有接触过。但是既然是最新的技术,我们就应该有所了解才行 ,公司给我的时间并不算长,三天的时间,所以我 ..

react->antdesign 学习之路(1): 试着不用 webpack 搭建 react

本贴最后更新于 241 天前,其中的信息可能已经时移俗易

说明和准备

最近在进行 react 前端,目标是想用ant design进行下个项目的前端开发,
然而事实上,我的前端经验还停留在 html+css+jquery 的阶段 = =,react 或者 angularJs 什么的都完全没有接触过。但是既然是最新的技术,我们就应该有所了解才行
,公司给我的时间并不算长,三天的时间,所以我必须在这三天时间学习 react,以及能用 ant design 去开发前端,难度还是稍大,不过千里之行始于足下,大就大吧,总还是要学习的

接下来是准备

下载node.js,我使用的是官网最新的 6.9.1 的 LTS 版本,也可以去node.js 中文网中文网下载 4.4.4 的成熟版本

最好配置一个淘宝源$ npm install -g cnpm --registry=https://registry.npm.taobao.org, 命令行执行就可以了,之后的安装命令就可以直接使用 cnpm 代替本来的 npm

下载React 的 js 包

开始

  1. 新建一个空项目(怎么新建就不说了,建目录也行,使用 idea 也行),然后将下载的 js 包丢到 build 目录下面
    然后新建一个 study_1 文件夹,在文件夹下面新建一个 index.html 文件,注意最后一个 js 代码的 type
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/5.8.38.browser.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            ReactDOM.render(
                    <h1>Hello,world</h1>,
                    document.getElementById('example')
            );
        </script>
    </body>
    </html>

然后单击打开就能看到程序员的必经之路 233,接下来
2. 将 html 文件中的 js 文件单独移除来
2. 离线转换 es6 语法为 es5 语法,安装 babel 插件

	npm install --global babel-cli    
    npm install babel-preset-react  --save-dev

因为这里使用的是 es6,所以还需要安装 es2015

npm install babel-preset-es2015 --save-dev

然后使用命令:

babel -d result/ study_2/

然后... 然后就是各种报错了,哈哈,首先会遇到的第一个报错是没有配置 es2015
经过百度,是因为没有配置到,这里需要我们在根目录创建一个 .babelrc 的文件
,在文件中添加代码:
{ "presets": [ "es2015", "react" ] }
然后再次运行转换命令,然后?毫无疑问,你又报错了。。这里因为当时 idea 卡在 index 命令,几个处理命令都丢失了,
但是其实原因其实很简单,有几个插件没有安装,把几个报错的插件安装好就行了,反复运行查看报错,找出几个插件,
统统使用npm install ...就 OK 了。
最后编译出来的文件在 result 文件夹中,你可以看到 index.js 文件,就可以拿来正常使用了。
这时我们就可以删除掉browser.min.js了,并且所有的 js 引用全部使用我们经常见到的type="text/javascript"
排版改了几次 QAQ,markdown 语法跟我在 idea 中用的不一样

github 地址:https://github.com/Userwu/study_react

  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    181 引用 • 1245 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    98 引用 • 186 回帖 • 629 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    10 引用 • 23 回帖
7 回帖   
请输入回帖内容...
  • 88250

    感谢分享,社区 Markdown 编辑器解析可能还有 bug,稍后会继续调整。

  • Vanessa  

    不用 webpack, 你用啥?

    1 回复
  • wuhongxu        

    先看看结构,后面用 webpack,我才开始学啊,v 大 ~

    1 回复
  • ZephyrJung  

    楼主您好,给您带来的不便深感抱歉,请暂时用 [downline] 标记来替代下划线,我们会尽快修复这个问题。
    咳咳,我就是想学学客服腔儿~ trollface
    不过,你说的 idea 中用的是指什么?idea 的 MD 插件么?可否告诉我叫什么,我看看能不能借鉴下

  • ZephyrJung  

    咳咳。。。居然把我的那句话给替换了。。。我真是写了个很蠢的方法 😂
    总之你懂得。。。
    我在群里叫 O 型血橙,头像是猫,有问题随时联系

    1 回复
  • wuhongxu        

    我也在群里 =。=,昨天就给你说了这个问题的,idea 的插件是 【Markdown support】

  • Vanessa        

    加油加油

请输入回帖内容 ...