Brief introduction
Reactjs because of the support of FB, the community has been a great concern, and because Reactjs only want to do a good job on the view level, so it does not involve a lot of peripheral tools.
Today, to introduce a tool that includes a tool for building project templates, there is a platform for beginners to learn, develop, and test.
Yeoman
The official introduction is described as: "Web app Scaffolding Tool"---yeoman is designed to help users better start projects, providing the best practices and tools to maintain high productivity.
Yeoman provides a generator ecosystem and provides a "yeoman workflow" that integrates three parts of the workflow:
- Scaffolding Tools Yo
Responsibilities: Management Pack dependencies, record build configuration information, etc.
Project Address: Https://github.com/yeoman/yo
?
-Build Tool Grunt
Responsibilities: Build tools, more popular with grunt and gulp
Project Address: http://gruntjs.com/
http://gulpjs.com/
-Package Manager Bower
Responsibilities: Package dependency management tool, avoid manual installation, compare popular with Bower and NPM
Project Address: http://bower.io/
https://www.npmjs.com/
Project Building
Take the example of a Mac:
1. Start the terminal and go to the specified directory:
NPM Install-g yo
2. Install the generator (generator):
NPM install-g Generator-react-fullstack
3. Build the React-fullstack project template:
Yo React-fullstack
4. Start the project page:
NPM start
5. Open the browser:
Template structure
Template structure The best is to refer to the official content, here is not an example.
Ract-starter-kit Official Address: Https://github.com/kriasoft/react-starter-kit
. # root directory ├──/build/# compile output Directory ├──/docs/# project-related document directory ├──/node_modules/# 3 Section D and Tools catalog ├──/src/# code Source directory │├──/actions/# Actions directory │├──/api/ # REST API Directory │├──/components/# react component Directory │├──/constants/# constants (Action types etc) │├──/content/# Static Content directory (plain HTML or Markdown, Jade, you name it) │├──/core/ # Core Components (Flux dispatcher, base classes, utilities) │├──/decorators/# Higher-order Rea CT components High level React component library │├──/public/# static files which is copied into The/build/public folder static file Library │├──/stores/# stores contain the application state and logic program run-time status and logical warehouse │├──/utils/ # Utility classes and Functions tools classes and Methods │├──/app.js # Client-side startup script client startup scripts │├──/config . js # Global application Settings Universal Settings │├──/routes.js # Universal (isomorphic) application Routes general application Program Routing │└──/server.js # server-side startup script Server-side startup scripts ├──/tools/# Build Automation Scripts and utilities automatically build scripts and tools │├──/lib/# Library for utility Snippets Tool tip library │├──/build.js # Builds the project from source to output (build) folder compiles output from source │├──/bundle.js # Bundles the Web R Esources to package (s) through Webpack packaging resources through Webpack │├──/clean.js # cleans up the output (build) Folde R Clean output folder │├──/webpack.config.js # configurations for client-side and Server-side bundles Configure client and server-side packaging tools │├──/copy . js # Copies static files to output (build) folder copy static file │├──/deploy.js # deploys your web Application Publish Web program │├──/serve.js # launches the Node.js/express Web server startup service │└──/start.js # launches the DeveLopment Web server with "Live Reload" launch development mode with constant update │──package.json # the list of 3rd party libraries and UT Ilities3d Partial list └──preprocessor.js # ES6 Transpiler settings for Jest ES6 settings
More information
@ Little Wolf's World-yeoman Introduction: http://www.cnblogs.com/cocowool/archive/2013/03/09/2952003.html
Yeoman Official address: http://yeoman.io/
REACT Study Notes---project construction