分析一个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 - 判断list是否为空
Python中判断list是否为空有以下两种方式: 方式一: list_temp = [] if len(list_temp): # 存在值即为真 else: # list_temp是空的 方式二: ...
- 如何让PHP程序自动执行(后台)
如何让php程序自动执行,这个就需要用到一个函数了: int ignore_user_abort ( [bool setting] ) 定义和用法 ignore_user_abort() 函数设置与 ...
- ASP.NET -- WebForm -- 页面生命周期
ASP.NET -- WebForm -- 页面生命周期 ASP.NET 页运行时,此页将经历一个生命周期,在生命周期中将执行一系列处理步骤.这些步骤包括初始化.实例化控件.还原和维护状态.运行事件 ...
- HTTP1.0 、1.1
网上有很多资料说明这个,但都很长的,觉得东西太多也记不住,就记点东西,权当笔记. HTTP 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一 ...
- python 基本运算符
一.格式化输出 简易名片的制作 name="小龙女" phone=15464623646 firm="神雕侠侣" pro="神仙姐姐" pr ...
- Scrapy 框架 手动发送请求 POST 请求的发送
手动发送请求 import scrapy from choutiSpider.items import ChoutispiderItem class ChoutiSpider(scrapy.Spide ...
- 【COCOS2DX-游戏开发之三一】之 坐标系(下) convertToNodeSpace和convertToWorldSpace
游戏中常常会用到一些变换: 游戏中武器和角色在一个layer上,为了效率.会考虑将bullet, effect和 PhysicsParticle分别放到不用的层上,相应的层上使用batchnode来提 ...
- 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 ...
- [ZJOI2012]网络
嘟嘟嘟 今天复习lct,趁着还年轻多写点数据结构. 首先不得不吐槽一下,题面好长啊-- 通过观察发现,\(c \leqslant 10\).那么就可以暴力的建10棵lct. 接下来说下具体做法: 1. ...
- svn解决冲突问题
1.在linux的branchs下创建了一个新的分支branch_2后,commit.提示: 2.这是把/my_branch/index.html删除后svn update也不能解决问题 3.到myb ...