https://github.com/jharsh1202/learn-react-from-zero
https://github.com/jharsh1202/learn-react-from-zero
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jharsh1202/learn-react-from-zero
- Owner: jharsh1202
- Created: 2023-08-05T08:06:44.000Z (almost 2 years ago)
- Default Branch: initial
- Last Pushed: 2023-08-05T08:59:24.000Z (almost 2 years ago)
- Last Synced: 2025-02-14T21:27:08.849Z (3 months ago)
- Language: TypeScript
- Size: 55.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Get started with Frontend from zero using Nextjs documentation:
for Js and React Basics (https://nextjs.org/learn/foundations/from-javascript-to-react)
Read about React, DOM, React DOM methods
without react, working with DOM is verbose
// Select the div element with 'app' id
const app = document.getElementById('app');
// Create a new H1 element
const header = document.createElement('h1');
// Create a new text node for the H1 element
const headerContent = document.createTextNode(
'Develop. Preview. Ship. 🚀',
);
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
with React
//load scripts from unpkg
. //react (declarative UI library)
// react-dom (DOM-specific methods that enable you to use React with the DOM)
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
this will throw an error though as browsers don’t understand JSX, so you’ll need a JavaScript compiler, like Babel, to transform JSX -> Js.
add Babel
//also you will need to inform Babel what code to transform by changing the script type to type=text/jsx.
HTML above represents the initial page content, whereas the DOM represents the updated page content which was changed by the JavaScript code you wrote, instead tell React what you want to happen to the user interface, and React will figure out the steps of how to update the DOM on your behalf.
---------------------------------------------------------------------------------------------------------------------------------------
JavaScript basics for React (Basic) (https://nextjs.org/learn/foundations/from-javascript-to-react/essential-javascript-react)
React (https://react.dev/learn/ and https://react.dev/learn/describing-the-ui)
---------------------------------------------------------------------------------------------------------------------------------------
NextJs (https://nextjs.org/docs/getting-started/installation)
- install node.js from (https://nodejs.org/en)
- create nextjs app with (npx create-next-app)
- What is your project named?
- Would you like to use TypeScript? (strongly typed superset of JS allows to catch errors during development)
- Would you like to use ESLint? (analyze and identify patterns of problematic or questionable code, helps maintaining code quality, enforce coding standards, and catch potential errors and bugs)
- Would you like to use Tailwind CSS? (CSS frameworks used for building user interfaces)
- Would you like to use `src/` directory? (ideal for larger projects)
- Would you like to use App Router? (recommended) (yes as recommended)
- Would you like to customize the default import alias? (No)
- npm install
- npm run build
- npm start (check http://localhost:3000 on your browser)