请选择 进入手机版 | 继续访问电脑版

技术控

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

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

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

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

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

x
Desklamp

   

Easy to use React routing and state library!

Easy to use React routing and state library!
   
   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 <Container /> that creates routes from child components   
  • Passes state to all children of <Container />   
  • Passes developer-defined functions to all children of <Container />   
  • 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 .
  1. import { Desklamp, Container } from 'desklamp';
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. // Normal React components
  5. import Home from './components/Home';
  6. import CreatePost from './components/CreatePost';
  7. import Nav from './components/Nav'; // custom Nav component that you create (See Nav documentation below)
  8. // Create an initial state object
  9. const initState = {
  10.   posts: [],
  11. };
  12. // Create an object with your custom functions as its methods.
  13. const funcs = {}
  14. ReactDOM.render((
  15.   // Child components here become your routable urls
  16.   <Container>
  17.     <Home name="home" /> // optional name property for custom route/url name
  18.     <CreatePost /> // by default, Desklamp will name your route after your component
  19.   </Container>
  20. ), document.getElementById('app'));
  21. funcs.createPost = (post) => {
  22.     alert(post);
  23.   }
  24. // Initialize Desklamp below your ReactDOM.render
  25. // Pass in your initial state object, funcs object, and your imported Nav
  26. Desklamp.on(initState, funcs, Nav);
复制代码
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.
  1. import { Desklamp, Container } from 'desklamp';
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
复制代码
  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:
  1. import Home from './components/Home';
  2. import CreatePost from './components/CreatePost';
  3. ReactDOM.render((
  4.   <Container>
  5.     <Home /> //creates route /home
  6.     <CreatePost />
  7.   </Container>
  8. ), document.getElementById('app'));
复制代码
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 .
  1. const initState = {
  2.   username: '',
  3.   posts: [],
  4.   userInfo: {},
  5. };
复制代码
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 .
  1. const funcs = {};
  2. funcs.hello = () => {
  3.     console.log("Hello World")
  4.   }
复制代码
Creating a Custom Navigation Component

   Create a Navigation React component using our custom <Link/> 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.
  1. // example using Desklamp's provided <Link/> tags
  2. const Nav = () => {
  3.   return (
  4.     <nav className="nav">
  5.       <ul>
  6.         <li><Link view={'/home'} tag={'home'} /></li>
  7.         <li><Link view={'/createpost'} tag={'add post'} /></li> <!-- view is the name you gave the route in ReactDom.render(), tag is the display text of the link -->
  8.         <li><a href="https://github.com/desklamp-js/desklamp">Desklamp Github</a></li>
  9.       </ul>
  10.     </nav>
  11.   );
  12. };
  13. // example using normal anchor tags
  14. const Nav = () => (
  15.     <nav className="nav">
  16.       <ul>
  17.         <li><a href="#/home">home</a></li> <!-- Desklamp routes should begin with `#` -->
  18.         <li><a href="#/createposts">add post</a></li>
  19.         <li><a href="https://github.com/desklamp-js/desklamp">Desklamp Github</a></li>
  20.       </ul>
  21.     </nav>
  22.   );
复制代码
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:
  1. Desklamp.on(initState, funcs, Nav);
复制代码
  Example of a component, CreatePost , using its default passed in props and powers:
  1. import React from 'react';
  2. const CreatePost = ({ state, powers }) => (
  3.     <div>
  4.       <h1>Add a Post</h1>
  5.       <button onClick={() =>  powers.createPost(state.posts[0])}>Alert</button>
  6.     </div>
  7.   );
复制代码
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.
  1. createPost: (post) => {
  2.     $.post('http://localhost:3000/newPost', { post }, (data) => {
  3.       Desklamp.changeView('posts', { posts: data.posts }); // call Desklamp.changeView() on successful response
  4.     });
  5.   }
复制代码
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.
  1. const initState = {
  2.   username: '',
  3.   posts: [],
  4.   userInfo: {},
  5. }
  6. Desklamp.updateState({ username:"Harry" }); // maintains immutability by creating a new state object with username "Harry"
复制代码
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 <Link/> 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.
  1. import { Desklamp, Container } from 'desklamp';
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';0
复制代码
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-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表