搭建 React 项目

  • May, 15 2019
  • React

搭建 React 项目

从零开始创建 React 项目

上篇文档已经简单介绍了 react 风格的 tsx 代码,本篇文档主要讲述如何创建一个 React 项目进行工作。

创建 react 项目,本文档会介绍两种运行 react 应用的方式:

  1. 我们可以使用上篇文档 demo 中所使用的 babel 来运行 react 应用。
  2. 我们可以使用 Facebook 提供的 create-react-app 脚手架来创建 react 项目,然后用 cli 来运行 react 应用。

注:电脑上需要有 nodejs 和 npm 运行环境

Babel 运行 React 应用

这种 Babel 运行 react 应用的方式,是我们主要用来写 demo 或者学习 react 入门使用的方式。

步骤

  1. 新建一个文件夹,打开命令行工具
  2. 输入npm init命令,一路回车
  3. 安装 http-server,用于启动本地服务器

  1. 安装reactreact-dom

  2. 新建index.html

    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--引入react及react-dom-->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <!--引入babel在线翻译器-->
        <script src="https://unpkg.com/b[email protected]/babel.min.js"></script>
        <!--我们自己写的jsx组件-->
        <script type="text/babel" src="./demo.jsx"></script>
      </head>
      <body>
        <div id="app"></div>
        <script type="text/babel">
          window.onload = () => {
            ReactDOM.render(<List />, document.getElementById("app"));
          };
        </script>
      </body>
    </html>
  3. 新建demo.jsx

    const Todo = ({ label, del }) => {
      //无状态组件,只用于展示
      //label, del为props属性,无法被修改
      return (
        <div className="todo-item">
          {label} <button onClick={del}>删除</button>
        </div>
      );
    };
    ​
    class List extends React.Component {
      //class有状态组件
      state = {
        //声明并初始化state
        labelInput: "",
        searchInput: "",
        list: []
      };
    ​
      add = () => {
        //增加方法
        const { list, labelInput } = this.state;
        list.push({ label: labelInput });
        this.setState({ list });
      };
      del = index => {
        //删除方法
        const { list } = this.state;
        list.splice(index, 1);
        this.setState({ list });
      };
      render() {
        //渲染方法
        const { add, del } = this;
        const { list, labelInput, searchInput } = this.state;
        return (
          <div>
            <h1>Todo List</h1>
            {
              //单向数据流
            }
            <input
              type="text"
              value={labelInput}
              onChange={e => this.setState({ labelInput: e.target.value })}
            />
            <button onClick={add}>增加</button>
            <input
              type="text"
              value={searchInput}
              onChange={e => this.setState({ searchInput: e.target.value })}
              placeholder="输入查询"
            />
            {list
              .filter(({ label }) => label.indexOf(searchInput) !== -1)
              .map((v, index) => (
                <Todo key={index} del={() => del(index)} {...v} />
              ))}
          </div>
        );
      }
    }
  4. 命令行输入http-server,启动服务器

  5. 浏览器打开http://localhost:8080/,查看我们的react应用

create-react-app 搭建 React 应用

这个脚手架是用 webpack 来加载 react 应用的,通常我们在开发项目中主要会使用脚手架来搭建并运行部署 react 项目。

步骤

yarn create react-app my-app --typescript
​
cd my-app
​
yarn start

打开浏览器访问http://localhost:3000/,就可以看到,我们的react应用已经开始运行了。