1. 程式人生 > >react腳手架 專案建立

react腳手架 專案建立

官方:

npm install -g create-react-app

create-react-app my-app //建立react專案

cd my-app

rm -f src/*

 

Add a file named index.css in the src/ folder

Add a file named index.js in the src/ folder

Add these three lines to the top of index.js in the src/ folder:

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css';

Now if you run npm start in the project folder and open http://localhost:3000 in the browser, you should see an empty tic-tac-toe field.

 

yo:

////////////////////////////////////////////////////////

(推薦)

https://github.com/react-webpack-generators/generator-react-webpack

npm install -g generator-react-webpack

cd 目錄

yo react-webpack 專案名字

///////////////////////////////////////////////////////////

https://github.com/stylesuxx/generator-react-webpack-redux

npm install -g generator-react-webpack-redux

npm install -g phantomjs-prebuilt

 

Setting up projects

# Create a new directory, and `cd` into it: mkdir my-new-project && cd my-new-project # Run the generator yo react-webpack-redux

Generating new reducers

yo react-webpack-redux:reducer my/namespaced/reducers/name yo react-webpack-redux:reducer items

Generating new actions

yo react-webpack-redux:action my/namespaced/actions/name yo react-webpack-redux:action addItem

Generating new components

yo react-webpack-redux:component my/namespaced/components/name yo react-webpack-redux:component button

Generating new containers

yo react-webpack-redux:container my/namespaced/container/Name yo react-webpack-redux:container wrapper

 

///////////////////////////////////////////////////////////////