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