Desklamp: All-in-one routing and immutable state library for React.
Desklamp’s goal is to provide developers a simple persistent immutable state container combined with built in routing. Below is a walkthrough of a sample two page app created using Desklamp and React.
The first step is to npm install desklamp into your React project —
Next, create an index.js file and import the Desklamp and Container properties from Desklamp along with React and ReactDOM.
The next step is to use the Desklamp Container component to surround the top level components you wish to be routes. For this example we are going to have two components, login and posts so our ReactDOM.render will look like this:
By default, the login and posts components are now our routes under the names “login” and “posts”. If we want to alter the name that shows up in the URL, we simply add a name property to our components and Desklamp will handle the rest!
Now our URL bar looks like this when the user navigates to the login page —
Cool! Now that we have decided what we want to render lets create our initial state. In our index.js file, just below the ReactDOM.render function, lets create an object and put our desired initial state in it—
We will use our initial state to store the username of the person after they log in, the posts that they’ve created and their user info.
Our next step is to create our functions object. This object will be passed to the Desklamp.on() function and will be passed automagically to all of the top level route components listed inside our Container component above.
As you can see, we created a function called “login” inside of our funcs object. We will be passing the username and password from our login form, (which I will show you in a minute) to the login function. We will then use jQuery to make a simple post request to our server. That post request will send us back all of the user info and trigger a get request to the same server in order to get all of the post information.
Something else you might notice is the Desklamp.changeView() function. The changeView function takes in a route as the first parameter (the route you would like to switch to) and an object. The object is how you would like to change your state(Remember we handle these state changes using the immutable paradigm).
The next step is to create a Nav component that will help control our routes. Create a folder called “components” to keep all of your custom components in. Inside that folder, create a Nav.jsx file.
Because Desklamp handles the state and function for us, we will make Nav a stateless React component.
Another feature that Desklamp provides is a custom Link component. All you have to do is set a view prop with your desired route, remember this is the component name all lowercase by default or the name tag you choose above. You can also provide a tag prop with a string of the text you would like your link to display.
Another component that we will need is the login. In your components folder create a file called Login.jsx. Here is what your login page could look like with Desklamp —
The main point to grasp here is that your custom functions that we put in the funcs object above are passed through to all of your top level components as “powers”. Another important point is that this allows you to use stateless components everywhere! /cheer
The next and final React component that we will create will be our Posts component. In our components folder we need to create a file called Posts.jsx. Here is an example of what Posts could look like —
Just like “powers” above, the state object is passed to all of your top level components by Desklamp. Thanks Desklamp!
The next step is to go back to our index.js file and pass the initial state object, funcs object and the Nav component we created to the Desklamp.on() function. This is where all the magic happens!
As you can see, with a few functions you can create an awesome application for you and your friends to enjoy for years to come!!!
