主页

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/ 就会输出:

 

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论