Create React App前端
第一种方式:(请保证你的网络畅通)react
新建文件夹,在webstrom中打开文件夹==>命令框内输入下方代码,四小步解决你的问题webpack
Create React App是开始构建新的React单页应用程序的最佳方式。它已经为你设置好了开发环境,以便您能够使用最新的JavaScript特性,提供不错的开发体验,而且能够优化你的生产环境应用。你须要在你的机器上安装Node >= 6 。git
npm install -g create-react-app create-react-app my-app cd my-app npm start
第二种方式:(推荐使用)es6
If you have npm 5.2.0+ installed, you may use npx instead.github
npx create-react-web
npx create-react-app my-app cd my-app npm start
pp my-ap数据库
Create React App不会处理后端逻辑或数据库;它只是建立一个前端构建管道(build pipeline),因此你能够使用它来配合任何你想使用的后端。它使用像Babel和webpack这样的构建工具,可是已经为你配置好了,你能够零配置使用。npm
第三种方式:(推荐使用)后端
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;
好了,今天的学习分享到这了,技术咖们欢迎指点