REACT Study Notes---project construction

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