Hello React

一、 开发环境配置(Mac)

1. node.js 安装 (node + npm)

//官网安装包下载即可

2. 官方脚手架工具 create-react-app

npm install create-react-app-g

3. 创建项目

create-react-app hello  //创建一个叫hello的项目

4. 运行项目

//创建完后,cd到该项目npm start

#小结

  至此,Mac环境下react基于脚手架的开发环境已搭建完成。运行项目( npm start)后,浏览器会自动打开本地页面http://localhost:3000/。如果到此步弹出带有react的Logo的欢迎页面,则表示环境已经成功配置。


二、 Hello World

  作为程序员最喜闻乐见的入门代码,还属 hello world 。那么第一个组件则输出一段 hello world。

1. 项目目录结构

基础目录结构及注释如下:

|——hello   |—— node_modules              # 项目依赖   |—— public                    # 公共文件       |—— favicon.ico              // 网站图标       |—— mainfest.json            // 应用基本配置信息       └── index.html               // 主入口文件   |—— src                       # 主程序模块       |—— App.css                  // App css样式       |—— App.js                   // 主组件       |—— App.test.js              // 测试组件       |—— index.css                // 主文件样式       |—— index.js                 // 主文件脚本       |—— logo.svg                 // svg logo       └── serviceWorker.js         // 缓存配置文件   |—— package.json              # 包配置文件   └── README.md                 # React说明文档

2. 第一个组件

  了解了项目结构,接下来开始写hello world组件。 首先,在src文件夹下新建一个文件,如HelloWorld.js。然后,在该文件下,三步走:

  1. 引入react
  2. 新建类继承react
  3. 导出

示例一下:

// 1. 引入import React from 'react'
// 2. 类class HelloWorld extends React.Component {    render() {        return (            <div>                <h1>Hello World</h1>            </div>        )    }}
// 3. 导出export default HelloWorld

  我们第一个组件就写完了,但是缺少一步:将组件挂载到根节点上:打开 src/index.js

// ...
// 引入组件import HelloWorld from './HelloWorld'
// 挂载ReactDOM.render(<HelloWorld />, document.getElementById('root'));

# 小结

  写完第一个组件运行起来,仿佛打开了新世界的大门……诶,等等,刚才我写了什么?为什么在js中render函数中返回的是一段奇怪的html代码?这是什么格式?这样的代码是什么鬼?听我道来。

三、 JSX

1. 关于JSX

  上章说到,render函数中返回的是一段奇怪的html代码,那这段代码是什么吗?在此引入JSX概念及语法。Facebook称其为jsx,属于JavaScript的语法扩展。虽然看似html的模板语言,实则是在JavaScript内部实现。

2. 语法

  引入JSX概念,是为了编程更加简答。当然,JSX的语法也不会复杂,甚至可以说是非常简单:主要语法是一个花括号,然后在花括号内写expressions表达式即可。对expression有疑惑的可以先挪步到官方查阅文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators。

a. 基本语法

  那么,使用expressions表达式我们可以做什么呢?大家可以简单敲几行运行一下。简单示例下:

import React from 'react'
class Test extends React.Component {    render() {        return (            <div>                <h1>Hello React</h1>                <div>字符串: {'string'}</div>                <div>数字运算: {12+4}</div>                <div>数组: {[1,2,3,4]}</div>                <div>JSX:{<mark>标识</mark>}</div>            </div>        )    }}
export default Test

  如果我们需要进行一些数据操作,例如判断,遍历等等之类的,又要怎么做呢?

b. map

import React from 'react'
class Welcome extends React.Component {    render() {        const learnList = ['React', 'Vue', 'Angular'];
        return (            <div>                <ul>                    {                        learnList.map((item, index) =>                             <li>{index + 1}: {item}</li>                        )                    }                </ul>
            </div>        )    }}
export default Welcome

c. if三元表达式

import React from 'react'
class Welcome extends React.Component {    render() {        const showMe = true;
        return (            <div>               {                  showMe ? <mark>这是true显式的文字</mark> : <b>这是false显式的文字</b>               }               </div>        )    }}
export default Welcome

d. 属性

  大部分情况,html语法在JSX中正常使用,但是也有个别例外:

  1. class => className
  2. for => htmlFor

例:

return (   <div className="..." htmlFor="...">      一段文字……     </div>)

# 小结

  本章了解了上章提到的,写在js中的html是JSX语法,并且介绍了JSX语法及基本功能使用,已经可以开始上手解决一部分的业务了。那么除此之外,关于组件之间如何交流,有何属性和状态?且看下回。

本文分享自微信公众号 - 流眸(zxm0146),作者:流眸

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS——loading动画

      由图可见,动画1中有三根竖线,在进行变长变短的高度变化以及线条的颜色变化,因此分为以下几个步骤:

    流眸
  • vue弹窗屏蔽滑动的两种解决方案

      在开发过程中,我们经常会遇到要加弹窗的需求,而如果当前页的展示数据一屏展示不完,则在打开弹窗后,有滑动操作时,页面也会随之滑动。那么如何处理这一问题呢?

    流眸
  • CSS布局之道——内凹圆角

    但是细想之后发现两者皆不可用,border-radius处理的话是凸角,舍弃;定位需要独立出来两个模块,复杂度高了,舍弃。可是舍弃后,需要怎么做呢?切背景图吗?...

    流眸
  • 八.CSS之animation(动画)

    ​ 多个属性间使用,隔开 ​ 如果所有属性都需要过渡,则使用all关键字 ​ ...

    小海怪的互联网
  • 一篇文章带你了解CSS clear both清除浮动

    CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,就用clear样式属性即可实现。

    前端皮皮
  • React多页面应用4(webpack4 提取第三方包及公共组件)

    本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

    前端人人
  • 前端|手风琴--抽屉式网页特效

    我们在浏览网页时或者翻转页面时,经常会看到很多精美的效果的效果。其中,抽屉式网页效果比较常见,它主要由图片和文字通过添加js来实现。抽屉式网页通过移动鼠标来实现...

    算法与编程之美
  • JS示例34-鼠标跟随事件

    1、onmousemove 鼠标移动事件(要考虑页面滚动) 2、var X = ev.clientX; 3、var Y = ev.clientY + scr...

    专注APP开发
  • 彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现

      一个典型的拖拽操作是这样的:用户用鼠标选中一个可拖动的(draggable)元素,移动鼠标到一个可放置的(droppable)元素,然后释放鼠标。 在操作期...

    从入门到进错门
  • html+css 多彩滚动展示AD框前端显示代码

    因为放首页蛮占地方的,这个小模块没有经受住小改版的考验,被去掉了。贴出来,已给以后用

    AlexTao

扫码关注云+社区

领取腾讯云代金券