REACT Study Notes---project construction

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.