变量和函数

React使用JSX语法，注意，使用{ }来表示，而不是Vue的{{ }}

无定义变量

// App.js
function App() {
  return (
    <div>{ "Hello world!" }</div>
  );
}

export default App;

JavaScript变量

// App.js

const word="Hello world!";

function App() {
  return (
    <div>{ word }</div>
  );
}

export default App;

函数调用

// App.js

function word(){
  return "Hello world!";
}

function App() {
  return (
    // 注意调用函数添加括号
    <div>{ word() }</div>
  );
}

export default App;

方法调用

// App.js

function App() {
  return (
    // 获取今天的日期
    <div>{ new Date().getDate() }</div>
  );
}

export default App;

样式调用

// App.js

function App() {
  return (
    // 注意，样式是一个对象，因为需要套两层大括号，类似于Vue的v-bind
    <div style={{ color: 'red'}}>Hello world!</div>
  );
}

export default App;

一般来说可以这样写React的样式


function App() {
  return (
    <div>
      <div style={style.divStyle}>红色字体部分</div>
    </div>
  );
}

const style = {
  // 注意css属性使用小驼峰命名
  divStyle: {
    color: 'red',
  }
}

export default App;

文件结构遍历列表