I've created very basic react project with create-react-app command and wish to run in codepen
I did below settings under JS
To run project locally I use command npm run, how to achieve that in codepen ?
create-react-app compiles all the code into one or many javascript files. You cannot do that in codepen.
You can use codepen with pre-compiled react files but you won't get what you would expect from create-react-app.
See this Hello World example:
https://reactjs.org/redirect-to-codepen/hello-world
There are other sites like glitch.me, codesandbox.io where you can clone the repo of create-react-app and use the node environment.
Related
I was doing some experiments and as experiment I build the React application manually as follows instead of create-react-app.
Created a folder and the run npm init -y.
Install react, react-dom, and react-scripts.
Added a start script that points to react-scripts start.
Run the application and get the Could not find a required file error for index.html file.
Added index.html with base code and #app div.
Run the application again and then get the Could not find a required file error for index.js file
Added index.js file with App component and wrote render related code.
Run the application and it works.
So, my question is, if I create application in this way, what I'll miss if the same application is created with create-react-app?
Has anyone gotten jsdom working in a production react build purely for the frontend (browser)?
Background Info
I got jsdom working for a create-react-app in a dev environment. It's being used to parse an html output that the user creates through a Richtext editor.
Issue
The app is not able to be built for production due to whatwg-url failing since it requires ES6 syntax for Object.defineProperty to work.
Hoping to avoid creating my own regexp's for selecting these html nodes.
Replication:
npx create-react-app my-app; cd my app; npm i jsdom;
Make a file that calls new jsdom and parses a html string
Run npm run build notice the app fails.
Answering this myself. Short answer, do not use it. There is something called DOMParser which does something similar to JSDom.
I'm developing an npm package for custom React Hooks. And using yarn for package management. The custom hooks are in the src directory, and to prevent posting the wrong code to npm, I've created a new demo folder locally at the same level as src.
To test my hooks code locally, I bundled my hooks and used yarn link to link it in my demo project smoothly as if I installed it from the registry. And next I run yarn start in my demo folder to run my test project. But it reminded me Invalid Hook Call Warning in the Chrome console.
After reading this article I knew that it is because I used duplicate React, So I tried to this command: yarn link ../node_modules/react but it just told me
error No registered package found called "../node_modules/react".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
But when I tried to use npm link ../node_modules/react there is no error reported. I can start my test project smoothly.
But here comes the problem: I am using yarn for package management and it has its own lock file yarn.lock. If I want to run my test project, I had to run npm link ../node_modules/react, this step will generate a npm lock file which is a Redundancy for me.
So how can I use yarn link ../node_modules/react instead of npm link ../node_modules/react to link a same version React?
Here is the whole repository
I will assume this question is still relevant because I stumbled upon it while looking for the answer myself. I managed to figure it out eventually.
The yarn link docs state the following:
This command is run in the package folder you’d like to consume.
In order to create a link for React, you have to cd ../node_modules/react and then yarn link while in that directory. You can then use yarn link react from the other side to consume the linked package.
For the record, it doesn't look like it matters which side you create the link from (the library or the consumer) as long as the other side makes use of it.
I spent a lot of time in HTML-only frontend, but now I'm using React with Laravel on the backend.
Laravel and React are installed correctly, no problems. But after I install Tailwind, I get an error in my terminal when running npm run dev.
Here are screenshots:
I followed this link: tailwind website
After that I follow this link also: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
When I run this command npm run dev I see an error on my terminal.
In the file webpack.mix.js remove or comment the line:
.sass('resources/sass/app.scss', 'public/css');
Because you want to use a different css preprocessor.
I'm just starting out in Reactjs.
I have a RedHat Linux VM.
I've installed nodejs and created a simple reactjs application:
npx create-react-app my-first-project
My first project works OK.
Now I have found this great reactjs package with a demo:
https://github.com/TarikHuber/material-ui-filter
I want to install the demo part of this package that consists of index.css, index.html, app.js, index.js
How would I go with this?
Where do I put this new code relative to my-first-project?
How do I call this new code?
The package I think calls redux so I assume I will install this first.
Thanks.
You should learn how npm works. If you find some cool package and you want to use it then you have to install that package. There is a installation command on Readme file on that github repo. Install package via npm install material-ui-filter then you can just use the html file on demo project.