Hello React Lovers, Are you tired, looking for how to build React Embeddable widget using webpack? best articles. Here is the best article. In the end of this article you will see why I said this is the best article. So lets start the article “Build React Embeddable widgets using webpack” and Redux.
- Setup React app with webpack and babel
- Install some dependencies you may need
- Creating files and folders
- Run and Build
- Parcel build is failing “bundle.scss:undefined:undefined: plugin is not a function” ERROR
Here is my “React Embeddable widgets” repository in GitHub. Click here to get the repo. Make sure to follow my GitHub.
1. Setup React app with webpack and babel
In here I am creating a small React app to show you how to create Embeddable widgets using webpack. Without using npx create-react-app APP_NAME command, I am going to setup my react app with webpack and babel. first setup the folder with npm.
You will see some basic questions when you give “npm init” command. If you want to change that settings, change it!. or Stay with default settings. Finally you will see a package.json file in the root directory. After that create two folders in the root directory. Name them as “src” and “public“. Inside the src folder, I am going to create another two folders as “Components” and “Widgets”. Then inside the public folder, create a new html file called “index.html”
2. Install some dependencies you may need
first we need to install react and react-dom
To setup the webpack, we need to install the webpack to your project.
After that we need to install babel.
After that installing those dependencies, go to package.json file and change the “script” like this.
“start”: “webpack –mode=development”,
“build”: “webpack –mode=production”,
“dev”: “webpack-dev-server”
},
3. Creating files and folders
After installing dependencies, let’s get into create files. In my project, I created two folders inside the src folder and named those folders as “components” and “widgets”.
We are using components to design and implement what we need to do and we are using widgets to build our widget files.
Then we are going to create components inside the components folder. In my project, I named those files as nameComponent.js and searchComponent.js. Here are the codes that I implemented in mine.
- nameComponent.js – click here
- searchComponent.js – click here
- nameComponent.js ( with redux) – click here
- searchComponent.js ( with redux) – click here
After that, let’s create widgets. Inside the widget folder, I created two files to above two components. I named those files as “nameWidget.js” and searchWidget.js“. Here are the codes,
- nameWidget.js – click here
- searchWidget.js – click here
- nameWidget.js ( with redux) – click here
- searchWidget.js ( with redux) – click here
In my searchComponent file, there is a text input field and a button. User can enter a value and can press the button. After that the user can see the entered value in the nameComponent. In my project, that is the scenario. I am passing data using react pros and catch those value using react state. This is a simple “React Embeddable widgets project using webpack”. In here, I am using redux to store the input value.
4. Run and Build your React Embeddable widgets
Now let’s run our project. First of all, make sure to edit your package.json file’s “script” part like this. I mentioned this part in the above.
“start”: “webpack –mode=development”,
“build”: “webpack –mode=production”,
“dev”: “webpack-dev-server”
},
If you want to run your project, you can use,
If you want to build your project’s widgets. you can do like this.
5. Parcel build is failing “bundle.scss:undefined:undefined: plugin is not a function” ERROR webpack
This is seems to be a bug in Parcel’s nanocss. I could only fix it by not minifying the css at all, using
this is issue is come when your version is old, with the new npm i parcel vertion, this issue seems to be resolve.
Here is the greatest solutions for the error – click here
Make sure to leave a comment.
Thank you for reading. If you are interesting on my article, make sure to follow my other articles as well.
- Android Studio Articles – https://builditmasters.com/category/android-studio/
- Android Studio Firebase Tutorial – https://builditmasters.com/category/android-studio-firebase-tutorial/
- C Programming – https://builditmasters.com/category/programming/
- Flutter – https://builditmasters.com/category/flutter/
- GitHub Tutorials – https://builditmasters.com/category/github/
- Java Programming – https://builditmasters.com/category/java-programming/
- MERN / MEVN Stacks – https://builditmasters.com/category/mern_mevn_stacks/
- Tech News – https://builditmasters.com/category/tech-news/
- Theory Lessons – https://builditmasters.com/category/theory-lessons/
- Adobe Tutorials – https://builditmasters.com/category/adobe-tutorials/
Make sure to follow my socials.
