快速搭建react脚手架

Create React App

第一种方式:(请保证你的网络畅通)

新建文件夹,在webstrom中打开文件夹==>命令框内输入下方代码，四小步解决你的问题

Create React App是开始构建新的React单页应用程序的最佳方式。它已经为你设置好了开发环境，以便您可以使用最新的JavaScript特性，提供不错的开发体验，并且可以优化你的生产环境应用。你需要在你的机器上安装Node >= 6 。

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

cd my-app
npm start

第二种方式:(推荐使用)

If you have npm 5.2.0+ installed, you may use npx instead.

npx create-react-

npx create-react-app my-app

cd my-app
npm start

pp my-ap

Create React App不会处理后端逻辑或数据库；它只是创建一个前端构建管道（build pipeline），所以你可以使用它来配合任何你想使用的后端。它使用像Babel和webpack这样的构建工具，但是已经为你配置好了，你可以零配置使用。

第三种方式:(推荐使用)

webstorm里打开文件，新建项目

 

 

搭建好脚手架后，可以尝试在src文件夹下修改APP.js的内容,熟悉一下基本操作,再在src文件夹下新建目录,在新文件夹中新建自己需要书写页面的js,

import React from 'react'

将react引入到新建的js页面中,就可以开始书写自己的页面了

注意的是每一个页面都只有一个根元素,因此,返回时需要一个大的标签作为根元素将其他元素盛起来

import React from 'react'
//通用写法
// function person() {
//     return <h1>
//     111
//     </h1>
//
// }

//es5写法
// var person =function () {
//     return <h2>222</h2>
// }

//es6写法
const  person = (props)=>{
    return (
        <div className="meimei">
        <p onClick={props.myclick}>我是{props.name},今年{props.age}岁</p>
        <input type='test' onChange={props.changed} defaultValue={props.name} />
        </div>
    )
}
export default person;

好了,今天的学习分享到这了,技术咖们欢迎指点