Setup React.js and Babel

2
votes

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 before. I tried to follow the instructions here, and I think I made it up to the point where I'm supposed to configure Babel. Here, in the terminal I ran

npm install --save-dev babel-cli babel-preset-react babel-preset-es2015

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

echo 'console.log([1, 2, 3].map(n => n + 1))' > index.js

./node_modules/.bin/babel index.js

The output I get is:

"use strict";

console.log([1, 2, 3].map(function (n) {
  return n + 1;
}));

This is great and all, but I want to be able to run an html file with a corresponding .js file, as I would normally. As it is, when I write something like

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

with a corresponding html file, I just get console errors (Unexpected Token insert or something). Obviously, I haven't managed to install Ecmascript/JSX or whatever, and I don't really know what I'm doing.

So, I guess my question is, can anyone help me with a detailed explanation of how to get started? I just want to be able to write Javascript with React, and create a simple webpage. Thank you!

5
javascriptreactjs
if you want a full-fledged react set-up with npm, you'll need something like webpack to build your code (and optionally inject it into a html file). But since you said yourself that you are a beginner, following @hunzaboy's answer might be the fastest way to get started. - stinodes

5 Answers

2
votes

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.

0
votes

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
0
votes

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.

0
votes

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.

0
votes

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);