Setup React.js And Babel

October 30, 2022 Post a Comment

I'm trying to use React.js on Ubuntu for a web dev project, but I can't figure out how to set it up. Please note that I am a beginner, and have only used Javascript with JQuery bef

Solution 1:

You dont need lots of stuff to start with React.

All you need to use react is include react and reactdom. Thats' it.

ReactDOM.render(
  React.createElement('h1', {}, "Hi! This is the simplest way to get started with ReactJS"),
  document.getElementById('only-react')
);

<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>

<div id="only-react"></div>

These lines should get you started with just React without all the bloatware you will find in most of the tutorials.

Solution 2:

Installing React To install React with npm, run:

npm init
npm install --save react react-dom

Creating a Single Page Application

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Solution 3:

create-react-app

IMO, the best way to start a React project for a beginner is to use create-react-app. It is a zero config package that lets you jumpstart your React development. It contains necessary packages needed for react development.

npm install -g create-react-app
create-react-app react-app
cd react-app
npm start

React Environment Using webpack and Babel

If you don't want that and want to setup your own React project you could configure one with babel and webpack. I do recommend that you check this out to learn. Here's a tutorial.

For a beginner I'd recommend the first approach.

Solution 4:

Your error come from here:

echo '{ "presets": ["react", "es2015"] }' > .babelrc

babel applies presets from right to left: it should transpile jsx first then the es2015 code.

The solution is to modify your .babelrc file by switching the order in the presets array like this:

{ "presets": ["es2015", "react"] }

Otherwise create-react-app is the best solution to begin without any configuration.

Solution 5:

you have to install babel-cli globally so u can access babel command from anywhere. looks like you already installed babel-preset-react and babel-preset-env.

create a public folder and src folder. in public folder add index.html and index.js.

index.html

<body>
    <div id="here"></div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="./index.js"></script>

index.js should be empty. Whole point is to create a file that we change and we r going to have another file,index.js, that get generated or compiled by babel. index.js will be an auto-generated file.

In src folder we r gonna use react.jsx. create app.js in src folder. for the demonstration enter this simple code :

src/app.js

const template = <p>this is jsx</p>;
const appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);

now run this command in terminal:

babel src/app.js --out-file=public/index.js --presets=env,react --watch

now check public/index.js. you should have this:

"use strict";

var template = React.createElement(
  "p",
  null,
  "this is jsx"
);
var appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);

javascript spravka