React: Is main.js basically the same as index.js? - javascript

I have been using the command npx create-react-app my-app to build a new React app environment. It creates a simple and generic app with the React logo. It generates folders such as public with index.html and src with your typical files such as App.css, App.js, and index.js, among others.
While studying the code for reverse engineering purposes I noticed that some projects have a file called main.js. I assume people are manually creating this file and input code similar to pre-populated index.js code (automatically created by npx create-react-app my-app). Essentially code for routing or calling components which gets rendered.
Are these two file names interchangeable or should they serve different purposes?

The file name for the JS file you use as your entry point is arbitrary. Your bundler’s (Webpack, Parcel, etc) configuration will determine which file it looks for.

Related

One of my js files is not being bundled in my production build (dist folder)

I am creating a Vue app (using Vite), and I like to have my .js functions in different files inside a scripts folder. I have started recently so for the time being I only have one .js file appart from the main.js that comes with Vue.
When I build the application to deploy it, it seems that this .js file is not included in the bundle, so the deployed app cannot use it's functions.
How could I make the npm run build command include this local .js file that I am using (and it works when running the app in localhost), so that the deployed app works as expected? Am I missing something in where local files should be put inside the project files tree?
I have checked other questions regarding this, and also the official documentation, but maybe due to my lack of experience with Vue I haven't found the answer or haven't understood it.

How does a React application start without explicit references to its JS implementation files?

I'm learning React. In the tic-tac-toe game ( https://reactjs.org/tutorial/tutorial.html ) the index.html file had some event handlers and a div pointing at id=root. But nothing about an index.js file, which has a ReactDOM.render.
What tells the browser to run the index.js code if there is no tag loading it?
This link ( Where's the connection between index.html and index.js in a Create-React-App application? ) says:
Our configuration specifies that Webpack uses src/index.js as an “entry point”. So that’s the first module it reads, and it follows from it to other modules to compile them into a single bundle.
When webpack compiles the assets, it produces a single (or several if you use code splitting) bundles. It makes their final paths available to all plugins. We are using one such plugin for injecting scripts into HTML.
But if this is the answer, then why should a browser know about webpack, especially as this isn't mentioned in the minimal index.html file?
The create-react-app build script tells webpack to create the bundle(s), starting with src/index.js as the entry point. Also part of this build script is to create a modified version of the index.html file which points to the newly-created bundle file(s). You can find the modified index.html file in your /build directory, and it will have gained something like the following:
<script src="/static/js/main.379f1d19.chunk.js"></script>
That script tag is how the browser knows what to load.
Try running npm run build.
the index.html file discussed in the answer above is in the build directory produced by webpack after running that command.
Under the hood, Create React App uses Webpack with html-webpack-plugin.
this plugin will be producing the index.html file by using the index.html in the public directory as a template
Our configuration specifies that Webpack uses src/index.js as an “entry point”. So that’s the first module it reads, and it follows from it to other modules to compile them into a single bundle.
when running npm run build webpack starts with index.js and every time you import it includes that module in one script that would be injected into the index.html generated above as explained below in the answer you shared
We have enabled html-webpack-plugin to generate the HTML file. In our configuration, we specified that it should read public/index.html as a template. We have also set inject option to true. With that option, html-webpack-plugin adds a with the path provided by Webpack right into the final HTML page. This final page is the one you get in build/index.html after running npm run build, and the one that gets served from / when you run npm start.
This is my understanding I hope this helps.

How to publish typescript ReactJS component on npm?

I would like to make a new ReactJS component with Typescript and publish it on npm.
My idea is to have only a project folder with:
/dist build for final distribution on npm
node_modules
/public where I will have my index.js to locally run my app for development purposes and one folder components where all files for my distributed component will be stored (only component folder will be published)
and other files like .gitignore, .npmignore, package.json and so on..
Something like this:
I have seen many guides (and spent many hours) figuring out how to publish a ReactJS component like:
Create an NPM Package from a React Component
Create a React Component Library using TypeScript
How To Make a React Component Library - Making A React Library
Publish A React Component On NPM
create-react-library
But most of them have such a complicated structure (like script files, babel files, webpacks ..) and generated files that I don't understand.
My idea was to use react-script to run and develop the app locally and then run tsc to compile my component to build. I thought that I don't need create-react-app/library, babel or webpack to publish a react component - if they are necessary, why do we need them? I just thought it should be possible to do it simply and lightly - like just to take tsx files compile them into js..
To me, it seems that the process of publishing a ReactJS component library with TS to npm is not that well documented. Can you please provide steps or some well and easy-to-understand guide on how to publish react component? Also with all the configurations (configuration files), since I think I messed it somewhere there.
Thanks in advance!

Using external react component missing react

Imagine i have large reactjs project lets call it A and i want to use external component residing in another project which consist only of pure components (.jsx & .css files) without node_modules folder lets call that project B.
Problem component from project B cannot find react.
Module build failed: Error: Couldn't find preset "react" relative to directory
Logically because there is no node_modules folder in project.
Is there a way to instruct components from project B to use node_modules from project A
I was thinkning somehow utilize webpack but no idea how ?
You can create a root folder that contains a node_modules folder that will be shared to all your sub-projects (A and B). Inside this folder you can drop all the "common" components, modules, libraries, etc.
When you require a module, NodeJS will look for the node_modules folder on that project, if doesn't find the module there, it will look for it in a directory above and so long.

dart, specify root folder for web

I want to have some example sites in my web framework package. The sites run ok if I just want to run them as dart only implementations, but if I want to compile them to javascript I currently copy the sub folder out from my packages /example directory and into a new packages folders /web directory, as I only know how to get dart build to compile the client side code to javascript if its in the web directory. Is there anyway of telling dart build to run in a different root folder? like pkgRoot/example/example_1?
pub build example works fine for me but not yet for Polymer projects (this is work in progress)
Polymer doesn't like when it has a transformer configuration in the package where elements are imported from.
I maintain two polymer elements packages (polymer_elements/polymer_ui_elements).
I have the example files in example but use another package (e.g. polymer_elements_examples) to build the examples to JavaScript.
This polymer_elements_examples has a pubspec.yaml file with a dependency to polymer_elements, a transformer configuration for the entry pages, and example as a symbolic link to polymer_elements_examples
I then build the examples in polymer_elements_examples with pub build example.

Categories

Resources