分析一个react项目

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项目 的全部内容, 来源链接: utcz.com/z/381351.html

回到顶部