Room-homepage in React(kinda) and Tailwind CSS
Design comparison
Solution retrospective
I understand some of the react logic!
What specific areas of your project would you like help with?The only problem is that I can't make the React work with my current tools(look in my code). To be more specific, npm is installed properly, but for some reason, it doesn't work for React(same with Yarn) -- and with Tailwind CSS was difficult to set up, but I make all the work manually(taking the code i needed, and it worked -- and it was easier because is not my first project in Tailwind). π€ Maybe is too early to learn React, but I'd appreciate any advice, and maybe I'll retry this challange with React after I finish all the current learning path. Thank you in advance!!πβ€οΈ
Community feedback
- @BeinRain06Posted 3 months ago
Hye @sksksk it seems something fishy is affecting the npm package you installed manually .
You might like to use designed webpack or vite tool to kind of configure environment of you app automatically and much easier , just using some script syntax in your computer's terminal command.
1/ try open the terminal command :
- navigate under the repertory where you want to create your **project in** - Do not enter this specific folder, rather do a right click, and choose appearing options **open in Terminal** - Wait until the terminal fully open, with cursor beating right after the path link of your directory
2/ Install React using Vite Tool :
- for example , if you choose **vite** you can install the ecosystem of vite , and also at same time react using the command : npm create vite@latest my-project -- --template react
- after the end installation type :
cd my-project
3/ Install Tailwindcss using the both command below (one after the other ) :
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
3/ configure basically tailwind.config.js file :
export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }
If something went wrong feel free to reach me.
Hope it could be of one help
Have an amazing day or night @sksksk , teasing project encompassing man technologies like that will undoubtedly improve your skill on fastening your productivity while coding.
Stay Safe and Healthy.
Marked as helpful1@sksksk2024Posted 3 months agoThank you, @BeinRain06, for making me reconsider the problem that I had faced for a few months, to make the npm work properly!!! Once I've started with Vite -- and in a new project, it drove me to the problem with npm(but somehow, it maked me think in another perspective). Thanks again, pal, and take care!! πββοΈπ
0 - @edwinc73Posted 3 months ago
Hello, The index.html is not set up for the react app. inside the body you should have
<div id="root"> </div>
this is the element the app will be rendered in. without it your react code means nothing.
Then under the
#root
element add in this script<{delete this}script type="module" src="/src/index.js">
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord