react的创建

反应配置的时候,发现很多都是一步一步来配置文件的,不过好处的是,可以帮助我们理解的WebPack,而这配置也太慢了,如果没存好,还得再来一遍!

1、当然,我们有快速搭建项目的指令:

npm install -g create-react-app

2、创建项目:列如(my-app

create-react-app my-app[你想要的项目名称]

复制代码
在该目录内,您可以运行几个命令:

  NPM开始
    。启动开发服务器

  NPM构建运行
    将应用程序捆绑资料到静态文件中进行。生产

  NPM测试
    。开始测试跑步者

  NPM运行弹出 
    删除此工具并复制构建依赖项和配置文件
    和脚本到应用程序目录中。如果你这样做,你不能回去! 
我们建议您先输入以下内容:
  cd grewer 
  npm开始

这里基本都很清楚地给我们了知道了;

3、可以启动了:

npm stsrt

如果你的构建速度慢的话,可以考虑一下使用cnpm。

复制代码
class grewer extends React.Component {
    constructor(props){
super(props); this .state = {} } render(){ return <div> Hello!</ div>; } }
复制代码

 

 

反应的引用组件可以是任何位置的,比如他在当前页面的话:

复制代码
function LoginButton(props){
   return <button onClick = {props.onClick}>
      Login
    </ button>
   );
}



class App extends React.Component {
...
    render(){
     return <div> welcome!<LoginButton onClick =“this.methods”/> </ div> ;  
}
...
}
复制代码

 可以直接就放在上面了,而如果是其他页面,也可以引用,如:

components.js:

1
2
3
class  App  extends  React.Component {
...
};
export  default  App;

index.js(主页面):

1
import  Grewer from  './components.js' ;

然后再渲写写上 

1
<Grewer  />

就可以了;



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值