目录结构

  下面是使用npx create-react-app web-app来创建的一个项目(已经删除了多余的文件)

  1. web-app
  2. ├── node_modules
  3.    ├── .......
  4.    └── .......
  5. ├── package-lock.json
  6. ├── package.json
  7. ├── public
  8.    └── index.html
  9. └── src
  10. ├── App.js
  11. └── index.js

  其中node_mudole是保存各种库的目录,比如babel、react、react-dom

  

自定义组件

  1. //导入react库
  2. import React from 'react';
  3.  
  4. //定义一个组件(需要继承React.Component)
  5. class App extends React.Component {
  6.  
  7. //每组件必须要有一个render方法,return的内容就是该组件要展示的内容
  8. //如果没有render方法,将会报错
  9. render() {
  10. return (
  11. <div>
  12. hello world
  13. </div>
  14. );
  15. }
  16. }
  17.  
  18. //组件定义之后,要导出之后,在其他地方才能使用该组件
  19. export default App;

  

使用组件

  使用组件的方法,很简单,就是<组件名 />的格式即可。

  比如在src/index.js中是这样使用组件的,

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. //导入自定义的组件
  5. import App from './App';
  6.  
  7. //以<组件名/>的形式使用组件
  8. ReactDOM.render(<App />, document.getElementById('root'));

  对于导入、导出组件的相关知识,可以参考:node基础 npm、module、exports、require

JSX(babel)

  在jsx的语法里面,可以使用js的表达式,注意是表达式,不是语句,比如if(1){return 2}是一个语句,并不是一个表达式

  至于判断是不是一个表达式,可以这样做:如果可以将其放在if或者while的条件判断位置,那么就是一个表达式,而不是一个语句。

  比如 1+2, 3>5都是表达式

  表示这样还不够,js的表达式要写在{  } 里面,jsx才会认得,比如下面这种情况:

  1. render() {
  2. return (
  3. <div>
  4. { "hello " + "react " } //正确
  5. hello world
  6. {1+2} //正确
  7. {if(1+2){return 123}} //错误
  8. </div>
  9. );
  10. }

  注意上面的内容都是写在一个div里面,其实使用return返回出去的就是一个jsx对象,并且只能返回一个jsx对象,如果向下面这种情况,是返回两个jsx对象,会出错的:

  1. render() {
  2. return ( //出错,因为一次性只能返回一个jsx对象,下面的写法是返回两个jsx对象
  3. <div>one</div>
  4. <div>two</div>
  5. );
  6. }

  可以将两个jsx对象包含在一个div中,就可以解决问题了:

  1. render() {
  2. return ( //正确
  3. <div>
  4. <div>one</div>
  5. <div>two</div>
  6. </div>
  7. );
  8. }

  

分析一个react项目的更多相关文章

  1. React环境配置(第一个React项目)

    使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...

  2. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  3. 如何架构一个 React 项目?

    编程有点像搞园艺.比起竭力去对付BUG(虫子),我们更愿意把一切弄得整洁有序,以免最后落得个身在荒野丛林中.低劣的架构会拖我们的后腿,也会使得BUG更容易钻进系统里去. 想要对你的项目进行架构,方法有 ...

  4. react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...

    1.安装react 开发工具 1.下载    chrome      react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC  下载好是 ...

  5. 脚手架创建一个React项目

    一.安装 1.安装node.js 官网地址 https://nodejs.org/en/ 进入后点击下载,官方网站会根据你的系统类型推荐最适合你安装的版本.(如果已经安装了node.js跳过此步)如下 ...

  6. 如何从0创建一个react项目

    1. 确保本机电脑安装了yarn和node: 2. 在需要安装的文件夹目录下输入:create-react-app  +(项目名称): PS:上图使用的软件为webStorm 3. 此时一个简单的re ...

  7. 重度使用示波器进行优化分析——一个DSDA项目回顾

    这是若干年前一个项目,最近有时间整理一下.回忆起来,印象最深刻的就是重度使用示波器辅助分析,进行优化. 项目背景是在原有项目3G+项目基础上,增加一颗2G+ Modem,使支持DSDA功能. 在介绍D ...

  8. 重度使用示波器进行优化分析——一个DSDA项目回顾

    这是若干年前一个项目,最近有时间整理一下.回忆起来,印象最深刻的就是重度使用示波器辅助分析,进行优化. 项目背景是在原有项目3G+项目基础上,增加一颗2G+ Modem,使支持DSDA功能. 在介绍D ...

  9. 初始化一个React项目(TypeScript环境)

    React将由三部分组成,其中,Redux是应用状态管理服务,React-Router用于路由映射,React View用于显示界面. 我们使用Facebook推荐的create-react-app来 ...

随机推荐

  1. Python - 判断list是否为空

    Python中判断list是否为空有以下两种方式: 方式一: list_temp = [] if len(list_temp): # 存在值即为真 else: # list_temp是空的 方式二: ...

  2. 如何让PHP程序自动执行(后台)

    如何让php程序自动执行,这个就需要用到一个函数了: int ignore_user_abort ( [bool setting] )  定义和用法 ignore_user_abort() 函数设置与 ...

  3. ASP.NET -- WebForm -- 页面生命周期

    ASP.NET -- WebForm --  页面生命周期 ASP.NET 页运行时,此页将经历一个生命周期,在生命周期中将执行一系列处理步骤.这些步骤包括初始化.实例化控件.还原和维护状态.运行事件 ...

  4. HTTP1.0 、1.1

    网上有很多资料说明这个,但都很长的,觉得东西太多也记不住,就记点东西,权当笔记. HTTP 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一 ...

  5. python 基本运算符

    一.格式化输出 简易名片的制作 name="小龙女" phone=15464623646 firm="神雕侠侣" pro="神仙姐姐" pr ...

  6. Scrapy 框架 手动发送请求 POST 请求的发送

    手动发送请求 import scrapy from choutiSpider.items import ChoutispiderItem class ChoutiSpider(scrapy.Spide ...

  7. 【COCOS2DX-游戏开发之三一】之 坐标系(下) convertToNodeSpace和convertToWorldSpace

    游戏中常常会用到一些变换: 游戏中武器和角色在一个layer上,为了效率.会考虑将bullet, effect和 PhysicsParticle分别放到不用的层上,相应的层上使用batchnode来提 ...

  8. BZOJ3237:[AHOI2013]连通图(线段树分治,并查集)

    Description Input Output Sample Input 4 5 1 2 2 3 3 4 4 1 2 4 3 1 5 2 2 3 2 1 2 Sample Output Connec ...

  9. [ZJOI2012]网络

    嘟嘟嘟 今天复习lct,趁着还年轻多写点数据结构. 首先不得不吐槽一下,题面好长啊-- 通过观察发现,\(c \leqslant 10\).那么就可以暴力的建10棵lct. 接下来说下具体做法: 1. ...

  10. svn解决冲突问题

    1.在linux的branchs下创建了一个新的分支branch_2后,commit.提示: 2.这是把/my_branch/index.html删除后svn update也不能解决问题 3.到myb ...