技术控

    今日:135| 主题:49488
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Easy to use React routing and state library!

[复制链接]
四葉草是野草 发表于 2016-10-16 08:06:44
237 5

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Desklamp

   
Easy to use React routing and state library!-1 (children,creation,provides,library,creates)
   
   Please help us improve Desklamp by filling out our Feedback Survey
  Desklamp is a React library which provides a state container and easy creation of routes.
  
       
  • No external dependencies   
  • Provides that creates routes from child components   
  • Passes state to all children of    
  • Passes developer-defined functions to all children of    
  • Robust Desklamp API  
  Navigation

  
       
  • Contribute   
  • Getting Started   
  • Creating Routes   
  • Initializing Your Application
           
    • Creating Initial State     
    • Creating Custom Functions     
    • Creating Custom Navigation     
    • Initializing App with Desklamp.on   
       
  • Built In Functions   
  • Built In Components   
  • Extra Features  
   Quick Start  

   To get started, npm install --save desklamp .
  [code]import { Desklamp, Container } from 'desklamp';
import React from 'react';
import ReactDOM from 'react-dom';

// Normal React components
import Home from './components/Home';
import CreatePost from './components/CreatePost';
import Nav from './components/Nav'; // custom Nav component that you create (See Nav documentation below)

// Create an initial state object
const initState = {
  posts: [],
};

// Create an object with your custom functions as its methods.
const funcs = {}

ReactDOM.render((
  // Child components here become your routable urls
  
    // optional name property for custom route/url name
    // by default, Desklamp will name your route after your component
  

), document.getElementById('app'));

funcs.createPost = (post) => {
    alert(post);
  }

// Initialize Desklamp below your ReactDOM.render
// Pass in your initial state object, funcs object, and your imported Nav
Desklamp.on(initState, funcs, Nav);[/code]  Contribute:

   This module is in active development! We will release a few more iterations in the upcoming weeks. Please submit any issues and/or feature requests and we will try to incorporate them. Or reach out to our team on Gitter
  Getting Started

  Import What you Need

   To set up your own application, start with your index.js file and import Desklamp and Container from the desklamp module.
  [code]import { Desklamp, Container } from 'desklamp';
import React from 'react';
import ReactDOM from 'react-dom';[/code]   Desklamp gives you access to our helper methods. Container gives you the container component with all the application state.
  Creating Routes

   Routing in Desklamp is meant to get you up and running with client-side page navigation and url updates, as well as browser history, as soon as possible. To create basic navigation, simply nest your components inside the Container component Desklamp provides. For example, if you want to create routes for components Home and CreatePost , first define these components as you normally would. Then import them into your index.js file, and then nest them inside the Container component like so:
  [code]import Home from './components/Home';
import CreatePost from './components/CreatePost';

ReactDOM.render((
  
    //creates route /home
   
  

), document.getElementById('app'));[/code]  Initializing Your Application

   Desklamp allows you to keep your state in a single state object. Desklamp gives you many options for state control. The state is automatically available to all of your routes. This functionality is enabled by the Desklamp.on() function.  
  Create initial state

   Create an object representing your initial state. This object represents all data that will be passed down to each route upon render as props.state .
  [code]const initState = {
  username: '',
  posts: [],
  userInfo: {},
};[/code]  Declaring custom functions

   Declare an object to hold your functions. Any functions added as methods to this object will be automatically bound and passed down to all views upon render as props.powers .
  [code]const funcs = {};
funcs.hello = () => {
    console.log("Hello World")
  }[/code]  Creating a Custom Navigation Component

   Create a Navigation React component using our custom component or simple anchor tags. You can mix and match these two approaches, if you wish to link to an external site or a server route on your navigation, simply use a standard anchor tag.
  [code]// example using Desklamp's provided tags
const Nav = () => {
  return (
   
  );
};

// example using normal anchor tags
const Nav = () => (
   
  );[/code]  Initializing your App with Desklamp.on()

   Desklamp.on is the main function you will use to tell Desklamp about your application. This method takes three arguments: the initial state and functions objects we created above, and your Nav component. This will declare your initial state, bind your customized functions to the state and display your custom Navbar across all views.
   The custom functions declared to Desklamp.on will be passed down to your routes as props.powers . You can then pass them as props down to child components as selectively as you would like. The initial state will become your props.state , also available to all the routes you have set up in your Container .
   Desklamp.on() will look like this:
  [code]Desklamp.on(initState, funcs, Nav);[/code]   Example of a component, CreatePost , using its default passed in props and powers:
  [code]import React from 'react';

const CreatePost = ({ state, powers }) => (
   

      

Add a Post


      
   

  );[/code]  Built in Functions

  Desklamp provides some helper methods to make changing views easy.
  Desklamp.changeView()

   Desklamp.changeView() is a function that takes as the first parameter the string name of the route you wish to switch to. The optional second parameter is an object representing the state change you wish to make. This object will be automatically passed to Desklamp.updateState() to update the state of your application before routing. This function allows the developer to make asynchronous calls and change the view only after data is returned.
  [code]createPost: (post) => {
    $.post('http://localhost:3000/newPost', { post }, (data) => {
      Desklamp.changeView('posts', { posts: data.posts }); // call Desklamp.changeView() on successful response
    });
  }[/code]  Desklamp.onLoad()

   Desklamp.onLoad() takes any number of functions and runs them in the componentWillMount section of the Container component. This allows you, the developer to run functions on the initial loading of the application at the highest level.
  Desklamp.updateState()

   Desklamp.updateState() is a function that allows you to update the state of your application from within your custom functions. Desklamp.updateState() takes in an object of the values you would like to change in your state. By default Desklamp.updateState maintains immutability and creates an new object with all of the changes before calling the default React.js setState function.
  [code]const initState = {
  username: '',
  posts: [],
  userInfo: {},
}
Desklamp.updateState({ username:"Harry" }); // maintains immutability by creating a new state object with username "Harry"[/code]  Desklamp.showState()

   Desklamp.showState() is a simple function that can be called anywhere in your application to show the current state. It can be very useful for debugging and logging what your state looks like if you are experiencing issues with your state data not looking how you think it should. The function call returns the current state object.
  Built in Components

   Desklamp provides components to link to your routes. These components take a view property referring to the route (without the # ) and tag refers to the displayed text of the link.
  [code]import { Desklamp, Container } from 'desklamp';
import React from 'react';
import ReactDOM from 'react-dom';0[/code]  Upcoming Features

  Desklamp automatically keeps track of a history of application state. Currently developing useful rollback of state and exposure of history object to the developer.
  Debugging

  We are continually adding and improving error handling messages to help with debugging. Please submit any suggestions or requests to help us improve our error messages.
  Misc

  A floor lamp is a desk lamp if you put it on your desk.
友荐云推荐




上一篇:Submit your CFP for NodeConf Budapest today!
下一篇:The Complete Beginner’s Guide to DROP IF EXISTS in SQL SERVER
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

12311111 发表于 2016-10-19 00:22:52
学习下
回复 支持 反对

使用道具 举报

duniang334 发表于 2016-10-19 01:29:57
来,来,干了这杯翔!
回复 支持 反对

使用道具 举报

盼海 发表于 2016-10-19 02:26:11
人生如戏,全靠演技。
回复 支持 反对

使用道具 举报

沫颜丶 发表于 2016-10-31 15:49:09
我喜欢上学,我只是不喜欢上课。
回复 支持 反对

使用道具 举报

晓博 发表于 2016-11-18 11:03:17
本人已成仙,有事请发烟,佛说有烟没火成不了正果,有火没烟成不了仙!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表