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.
Related
I am trying using React ui with laravel.
Command I run:
laravel new project
npm i
composer require laravel/ui
php artisan ui react
npm i & npm run dev
After this, when I do php artisan serve it says (About Example.js):
ERROR: The JSX syntax extension is not currently enabled
I have tried different solutions on google of creating .babelrc and babel.config.js files but nothing removes the error. Can anyone tells why is it so? What is proper configuration of react with laravel?
If you have installed fresh laravel, it comes with vite.
Since you want to use React, just save the .js files in resources/js as .jsx and then run the npm run dev command again.
They explain it in the document: https://laravel.com/docs/9.x/vite#react
For blade files:
#viteReactRefresh
#vite('resources/js/app.jsx')
For source files: https://laravel.com/docs/9.x/vite#working-with-scripts
Or u can choose another path like this: https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia
I am facing an issue with code highlighting when using prism-react-renderer component in Gatsby. I have configured it as per instructions in FormidableLabs/prism-react-renderer.
Everything works in development mode, but when I build a production version with the gatsby build command, the pre tag is not decorated with prism classes (class="prism-code language-python" is missing). My guess is that the production build does not include the right component or CSS, but I don't know where to start looking.
Also, this issue was not present when I used the same code 7-8 months back in another project. So it may be a problem introduced in the past few months because of a plugin/component update.
Attached are two screenshots - one with gatsby develop and another with gatsby build.
Commands I ran to setup and install the requisites:
> gatsby new test-mdx-prism-rendering https://github.com/gatsbyjs/gatsby-starter-hello-world
> npm install --save gatsby-plugin-mdx #mdx-js/mdx #mdx-js/react
> npm install --save mdx-utils
> npm install --save prism-react-renderer
Sample GitHub project is at subhashb/test-mdx-prism-rendering
Found the answer as I tried to dig deeper.
The workaround is discussed here: https://github.com/ChristopherBiscardi/gatsby-mdx/issues/394
Apparently, the wrapRootElement defined in gatsby-browser.js should be made available in gatsby-ssr.js as well.
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.
I am trying to setup react native stories on expo which is working fine on the device but I am unable to set it up for the web. I want the components to render on the Web too. Can you please suggest any guide or configuration for that?
This is my storybook configuration: https://github.com/iamshadmirza/RNDSDemo
You should just follow this tutorial : https://www.learnstorybook.com/intro-to-storybook/react-native/en/get-started/
After expo init, you should run npx sb init, then install #storybook/react-native-server (as a devDependency).
Once you're here, just install Jest as seen in the previous link, and run yarn storybook. You'll get Storybook running on localhost:7007
I'm having trouble installing React on an empty project in WebStorm. The instructions on the WebStorm help page tells me to get create-react-app.
Is there a way I can just get react? And if not, what is the difference between the two?
I'm trying to follow this specific tutorial series online about React for beginners. It's a 4 minute video so can anyone please explain to me what the youtuber did?
I would recommend using create-react-app because you will not need to install or configure tools like Webpack or Babel.
You need to install it from https://github.com/facebook/create-react-app if you have npm (node package manager) installed you can just type npm install -g create-react-app