References | MetaLevel.tech

Home Homework MDN.Study

References

Learn React: https://reactjs.org/
Read: https://ibaslogic.com/react-tutorial-for-beginners/
Create-react-app: https://create-react-app.dev/docs/deployment/

JSX (JavaScript XML)

JSX code is handled by Babel ot TypeScript transpilers. ake note of the following about the JSX:

You can use a valid JavaScript expression inside the JSX through curly braces, {}.
In JSX, elements attributes, event handlers are always in camelCase. The few exceptions are aria-* and data-* attributes, which are lowercase.
User defined components starts with capital letter: <ListItem>.

Using React with NPM (react.demo.proj.manual/)

mkdir -p react.demo.proj/{src,dist}
cd react.demo.proj/
npm init -y
npm i react react-dom webpack webpack-cli --save-dev

# Then create it by hand...
touch index.html webpack.config.js src/index.js 

npx webpack --mode production

npm run build

Create-react-app CLI (react.demo.proj.create-react-app/)

When learning react is convenient to bootstrap your application with create-react-app
It’s an opinionated yet zero-configuration starter kit for React introduced by Facebook in 2016.
create-react-app allows you to abstract from the the tooling and configuration, and to focus to the application implementation

Using npx:

npx create-react-app react.demo.proj.create-react-app.try-1
cd react.demo.proj.create-react-app/

Using global installation:

sudo npm i create-react-app -g
create-react-app react.demo.proj.create-react-app.try-2
cd react.demo.proj.create-react-app.try-2/

Directory tree tree