Difference between revisions of "React 2"

From Sinfronteras
Jump to: navigation, search
(Templates)
(JSX to JS)
Line 48: Line 48:
 
<br />
 
<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/
 +
: 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==
 
==JSX to JS==
 
Tools that translate JSX into JS: https://babeljs.io/repl
 
Tools that translate JSX into JS: https://babeljs.io/repl
Line 53: Line 80:
  
 
<br />
 
<br />
 +
 
==React developer tools Google Chrome extension==
 
==React developer tools Google Chrome extension==
 
Take a looks at some of the basic functionalities of the React developer tools Google Chrome extension at:
 
Take a looks at some of the basic functionalities of the React developer tools Google Chrome extension at:

Revision as of 01:49, 1 May 2023

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:



Install React and Create a react project

Install React:

Install Node.js and npm:

# 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



Create a New React Project - Official documentation:
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.
Can I use React without a framework?
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.
Here’s why...
https://react.dev/learn/start-a-new-react-project

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


Then, to start the app:

npm start



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:

Este tiene versiones de NestJS and React. Creo que solo en TS
Free version:


Este tambien está muy bueno y el paquete de 129€ incluye version en React JS, React TS, NextJS JS, NextJS TS and others


Este parece que esta en both JS and TypeScript. They ave free en Pro versions




JSX to JS

Tools that translate JSX into JS: https://babeljs.io/repl



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



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:



First app

https://codesandbox.io/s/react-forked-m5bz37