⚛️ Create #React App (CRA) it's a wonderful tool, but IMHO it tries to do too much and tends to give you a bloated setup.

If you are like me and prefer to start simple and build incrementally, here's a React scaffold alternative in just 10 simple-ish steps!

🧵 A thread 👇
1. 🥳 Create and init your project

mkdir my-new-react-project && cd my-new-react-project && npm init -y
2. 🎁📦🎁 Let's install some dev deps:

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader core-js html-webpack-plugin webpack webpack-cli webpack-dev-server
3. ⚛️ Let's install React

npm i --save react react-dom
4. 🌎 let's configure babel (.babelrc)

(github.com/lmammino/react…) Image
5. 🤔 Let's configure #Webpack (webpack.config.js)

(github.com/lmammino/react…) Image
6. 🐞 Let's set up some useful npm scriptz (like the cool kidz) in our package.json: Image
7. 🏇 Almost there... Now let's create a great index component (src/index.js) Image
8. 📄Create a little template for your HTML (src/index.ejs):

(github.com/lmammino/react…) Image
9. 🧐 See it in action with `npm start`, build it with `npm run build`! Image
10...

🥺Too long?
😎There is a shortcut for you, just clone github.com/lmammino/react… (Give it a little ⭐️, will you?)

😵Too boring?
😐 You can still use Create React App, but at least now you know how to create your own minimal alternative!

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Luciano Mammino 𝕏 Node.js Design Patterns

Luciano Mammino 𝕏 Node.js Design Patterns Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @loige

Sep 15, 2022
Here are 6 of my favorite third-party libraries when building CLI applications using #NodeJS

Want to know why?👇🧵
commander ➡️ npm.im/commander

Simple yet powerful command-line argument parser. It automatically generates help messages and can be configured to support multiple commands.

I ❤️ it bc it's not prescriptive, you can organize the code as you want (1 file or more).
conf ➡️ npm.im/conf

How many times did you have to store settings (creds & other preferences)? Where do you save the conf file? Which format do you use? How do you load and update the file?

Conf takes care of all of this (and more!) with an extremely simple API
Read 10 tweets
Aug 3, 2022
"Yo, why are #JavaScript and its ecosystem so messy?!" 😡

Well, I am glad you asked... Let me tell you a story! 🤓

🧵👇
For starting... #JavaScript was not designed to be the language that it is today!

JS was created in 1995 by @BrendanEich for Netscape, a web browser that was trying to come up with a language to make the web more interactive
@BrendanEich #JS wasn't related w/ #Java, so why did they call it Java-Script?! Duh! 😳

Java was trendy! it was possible to build interactive sites by embedding Java apps in pages (applets). So it was mostly a #mktg move: "JS: the lightweight Java alternative" or something like that I guess
Read 40 tweets
May 25, 2021
I have been confused for a while on what's the best way to implement a "to string" functionality for a #Rust struct. 🦀

The reason why this has been confusing to me is that there are indeed many ways to do that and they all have different purposes!

This is what I learned

👇🧵
The first thing that you can do is to just implement a simple `to_string()` function directly on your struct!

play.rust-lang.org/?version=stabl…
This is easy and it works! But the implementation is very specific to our struct.

The rest of the codebase doesn't really know that this type can be converted to a String and therefore you cannot build abstractions on top of this... 🤨
Read 23 tweets
Oct 1, 2020
Do you know what's in a #JWT token?

Here's a quick thread to learn something about this! 👇
A JWT token (JSON Web Token) is just a string with a well-defined format. A sample token might look like this:

```
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJoZWxsbyI6ImZyb20gSldUIn0.XoByFQCJvii_iOTO4xlz23zXmb4yuzC3gqrWNt3EHrg
```
There are 3 parts separated by a `.` (dot) character:

- header: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
- body: eyJoZWxsbyI6ImZyb20gSldUIn0
- signature: XoByFQCJvii_iOTO4xlz23zXmb4yuzC3gqrWNt3EHrg
Read 13 tweets
Sep 17, 2020
@eleven_ty micro tip: Give eleventy some credit by injecting a "generator" meta tag in your HTML! 🔥

Frontpage and Dreamweaver used to get credit this way, why shouldn't we give Eleventy some credit too? 😇

(a short thread in 3 steps 👇) Image
STEP 1. Create a data file in `_data/site.js` with the following content: Image
STEP 2. Create your base layout `_includes/layout.njk` and use the variable `{{ site.generator }}`: Image
Read 8 tweets
Aug 18, 2020
✨ Rob Pike's 5 Rules of #programming

#golang #simplicity

🧵👇
1️⃣ You can't tell where a program is going to spend its time. Bottlenecks occur in surprising places, so don't try to second guess and put in a speed hack until you've proven that's where the bottleneck is.
2️⃣ Measure. Don't tune for speed until you've measured, and even then don't unless one part of the code overwhelms the rest.
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(