分析一个react项目
目录结构
下面是使用npx create-react-app web-app来创建的一个项目(已经删除了多余的文件)
web-app
├── node_modules
│ ├── .......
│ └── .......
├── package-lock.json
├── package.json
├── public
│ └── index.html
└── src
├── App.js
└── index.js
其中node_mudole是保存各种库的目录,比如babel、react、react-dom
自定义组件
//导入react库
import React from 'react'; //定义一个组件(需要继承React.Component)
class App extends React.Component { //每组件必须要有一个render方法,return的内容就是该组件要展示的内容
//如果没有render方法,将会报错
render() {
return (
<div>
hello world
</div>
);
}
} //组件定义之后,要导出之后,在其他地方才能使用该组件
export default App;
使用组件
使用组件的方法,很简单,就是<组件名 />的格式即可。
比如在src/index.js中是这样使用组件的,
import React from 'react';
import ReactDOM from 'react-dom'; //导入自定义的组件
import App from './App'; //以<组件名/>的形式使用组件
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才会认得,比如下面这种情况:
render() {
return (
<div>
{ "hello " + "react " } //正确
hello world
{1+2} //正确
{if(1+2){return 123}} //错误
</div>
);
}
注意上面的内容都是写在一个div里面,其实使用return返回出去的就是一个jsx对象,并且只能返回一个jsx对象,如果向下面这种情况,是返回两个jsx对象,会出错的:
render() {
return ( //出错,因为一次性只能返回一个jsx对象,下面的写法是返回两个jsx对象
<div>one</div>
<div>two</div>
);
}
可以将两个jsx对象包含在一个div中,就可以解决问题了:
render() {
return ( //正确
<div>
<div>one</div>
<div>two</div>
</div>
);
}
分析一个react项目的更多相关文章
- React环境配置(第一个React项目)
使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
- 如何架构一个 React 项目?
编程有点像搞园艺.比起竭力去对付BUG(虫子),我们更愿意把一切弄得整洁有序,以免最后落得个身在荒野丛林中.低劣的架构会拖我们的后腿,也会使得BUG更容易钻进系统里去. 想要对你的项目进行架构,方法有 ...
- react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...
1.安装react 开发工具 1.下载 chrome react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC 下载好是 ...
- 脚手架创建一个React项目
一.安装 1.安装node.js 官网地址 https://nodejs.org/en/ 进入后点击下载,官方网站会根据你的系统类型推荐最适合你安装的版本.(如果已经安装了node.js跳过此步)如下 ...
- 如何从0创建一个react项目
1. 确保本机电脑安装了yarn和node: 2. 在需要安装的文件夹目录下输入:create-react-app +(项目名称): PS:上图使用的软件为webStorm 3. 此时一个简单的re ...
- 重度使用示波器进行优化分析——一个DSDA项目回顾
这是若干年前一个项目,最近有时间整理一下.回忆起来,印象最深刻的就是重度使用示波器辅助分析,进行优化. 项目背景是在原有项目3G+项目基础上,增加一颗2G+ Modem,使支持DSDA功能. 在介绍D ...
- 重度使用示波器进行优化分析——一个DSDA项目回顾
这是若干年前一个项目,最近有时间整理一下.回忆起来,印象最深刻的就是重度使用示波器辅助分析,进行优化. 项目背景是在原有项目3G+项目基础上,增加一颗2G+ Modem,使支持DSDA功能. 在介绍D ...
- 初始化一个React项目(TypeScript环境)
React将由三部分组成,其中,Redux是应用状态管理服务,React-Router用于路由映射,React View用于显示界面. 我们使用Facebook推荐的create-react-app来 ...
随机推荐
- python 基本数据类型--字符串实例详解
字符串(str) :把字符连成串. 在python中⽤', ", ''', """引起来的内容被称为字符串 . 注意:python中没有单一字符说法,统一称叫字 ...
- nodejs websocket
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> <script ty ...
- Djangoorm的多表建立与queryset对象的合并
使用这个方法的前提是:我们用Django的orm和REST来实现的 数据库提前建好了,而且表中字段相同,但是表名是不一样.需要动态在model中建表.我们使用Book_来模拟实现的 from djan ...
- Centos 7 安装JAVA环境 jdk1.8
在Linux环境(Centos 7)安装jdk1.8,有以下两种方式 方式一.安装openjdk # yum install java-1.8.0-openjdk* -y 方式二.使用wget下载 ...
- SQLite的sqlite3_prepare_v2
original SQL text---<sqlite3_prepare_v2>--->sqlite3_stmt--<sqlite3_reset>-->clear ...
- centos7下kubernetes(8.kubernetes Failover)
上一节我们运行的3个容器 其中有两个是运行在node2上一个运行在node1上,现在我们关闭node1,观察node1上的容器会发生什么变化 目前node1已经处于notready状态 现在我们查看一 ...
- SpringBoot实战之SpringBoot自动配置原理
SpringBoot 自动配置主要通过 @EnableAutoConfiguration, @Conditional, @EnableConfigurationProperties 或者 @Confi ...
- UVA225-Golygons(dfs)
Problem UVA225-Golygons Accept:307 Submit:3646 Time Limit: 3000 mSec Problem Description Imagine a ...
- 转://通过udev创建ASM共享磁盘(RAC)
OS:RedHat EL6.0 Oracle: Oracle 11gR2 在Oracle 11gR2,构建RAC时可以通过ASM创建asm disk,但是需要安装asmlib相关软件:对于RedH ...
- NUMA特性禁用
一.检查OS是否开启NUMA # numactl --hardware 二.Linux OS层面禁用NUMA 1.修改 grub.conf # vi /boot/grub/grub.conf #/* ...