Difference between revisions of "React 2"

From Sinfronteras
Jump to: navigation, search
(Templates)
 
(32 intermediate revisions by the same user not shown)
Line 1: Line 1:
https://www.udemy.com/course/react-redux/
+
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 React:'''
  
Line 11: Line 18:
 
sudo apt install -y npm
 
sudo apt install -y npm
 
sudo npm install -g create-react-app
 
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
 
node -v
 
npm -v
 
npm -v
 
create-react-app -V  # Capital V
 
create-react-app -V  # Capital V
 +
create-next-app -V
 
</syntaxhighlight>
 
</syntaxhighlight>
  
  
 
<br />
 
<br />
'''Start a New React Project official documentation''': https://react.dev/learn/start-a-new-react-project <br />
+
'''Create a New React Project - Official documentation''':<br />
<span style="color:blue">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.</span>
+
<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 />

Latest revision as of 09:27, 2 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



CSS Libraries

npm install bulma



Props

...



Events

https://react.dev/learn/responding-to-events

https://legacy.reactjs.org/docs/events.html



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