Start a React in HTML

Step 1: Add a DOM container to the HTML

<! -... Other HTML... --><div id="like_button_container"></div><! -... Other HTML... -->Copy the code

Step 2: Add the Script tag and import the React file

<! -- Load React. -- > <! -- Note: When deployed, will"development.js"Replace with"production.min.js". --><script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script><! -- Load our React component. --><script src="like_button.js"></script>
Copy the code

The first two tags load React. The third will load your component code.

Step 3: Create a React component

/ /... The previous pasted code...

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
Copy the code

Tip: Compress JavaScript code for the production environment

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
Copy the code

Solution 2: Use React and JSX to get a quick start

The fastest way to try JSX on a project is to add this to the page

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Copy the code

Now, you can use JSX in any

This approach is good for learning and creating simple examples. However, it will make your site slow and is not suitable for production environments. When you’re ready to go further, remove the new

Go to your project folder on the terminal and paste these two commands:

  • Step 1: Executenpm init -y (If you fail,Gist.github.com/gaearon/246…)
  • Step 2: Executenpm install babel-cli@6 babel-preset-react-app@3

We’re using NPM here just to install the JSX preprocessor, after which you won’t need it anymore. Both React and application code can continue to use the

Run the JSX preprocessor

Create a folder named SRC and execute this terminal command:

npx babel --watch src --out-dir . --presets react-app/prod

Note:

NPX isn’t a misspelling — it’s a package runtime tool that comes with NPM 5.2+.

Create a new React app using the toolchain

The React team mainly recommends these solutions:

  • If you’re learning React or creating a new one-page App, use the Create React App.
npx create-react-app my-app
cd my-app
npm start
Copy the code
  • If you’re building a server-side rendered website with Node.js, try Nex.js.
  • If you’re building a static, content-driven website, try Gatsby.
  • If you’re building a component library or integrating React into an existing code repository, try a more flexible tool chain.

3. CDN link

3.1 Development Environment

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
Copy the code

3.2 Production Environment

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
Copy the code

If you need to load a specific version of react and react-dom, replace 17 with the version number you want to load.

If you introduce React via CDN, we recommend that you set the Crossorigin property:

<script crossorigin src="..."></script>
Copy the code

It is also recommended that you verify that the CDN used is set to access-control-allow-origin: * HTTP header