分析一个react项目

时间:2022-05-29 08:40:15

目录结构

  下面是使用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>
);
}