ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Create A React App Without Create-React-App
ฝัง
- เผยแพร่เมื่อ 6 เม.ย. 2022
- How to create a react application without using the create-react-app command.
Code: github.com/machadop1407/react...
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #programming
Now i appreciate CRA even more 😐
Start using vite, you will hate cra more
@Sadik.H no 😐
CRA will also left u with some vulnerable packages too 🙃
Don't use CRA.
@@weirddev I'm really confused why do we not see Vite nearly as much as CRA, like, it's pretty simple and so much faster
I did without create react app, i did with vite🤣
Keep it up buddy😂😂😂
Google sent me to your video. It helped a lot. Even as a begginer I have understood everything and I loved it! It is right what I needed for my project! Cheers!
I was confused with this but you clear it out everything. Thanks
i have been searching for this exact video for the past week
Fala Pedrão!!! Excelente vídeo continua assim que seu canal vai crescer cada vez mais (Tenho certeza que você é BR).
Obrigado Caio! Sou br sim kkkkkk
Preciso em
"The thing that takes the most amount of time is understanding everything"!
Aint that true!
When I ran the app, I got an error "Can't resolve './index.js' in C:\Development\React
eact-from-scratch". I modified the webpack.config.js entry: "./index.js" to entry: "./src/index.js" and that fixed the error.
Great video! Thank you! Interesting to see same with snowpack ))
Amazing! Thanks a lot man, you are doing best!
Thank you so much CRA was not working for me for a week no matter what i did. truly a godsend.
I have done several tutorials on React and a lot of them fail for different reasons but his one has worked completely. I feel I have learned a tonne about how react hangs together. Also having the source on git helps immensely.
The only thing I had to do differently was in the webpack.config.js I had to also set entry: "./src/index.js" as it wasn't finding the index.js file. I don't know why it was different for you?
Brilliantly explained 🔥
Thank you 🙌
New sub, love your videos already! Can you make a tutorial on how we can implement audio sound effects(for example onclick or any other events) using react? I would appreciate it
Thanks a lot!! But it seems like you forgot to add all of the Babel-related packages into the description like you said you would, so that would be a great addition!
Fantastic tutorial! How you can develop parts of the application features using this method and integrate it with an existing application that is based on angularjs? For example, there are a lot of forns which are build using a designer of some kind. I can insert an HTML component and add the script tag to reference the script main.js. But how to render the correct section when the specific form is active?
ty so much for this, you are a legend!
I like your videos. Your videos are very helpful. If possible make video on next js + rich text editor .
parabens mano, pelo vídeo e pelo seu ingles, muito bom
GReat video!
Bro where did u find all buble dependencies?
Thanks a tonne for the video, saved my day
God bless you fam❤️🔥
Hey! Pedro, you mind doing a video with golang as backend and react as frontend with SQL database??
This is so cool!
This is the best way to learn webpack.
thanks man!
Great video man, as always. I am just having some issues. Like for example, the console is flooded with Source map errors. Any idea why?
Please create one tutorial with typescript and styled components! Please! :)
I wish I could like this video twice. I have a new interview question, "can you create a react app, without running create-react-app?'
Hey PedoTech, love your channel. Your React Router video is *chef's kiss*.
I have been scouring the web for this answer but to no avail. In React, should I use js or jsx at the file extension? Is there any difference to it? I would love your input! Obrigado!
Thank you! There is no difference between them! It is purely for organization. In my prev company they used jsx for react components and js for normal files
@@PedroTechnologies Thank you! I am a beginner in Web Dev. When you say normal files, are we talking about JS files with only regular JS in it? And as soon as you mix HTML and JS it should be jsx, right?
@@MrFuma-fr8no ive seen people do exactly this yes
When you suffix your files with .jsx, you get autocompletion for html tags which you don't get when you suffix it with .js
Finally 😌❤️🔥
In your “rules:” your RegEx statement only tests for the .js OR .jsx extension YET you also have the .json and .tx extensions listed.
Shouldn’t they ALSO be added to your RegEx statement for testing…?
I'm happy to follow you along, but where do you get your info? (
I'm thinking for when one of the packages ultimately changes, where can I get the latest presets config, without hoping you'll post a timely video) Thanks!
I follow the react team on twitter and I always check the react subreddit!
@@PedroTechnologies gotcha, thanks. See you on teh subreddits then!
my css didn't work properly, I had to add this under rules in webpack.config.js
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
and also install these dependencies:
npm install --save-dev style-loader css-loader
Starting from React 17, you don't need to Import React for using JSX syntax in files. So how we can do it with webpack ?
can you please make a separate tutorial for how to store fields and files in mongdb(MERN).
Great video but how do I incorporate CSS files?
Please make a vid on real time chat app with react and firebase. Like a discord clone.
Would love to know how u got auto-completion in your bash terminal?
Fig ! Great software
This isnt working for me. When i run npm build I get an error in ./src/index.js and that the module build failed. I also have an error that says ./index.js cant but resolved. What can I do to fix it?
Is it possible to reuse all this in another react project?
How to make powershell auto-suggestion like this?
I ran into an error saying field browser doesn't contain an alias configuration
this is better than cra, cause is more understandable
Let’s go
i want to know the commands in windows
@PedroTech
I am not able to run your project, it showing error e.g. 'webpack-dev-server' is not recognized as an internal or external command,
Sorry, i have deleted existing node modules folder and i have installed again and it is started working but still with react 18.2.0 it is not working, is there any other solution?
Transcendeu 🤯
Cool
also, you need to do: npm i react react-dom --save-dev to install react, otherwise does NOT work
you forgot to include react refresh...
🤦🏻😢
Thanks Pedro!
Now create a react app without using react
I think, you forgot to add .gitignore and put /node_modules so it won't be push on github. Anyway, good tutorial!
I was getting CAN NOT resolve MAIN.js error, I solved it with modifying MAIN.JS path in webpack.config.js, so it is now: filename: "./public/main.js", as oppose to "main.js" ... it works now
showint error
:( \learnings
eact-corpsite
ode_modules\webpack-dev-server\lib\servers\WebsocketServer.js:10
static heartbeatInterval = 1000;
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-corpsite@1.0.0 start: `webpack-dev-server .`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-corpsite@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
Don't use cra, it's outdated, use vite instead, it's much faster and has much better DX
How