How To Write React Efficiently with Prop-Passer
Less is more. Remove up to 50 % of JSX inside React App.
So you may feel confident that you are writing React App efficiently. But what if you are repeating codes without perceiving?
So what I mean by this sentence?
I will explain for you with this post.
I have been coding React almost a year. I have built SPA. But I wondered how I can reduce my app size and searched for the patterns such as HOC, children(render) pattern and React API .
I found them useful and they helped me a lot. But after playing with them, I thought that there are still things to improve.
I doubt “If I know I will wrap child elements with<li>, <div>, <section>, <RouterLink> everytime and pass the same class, className and other props why should I even copy and paste them?”
It was not easy to solve this problem at first. Because JSX codes inside React App are not that flexible to tweak.
I wanted to make my own solutions and learnt more about React API to find how.
React Doucmentation explains that you should use its API when you want to write React dynamically.
Then I wrote some modules with it and want to share prop-passer NPM package with you.
It is a very new project and hope you like it. But before that, I should write better documentation for others.
So I write this blog post also. I will show you its API with examples.
You may visit NPM prop-passer page at this moment and back here.
I also let the Codesandbox example early at this point.
Because I think writing code together is better way to learn programming than just reading.
https://codesandbox.io/s/8n3m4wy480
You can play with it.
[Table of Contents]
- The Start
- Code and prop-passer API
- What is next?
- Conclusion
1. The Start
You can skip this part if you have React installed already.
It is a little bit tricky to set up React projects. So I want you to read Learn React.js in 5 minutes by Per Harald Borgen.
Otherwise, I hope you use the Codesandbox example above or use create-react-app to start.
From now on, I will assume that you are using the Codesandbox example.
If you want to code locally, You just need React and there is no more things to install.
Why? The prop-passer is abbreviatd React API with FP. So you need only React and it will work.
2. Code and prop-passer API
So you want to know how prop-passer will help you write less code?
I can explain them first but I think that the best way to learn code is see the real code examples.
I will show you the simple code snippet from prop-passer github page.
What happened here?
If you read the code below // will generate code below, You will see that <li style={ { listStyle: “none” } } key=”p-xxxxx” ></li> are repeating themselves.
I am sure that you wouldn’t like to write code like that.
You don’t have to copy and paste what you know all the time.
Then you can use pass module like the code snippet above.
- Write element type for the first argument(It is (“li”) instead <li></li>)
- prop { key: “p-xxxxx”, style: { { listStyle: “none” } } } but you don’t have to because prop-passer gives you them as default values.
- and put the elements inside [] that you want to render dynamically
You may think that it is complicated at the beginning.
Each JSX element is just syntactic sugar for calling
React.createElement(component, props, ...children). So, anything you can do with JSX can also be done with just plain JavaScript.
Following React Documentation, React elements are just plain JavaScript objects and array etc.(I suggest you to read more documenation and source code of prop-passer later.)
It is just abbreviation of what happens inside JSX in React App.
‘prop-passer’ was also giving you default key and style for you so that you don’t have to worry about them at all and saving your time. [2]
That was just a start and you saw how pass API Works.
From now on, I will show you more modules of prop-passer. They will help you write less code and easy to undestand.
[prop-passer API]
- copy
- repeat
- Prop
- PropPasser
- Passers
- key
#1. Copy
Do you need a placeholder of the same element? and you don’t want to copy and paste them all the time?
Use copy from prop-passer
```
import { copy } from 'prop-passer';const original = "will be copied a thousand times";
let aThousandCopies = copy(original)(1000);// inside react app
return (
<section>{aThousandCopies}</seciton>
)
```
That was easy.
You just pass how many times and what to copy inside its function arguments.
It will be useful when you develop or you can use it with Prop element that I will introduce later.
It helps you pass exact same props to children elements.
#2. Repeat
Do you need some function exectuion repeated over and over again?
‘prop-passer’ gives you a function repeat.
```
import { repeat } from 'prop-passer';const repeatThis = function(){
console.log("Be repeated 150 times")
}const executeManyTimes = repeat(repeaThis)(150);// You will see it("Be repeated 150 times") repeated 150 times
```
You can use it for testing. The limit number is 150 by prop-passer.
That is not so relevant for the purpose of the package. It is just included for test and limited to protect your app later.
#3. Prop
If you are a React Developer, You should know what prop means. It is just data passed from the parent element to children elements and it has syntax such as <element prop={prop from parent element} /></element> .
It is not so complicated but sometimes you will find that you are passing same props again inside lists, menus, images, videos etc.
(I don’t want to mention how some specific CSS frameworks encourage you to repeat class names and wrappers here.)
So you don’t like to copy and paste again.
Then Prop comes to help you.
Let me show the code snippet below.
Suppose you have code examples that are well tested or code that you wrote and know that they would work without problems.
You will find that you are passing same class names for wrapper components and child components.
So here comes the Prop to save your space. You just define common parts inside its required argument once.
You just need to use : inside object instead of = inside JSX for prop definition.
Is it not familiar with you yet?
You just need to make JavaScript objects to pass.
You end up separating props from JSX syntax like you separated inline-style with styled-components inside React APP.
They are now reusable and even replacable dynamically later with help of prop-passer.
You see that code snippet below // equal to is afar different from the code snippet inside return () right?
Prop helps you pass the same props to child elements.
But what if you don’t want your children components have exact same props?
So prop-passer gives you built-in methods.
You can replace given props with its own props at JSX level. You just need common sense when you code with prop-passer.
You want replace it? write it again at more specific level.
In case of class, className and rewrite, they are reserved words.
Class and className are not replaced but will exist with others.
You also don’t have to worry about CSS frameworks.
You can still use casacading feature of CSS with prop-passer and when classNames are shared? You just define once with prop-passer.
You can still replace other class, className or even other ‘rewrite’ with rewrite prop as you can see at the code snippet below.
(Whenever you want, You can even toggle or remove entire class by giving rewrite only at JSX level and { rewrite: true } inside object)
(Don’t miss that you could pass another src to <img /> element at the last part of it.)
So that was a long instruction for Prop. I explained a lot because it shows the main concepts of the prop-passer.
We still have PropPasser, Passers and key. PropPasser and Passers are just a parent element and many(N) parent elements included with the role of Prop. I will show you more with code examples.
#4. PropPasser
Think about someone passing anything to you. PropPasser does exactly same thing for children elements. It is just a wrapper element that pass a prop for children elements.
Just <section class=”for section”></section> element is included with the role of Prop. You can now use Prop and its wrapper element with help of PropPasser.
That wouldn’t be difficult to understand.
#5. Passers
Passers are just a plural version of PropPasser. I think that it is better to understand with examples again.
You will see that the code snippet is not so different from ones before. In this case I showed more verbose code examples. Because we are almost at the last part of this post.
‘prop-passer’ makes key and { { listStyle: “none” } } again for your sake by default again. You can also find that it also passed <li></li> wrapper elements for each child element.
It is similar to how pass module helped you before but with common props for children elements.
So you got the point of prop-passer?
You don’t have to make your JSX code repeated.
Even when codes are inside JSX syntax with HTML format. There is a way to reduce those code lines.
prop-passer module will help you with FP.
(It copies data you pass inside JSX props and object. It is similar to how Redux integrate state behind the scene.)
The two images below are just to show how the number of code lines can be reduced with prop-passer.
(Actually, the latter example results in more codes.)
#6. key
This is not the main part again. But it is to save your time without the need to install heavy dependencies.
We know that React App only needs keys when you use <li></li> elements as wrappers. But ‘prop-passer’ is already helping you to not to do so. You don’t have to make key manually anymore.
It helps you do that with just a few lines of code.
It just make p-xxxxx form key for each <li></li> element so you can find elements used with prop-passer easily.
If you still want to make your alphanumeric custom key anyway. You can use
```
import { key } from 'prop-passer';// You can make your own keykey(10) // euqals to alphanumeric xxxxxxxxxx// and should include it manually at each jsx inside React App
// Don't pass it inside object such as { key: x } for they will
// have the same.
```
So that was the end of prop-passer API.
I wanted to write more about how prop-passer works behind the scene. But I will need to write a very long post to explain all process. So I decided to show you how it works with simple examples.
I hope it helped you reduce JSX inside React App and you to think in different way to write React code.
3. What is the next?
I see many React Patterns can be automated with help of FP. I want to integrate render prop patterns and others relevant to it.
We can also expand prop-passer for other packages and use it inside JavaScript without framework also.
The more examples and helper functions will be included later.
4. Conclusion
That was my first blog post here and about prop-passer also.
I hope you liked it and use it with your React Project.
It is very new and need your help and opinions. So let me know with comments or Github PR if there are problems.
Haven’t played with the Codesandbox example yet?
That is ok. Just use prop-passer with your own code.
Thanks for reading and please share this post.
p.s
- Did you like my coding style? Work with me. Please, send messages via LinkedIn. You can also let me know when there is an open source project to contribute.
- I hope you read source code and make your own prop-passer if you may.
Further Reading
- React Children API blog post
- Redom by Juha Lindstedt to use similar concepts without Virtual DOM and React
I am not a native English speaker. When some words don’t make sense, grammar problems etc. Please leave a comment below. I will read this post again and edit them right away.
