Back

reactjs - 2. 快速自动重启 以及 jsx

发布时间: 2023-07-31 13:36:00

refer to:
https://legacy.reactjs.org/docs/introducing-jsx.html

如何让reactjs项目在开发阶段自动识别代码改动？

1. 在项目根目录下增加 .env 文件

2. 该文件内容为：

FAST_REFRESH=false

然后重启 ( yarn start) ， 就会发现你做的任何改动（jsx, 修改 component等）， 都会立刻生效了。

JSX

reactjs为了方便我们在js代码中插入HTML, 所以推出了这个概念。例如：

const element = <h1>Hello, world!</h1>;

总之，就是非常合适的写法。不用使用引号 来声明字符串， 也可以非常灵活的进行值的渲染。( interpolation)

例如，修改我们的App.js:

let one = 1;
let two = 2;

function App() {
  return (
    <>
      <div className="App">
        你好啊，第一个reactjs项目
      </div>
      <div>
      var one is : {one}, var two is : {two}
      </div>
    </>
  );
}

export default App;

可以看到，上面代码的特点为：

1. 使用 {} 来渲染变量 ， 跟ruby中的  字符串插值 #{} 非常类似。

2. return () 中的参数，如果是多行的话，要使用 <> ... </> 围起来。

Back