Luciano Mammino 𝕏 Node.js Design Patterns Profile picture
#AWS #Serverless Hero & MVP. Senior Architect @fourTheorem, author of 📕 https://t.co/Vhhe4G4GCN & ✉️ https://t.co/XMK2BWythj #Nodejs, #JavaScript, #Rust 🦀 & #Cloud ☁️

Jul 28, 2020, 11 tweets

⚛️ 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…)

5. 🤔 Let's configure #Webpack (webpack.config.js)

(github.com/lmammino/react…)

6. 🐞 Let's set up some useful npm scriptz (like the cool kidz) in our package.json:

7. 🏇 Almost there... Now let's create a great index component (src/index.js)

8. 📄Create a little template for your HTML (src/index.ejs):

(github.com/lmammino/react…)

9. 🧐 See it in action with `npm start`, build it with `npm run build`!

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!

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling