create-react-app安装及使用_React

上一篇: react学习系列之states与props 下一篇:react进阶系列：高阶组件详解（三...

create-react-app安装及使用

发布时间：2019-06-19 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了create-react-app安装及使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

create-react-app学习之前可以从它的官网开始了解
推荐网址
安装
推荐网址
按这个步骤走下去：

npm install -g create-react-app
create-react-app my-app

使用命令创建应用，myapp为项目名称
cd my-app
进入目录，然后就启动
npm start
启动之后打开的页面：

这是我现在的项目目录：

下面代码：
如果觉得不舒服，可以自己新建文件夹
在App.js先写一些东西，看看它是否运行

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React, { component } From 'react';

class App extends Component {
  render() {
    return (
      asDFghj
    );
  }
}

export default App;
" tITle="" data-original-title="复制">
      
      
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>asdfghj</h1>
    );
  }
}

export default App;

这是运行的效果图：

安装最后一步:推荐网址
npm install --save react-router-dom
安装完之后可以在项目目录src下创建几个文件夹

看我的代码：
App.js

      
      
      React,{ Component } from 'react';
import { browserRouter, Route,Link} from 'react-router-dom';


import Home from './components/Home';
import PRoduct from './components/Product';
import About from './components/About';

class App extends Component {
    render() {
        return (
          
            
              家
              产品
              我们
              

               家
               产品
              我们
              

              
              
              @H_126_142@
            
              
          
               
        );
    }
}

export default App;
" title="" data-original-title="复制">
      
      
import React,{ Component } from 'react';
import { BrowserRouter, Route,Link} from 'react-router-dom';


import Home from './components/Home';
import Product from './components/Product';
import About from './components/About';

class App extends Component {
    render() {
        return (
          <BrowserRouter>
            <div>
              <a href="/abc">家</a>
              <a href="/abc1">产品</a>
              <a href="/abc2">我们</a>
              <br/>
              <Link to="abc"> 家</Link>
              <Link to="abc1"> 产品</Link>
              <Link to="abc2">我们</Link>
              <br/>
              <Route path="/abc" component={Home}/>
              <Route path="/abc1" component={Product}/>
              <Route path="/abc2" component={About}/>
            </div>
              
          </BrowserRouter>
               
        );
    }
}

export default App;

About.js

      
      
      .COMponent {
    render() {
        return (
                关于我们
        );
    }
}

export default About;
" title="" data-original-title="复制">
      
      
import React from 'react';

class About extends React.Component {
    render() {
        return (
                <h1>关于我们</h1>
        );
    }
}

export default About;

Home.js

      
      
      
      
      
import React from 'react';

class Home extends React.Component {
    render() {
        return (
                <h1>hihihihi</h1>
        );
    }
}

export default Home;

Product.js

      
      
      
      
      
import React from 'react';

class Product extends React.Component {
    render() {
        return (
                <h1>产品列表</h1>
        );
    }
}

export default Product;

效果图：
@H_993_406@