|
|
| Line 1: |
Line 1: |
| − | Creo que voy a tener que comprar este curso: https://www.udemy.com/course/the-nextjs-13-bootcamp-the-complete-developer-guide/
| |
| | | | |
| − | Next.js framework:
| |
| − | * https://nextjs.org/learn/foundations/about-nextjs
| |
| − | * https://beta.nextjs.org/docs
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ==Install React and Create a react project==
| |
| − | '''Install React:'''
| |
| − |
| |
| − | Install Node.js and npm:
| |
| − | <syntaxhighlight lang="shell">
| |
| − | # Add the Node.js repository:
| |
| − | curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
| |
| − |
| |
| − | sudo apt install -y nodejs
| |
| − | sudo apt install -y npm
| |
| − | sudo npm install -g create-react-app
| |
| − | sudo npm install -g create-next-app # Next.js es el primer frameworks propuesto en la documentacion
| |
| − |
| |
| − | node -v
| |
| − | npm -v
| |
| − | create-react-app -V # Capital V
| |
| − | create-next-app -V
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | '''Create a New React Project - Official documentation''':<br />
| |
| − | <span style="color:green; font-weight:bold">If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community.<br />
| |
| − | Can I use React without a framework?<br />
| |
| − | You can definitely use React without a framework—that’s how you’d use React for a part of your page. However, if you’re building a new app or a site fully with React, we recommend using a framework. <br />
| |
| − | Here’s why... </span> https://react.dev/learn/start-a-new-react-project
| |
| − |
| |
| − | <syntaxhighlight lang="shell">
| |
| − | npx create-react-app name_project # React without a framework
| |
| − | npx create-next-app name_project # Next.js es el primer frameworks propuesto en la documentacion
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | Then, to start the app:
| |
| − | <syntaxhighlight lang="shell">
| |
| − | npm start
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ==Templates==
| |
| − | From the Next documentation there are some free templates: https://nextjs.org/learn/foundations/about-nextjs
| |
| − |
| |
| − | This page list some good free templates: 11 Best Free Next.js Dashboard Admin Templates: https://medevel.com/11-nextjs-dashboard/
| |
| − |
| |
| − |
| |
| − | There are also some very good paid templates (don't know if call them templetes or compleate webb apps). The best I've seen so far are:
| |
| − |
| |
| − | * https://adminmart.com/
| |
| − | :* https://modernize-nextjs.adminmart.com/
| |
| − | : Este tiene versiones de NestJS and React. Creo que solo en TS
| |
| − | : Free version:
| |
| − | :* https://adminmart.com/product/modernize-free-nextjs-admin-template/?ref=5
| |
| − | :* https://github.com/adminmart/Modernize-Nextjs-Free
| |
| − |
| |
| − |
| |
| − | * https://berrydashboard.io/
| |
| − | : Este tambien está muy bueno y el paquete de 129€ incluye version en React JS, React TS, NextJS JS, NextJS TS and others
| |
| − |
| |
| − |
| |
| − | * https://github.com/themeselection/materio-mui-react-nextjs-admin-template-free
| |
| − | : Este parece que esta en both JS and TypeScript. They ave free en Pro versions
| |
| − |
| |
| − |
| |
| − | * https://www.wrappixel.com/templates/ample-nextjs-admin-dashboard/
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ==JSX to JS==
| |
| − | Tools that translate JSX into JS: https://babeljs.io/repl
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ==React developer tools Google Chrome extension==
| |
| − | Take a looks at some of the basic functionalities of the React developer tools Google Chrome extension at:
| |
| − | https://www.udemy.com/course/react-redux/learn/lecture/34693592#overview
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ==CSS Libraries==
| |
| − | * https://bulma.io/
| |
| − | npm install bulma
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ==Props==
| |
| − | ...
| |
| − |
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ==Events==
| |
| − | https://react.dev/learn/responding-to-events
| |
| − |
| |
| − | https://legacy.reactjs.org/docs/events.html
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ==Modern React with Redux Udemy course==
| |
| − | https://www.udemy.com/course/react-redux/
| |
| − |
| |
| − |
| |
| − | A good overview explanation of how React works can be found on the '''critical questions/core concepts''' lectures of the present course. Here the link to the lecture:
| |
| − | * https://www.udemy.com/course/react-redux/learn/lecture/34693340#overview
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ===First app===
| |
| − | https://codesandbox.io/s/react-forked-m5bz37
| |
| − |
| |
| − |
| |
| − | <br />
| |
