分析一个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>
  );
}