Short Intro to React

React GitHub Repo

React Documentation

React is popular.

npm trends

React is a JavaScript library for building user interfaces, according to their website :)

It was developed by Facebook in 2011. Created by Jordan Walke, a software engineer, who released an early prototype of React called “FaxJS”.

JSX

React is based on JavaScript, but it’s mostly combined with JSX.

JSX stands for JavaScript XML and enables you to write HTML in React. JSX converts HTML tags into react elements.

https://www.w3schools.com/react/react_jsx.asp

Thinking in React

• Break the UI into a component hierarchy
• React’s one-way data flow (also called one-way binding) keeps everything modular and fast.
• props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).
• DRY — Don’t Repeat Yourself
• Identify where your state should live

Get started

You have three options to use React

• Use Online Playgrounds to get a taste of React.
• Add React to a Website as a <script> tag in one minute.
• Create a New React App if you’re looking for a powerful JavaScript toolchain.

You can use React as a <script> tag from a CDN, or as a react package on npm.

Add React to a website

You can easily add react to your website with just a few lines of code.

Step 1: Add a DOM Container to the HTML with an Id

Step 2: Import the react package in the end of the body tag

Step 3: Create a js file with the react component, in the end you take the element with the id and render your component within this container element

Step 4: Add the file in the end of the body in your html file

Example GitHub Repo

Create a new React app

npx create-react-app my-app --template typescript

Running this command will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies.

For the project to build, these files must exist with exact filenames:

• public/index.html is the page template;
• src/index.js is the JavaScript entry point.

You can delete or rename the other files.

https://create-react-app.dev/

Recommendations by React

The React team primarily recommends these solutions:

• If you’re learning React or creating a new single-page app, use Create React App.
• If you’re building a server-rendered website with Node.js, try Next.js.
• If you’re building a static content-oriented website, try Gatsby.
• If you’re building a component library or integrating with an existing codebase, try More Flexible Toolchains.