如何搭建react项目

搭建react环境：

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

     npm install -g create-react-app    // 

create-react-app 自动创建的项目是基于 Webpack + ES6 。

create-react-app my-app    //my-app 项目名称，可以改为自己喜欢的名字

跳转到项目目录下

cd my-app/

运行项目

npm start

项目的一些运行方式等。

 npm start                                      ///启动开发服务器。
    Starts the development server.     ///启动开发服务器。

  npm run build                              // 项目打包
    Bundles the app into static files for production.      ///将应用程序捆绑到静态文件中以供生产。

  npm test                                     //npm试验
    Starts the test runner.              //  启动测试运行程序。

  npm run eject                            //    npm运行弹出
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
    //删除此工具并复制生成依赖项、配置文件
以及应用程序目录中的脚本。如果你这样做，你就不能回去！

React 的俩种模板写法

写法1

import React, {Component} from 'react';

class Home extends Component{
// 构造函数，存数据
   constructor(props){
        super(props);

        this.state = {
            name:'刚哥'
        }
   }
   render(){
    return(
        <div>
            <h2>你好, 我是你的Home组件 </h2>
             <p>姓名: {this.state.name}</p>
        </div>
    )
   }
}
export default Home;

写法2

import React from 'react';


class News extends React.Component{
    constructor(props){
        super(props)   // 父子组件传值，|| 固定写法
        // 定义数据
        this.state ={
            list:{
                cty:'热爱舞蹈！'
            }
        }      
    }
    render(){
        return(
            <div>
                <p>12344567887899</p>
                <h1>{this.state.list.cty}</h1>
            </div>
        )
    }
}
export default News;

react 类名的一些差异性：

class  =》 className

<button for="1223"></button>     =》  htmlfor

style ={{‘color’：‘red’ }}

<div style={this.state.style }> </div>    // css可以写到   this.state里面

快速创建模块快捷键
vs安装 Simple React Snippets 或者 React-Native/React/Redux snippets for es6/es7

imrc        ====》import React, { Component } from 'react';

cccs       ====》class Todolist extends Component {
				    constructor(props) {
				        super(props);
				        this.state = {  };
				    }
				    render() {
				        return (
				            
				        );
				    }
				}		
				export default Todolist;