Difference between revisions of "React 2"

From Sinfronteras
Jump to: navigation, search
(Templates)
 
(6 intermediate revisions by the same user not shown)
Line 28: Line 28:
  
 
<br />
 
<br />
'''Start a New React Project - Official documentation''':<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 />
 
<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 />
 
Can I use React without a framework?<br />
Line 44: Line 44:
 
npm start
 
npm start
 
</syntaxhighlight>
 
</syntaxhighlight>
 
 
<br />
 
==JSX to JS==
 
Tools that translate JSX into JS: https://babeljs.io/repl
 
  
  
Line 62: Line 57:
  
 
* https://adminmart.com/
 
* https://adminmart.com/
 +
:* https://modernize-nextjs.adminmart.com/
 
: Este tiene versiones de NestJS and React. Creo que solo en TS
 
: Este tiene versiones de NestJS and React. Creo que solo en TS
 
: Free version:
 
: Free version:
Line 81: Line 77:
 
<br />
 
<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==
 
==Modern React with Redux Udemy course==
 
https://www.udemy.com/course/react-redux/
 
https://www.udemy.com/course/react-redux/

Latest revision as of 08: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