Blog

react 的简单使用

2023-10-14 04:42PM

参考：https://www.runoob.com/react/react-install.html

使用 create-react-app 快速构建 React 开发环境

执行以下命令创建项目：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
// 在 http://localhost:3000 启动应用
$ npm start 或者 yarn start（如果配置了yarn 就可以使用）
// 运行所有测试
$ npm test 或者 yarn test

// 构建项目的产品文件
$ npm run build 或者 yarn run build

在浏览器中打开 http://localhost:3000/ ，结果如下图所示：

项目的目录结构如下：

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头。

尝试修改 src/App.js 文件代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>欢迎来到菜鸟教程</h2>
        </div>
        <p className="App-intro">
          你可以在 <code>src/App.js</code> 文件中修改。
        </p>
      </div>
    );
}
}

export default App;

修改后，打开 http://localhost:3000/ （一般自动刷新），输出结果如下：

src/index.js 是一个入口文件，我们可以尝试直接修改 src/index.js 文件代码：

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(props) {
return <h1>hello world!</h1>;
}

ReactDOM.render(<Hello />, document.getElementById('root'));

这时候浏览器打开 http://localhost:3000/ 就会输出：

返回>>

请登录后再发表评论。

评论列表:

目前还没有人发表评论