从零开始创建自己的React项目

create-react-app+node+npm+andt来完成自己的首个项目。

一、按这个步骤走下去：

• npm install -g create-react-app

• create-react-app my-app

使用命令创建应用，myapp为项目名称

• cd my-app

进入目录，然后就启动

• npm start

启动之后打开的页面（localhost:3000）：

现在我们的目录结构：

其中src文件夹中的index.js是整体的入口文件；public中的index.html是承载主体，现在你可以尝试修改App.js中的return后面的代码，修改页面显示；

二、我们引入路由

npm install --save react-router-dom

react 的路由在4.0版本以后分离开来；如果你只是想做PC端的页面，那么react-router-dom就够用了。

安装完之后可以在项目目录src下创建几个文件夹
修改App.js

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 (
          
            

              家
              产品
              我们
              

               家
               产品
              我们
              

              
              
              
            
              
          
               
        );
    }
}

export default App;

About.js

import React from 'react';

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

export default About;

Home.js

import React from 'react';

class Home extends React.Component {
    render() {
        return (
                
hihihihi
        );
    }
}

export default Home;

Product.js

import React from 'react';

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

export default Product;

效果图：

至此一个简单的路由就完成了。